@wordpress/format-library 5.48.0 → 5.49.1-next.v.202606191442.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 +9 -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 +30 -13
- package/build/math/index.cjs.map +3 -3
- package/build/non-breaking-space/index.cjs +1 -1
- package/build/non-breaking-space/index.cjs.map +1 -1
- 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 +37 -15
- package/build-module/math/index.mjs.map +2 -2
- package/build-module/non-breaking-space/index.mjs +1 -1
- package/build-module/non-breaking-space/index.mjs.map +1 -1
- 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 +50 -16
- 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
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/language/index.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * WordPress dependencies\n */\nimport { RichTextToolbarButton } from '@wordpress/block-editor';\nimport {\n\tTextControl,\n\tSelectControl,\n\tButton,\n\tPopover,\n
|
|
5
|
-
"mappings": ";AAGA,SAAS,UAAU;AAKnB,SAAS,6BAA6B;AACtC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * WordPress dependencies\n */\nimport { RichTextToolbarButton } from '@wordpress/block-editor';\nimport {\n\tTextControl,\n\tSelectControl,\n\tButton,\n\tPopover,\n} from '@wordpress/components';\nimport { Stack } from '@wordpress/ui';\nimport { useState } from '@wordpress/element';\nimport { applyFormat, removeFormat, useAnchor } from '@wordpress/rich-text';\nimport { language as languageIcon } from '@wordpress/icons';\n\nconst name = 'core/language';\nconst title = __( 'Language' );\n\nexport const language = {\n\tname,\n\ttitle,\n\ttagName: 'bdo',\n\tclassName: null,\n\tattributes: {\n\t\tlang: 'lang',\n\t\tdir: 'dir',\n\t},\n\tedit: Edit,\n};\n\nfunction Edit( { isActive, value, onChange, contentRef } ) {\n\tconst [ isPopoverVisible, setIsPopoverVisible ] = useState( false );\n\tconst togglePopover = () => {\n\t\tsetIsPopoverVisible( ( state ) => ! state );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<RichTextToolbarButton\n\t\t\t\ticon={ languageIcon }\n\t\t\t\tlabel={ title }\n\t\t\t\ttitle={ title }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tif ( isActive ) {\n\t\t\t\t\t\tonChange( removeFormat( value, name ) );\n\t\t\t\t\t} else {\n\t\t\t\t\t\ttogglePopover();\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t\tisActive={ isActive }\n\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t/>\n\t\t\t{ isPopoverVisible && (\n\t\t\t\t<InlineLanguageUI\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tonClose={ togglePopover }\n\t\t\t\t\tcontentRef={ contentRef }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction InlineLanguageUI( { value, contentRef, onChange, onClose } ) {\n\tconst popoverAnchor = useAnchor( {\n\t\teditableContentElement: contentRef.current,\n\t\tsettings: language,\n\t} );\n\n\tconst [ lang, setLang ] = useState( '' );\n\tconst [ dir, setDir ] = useState( 'ltr' );\n\n\treturn (\n\t\t<Popover\n\t\t\tclassName=\"block-editor-format-toolbar__language-popover\"\n\t\t\tanchor={ popoverAnchor }\n\t\t\tonClose={ onClose }\n\t\t>\n\t\t\t<Stack\n\t\t\t\trender={ <form /> }\n\t\t\t\tdirection=\"column\"\n\t\t\t\tgap=\"lg\"\n\t\t\t\tclassName=\"block-editor-format-toolbar__language-container-content\"\n\t\t\t\tonSubmit={ ( event ) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tapplyFormat( value, {\n\t\t\t\t\t\t\ttype: name,\n\t\t\t\t\t\t\tattributes: {\n\t\t\t\t\t\t\t\tlang,\n\t\t\t\t\t\t\t\tdir,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t} )\n\t\t\t\t\t);\n\t\t\t\t\tonClose();\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<TextControl\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tlabel={ title }\n\t\t\t\t\tvalue={ lang }\n\t\t\t\t\tonChange={ ( val ) => setLang( val ) }\n\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t'A valid language attribute, like \"en\" or \"fr\".'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t\t<SelectControl\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tlabel={ __( 'Text direction' ) }\n\t\t\t\t\tvalue={ dir }\n\t\t\t\t\toptions={ [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tlabel: __( 'Left to right' ),\n\t\t\t\t\t\t\tvalue: 'ltr',\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tlabel: __( 'Right to left' ),\n\t\t\t\t\t\t\tvalue: 'rtl',\n\t\t\t\t\t\t},\n\t\t\t\t\t] }\n\t\t\t\t\tonChange={ ( val ) => setDir( val ) }\n\t\t\t\t/>\n\t\t\t\t<Stack justify=\"right\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\ttext={ __( 'Apply' ) }\n\t\t\t\t\t/>\n\t\t\t\t</Stack>\n\t\t\t</Stack>\n\t\t</Popover>\n\t);\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,10 +4,9 @@ import { useInstanceId } from "@wordpress/compose";
|
|
|
4
4
|
import { __ } from "@wordpress/i18n";
|
|
5
5
|
import {
|
|
6
6
|
__experimentalInputControl as InputControl,
|
|
7
|
-
CheckboxControl
|
|
8
|
-
__experimentalVStack as VStack
|
|
7
|
+
CheckboxControl
|
|
9
8
|
} from "@wordpress/components";
|
|
10
|
-
import { VisuallyHidden } from "@wordpress/ui";
|
|
9
|
+
import { Stack, VisuallyHidden } from "@wordpress/ui";
|
|
11
10
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
12
11
|
var CSSClassesSettingComponent = ({ setting, value, onChange }) => {
|
|
13
12
|
const hasValue = value ? value?.cssClasses?.length > 0 : false;
|
|
@@ -33,7 +32,7 @@ var CSSClassesSettingComponent = ({ setting, value, onChange }) => {
|
|
|
33
32
|
};
|
|
34
33
|
return /* @__PURE__ */ jsxs("fieldset", { children: [
|
|
35
34
|
/* @__PURE__ */ jsx(VisuallyHidden, { render: /* @__PURE__ */ jsx("legend", {}), children: setting.title }),
|
|
36
|
-
/* @__PURE__ */ jsxs(
|
|
35
|
+
/* @__PURE__ */ jsxs(Stack, { direction: "column", gap: "md", children: [
|
|
37
36
|
/* @__PURE__ */ jsx(
|
|
38
37
|
CheckboxControl,
|
|
39
38
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/link/css-classes-setting.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalInputControl as InputControl,\n\tCheckboxControl,\n
|
|
5
|
-
"mappings": ";AAGA,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAAS,UAAU;AACnB;AAAA,EACC,8BAA8B;AAAA,EAC9B;AAAA,
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalInputControl as InputControl,\n\tCheckboxControl,\n} from '@wordpress/components';\nimport { Stack, VisuallyHidden } from '@wordpress/ui';\n\n/**\n * CSSClassesSettingComponent\n *\n * Presents a toggleable text input for editing link CSS classes. The input\n * is shown when the toggle is enabled or when there is already a value. When\n * toggled off and a value exists, it resets the value to an empty string.\n *\n * @param {Object} props - Component props.\n * @param {Object} props.setting - Setting configuration object.\n * @param {Object} props.value - Current link value object.\n * @param {Function} props.onChange - Callback when value changes.\n */\nconst CSSClassesSettingComponent = ( { setting, value, onChange } ) => {\n\tconst hasValue = value ? value?.cssClasses?.length > 0 : false;\n\tconst [ isSettingActive, setIsSettingActive ] = useState( hasValue );\n\tconst instanceId = useInstanceId( CSSClassesSettingComponent );\n\tconst controlledRegionId = `css-classes-setting-${ instanceId }`;\n\n\t// Sanitize user input: replace commas with spaces, collapse repeated spaces, and trim\n\tconst handleSettingChange = ( newValue ) => {\n\t\tconst sanitizedValue =\n\t\t\ttypeof newValue === 'string'\n\t\t\t\t? newValue.replace( /,/g, ' ' ).replace( /\\s+/g, ' ' ).trim()\n\t\t\t\t: newValue;\n\t\tonChange( {\n\t\t\t...value,\n\t\t\t[ setting.id ]: sanitizedValue,\n\t\t} );\n\t};\n\n\tconst handleCheckboxChange = () => {\n\t\tif ( isSettingActive ) {\n\t\t\tif ( hasValue ) {\n\t\t\t\t// Reset the value when hiding the input and a value exists.\n\t\t\t\thandleSettingChange( '' );\n\t\t\t}\n\t\t\tsetIsSettingActive( false );\n\t\t} else {\n\t\t\tsetIsSettingActive( true );\n\t\t}\n\t};\n\n\treturn (\n\t\t<fieldset>\n\t\t\t<VisuallyHidden render={ <legend /> }>\n\t\t\t\t{ setting.title }\n\t\t\t</VisuallyHidden>\n\t\t\t<Stack direction=\"column\" gap=\"md\">\n\t\t\t\t<CheckboxControl\n\t\t\t\t\tlabel={ setting.title }\n\t\t\t\t\tonChange={ handleCheckboxChange }\n\t\t\t\t\tchecked={ isSettingActive || hasValue }\n\t\t\t\t\taria-expanded={ isSettingActive }\n\t\t\t\t\taria-controls={\n\t\t\t\t\t\tisSettingActive ? controlledRegionId : undefined\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t{ isSettingActive && (\n\t\t\t\t\t<div id={ controlledRegionId }>\n\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\tlabel={ __( 'CSS classes' ) }\n\t\t\t\t\t\t\tvalue={ value?.cssClasses }\n\t\t\t\t\t\t\tonChange={ handleSettingChange }\n\t\t\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t\t\t'Separate multiple classes with spaces.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t__unstableInputWidth=\"100%\"\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t</Stack>\n\t\t</fieldset>\n\t);\n};\n\nexport default CSSClassesSettingComponent;\n"],
|
|
5
|
+
"mappings": ";AAGA,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAAS,UAAU;AACnB;AAAA,EACC,8BAA8B;AAAA,EAC9B;AAAA,OACM;AACP,SAAS,OAAO,sBAAsB;AA8CV,cAGzB,YAHyB;AAhC5B,IAAM,6BAA6B,CAAE,EAAE,SAAS,OAAO,SAAS,MAAO;AACtE,QAAM,WAAW,QAAQ,OAAO,YAAY,SAAS,IAAI;AACzD,QAAM,CAAE,iBAAiB,kBAAmB,IAAI,SAAU,QAAS;AACnE,QAAM,aAAa,cAAe,0BAA2B;AAC7D,QAAM,qBAAqB,uBAAwB,UAAW;AAG9D,QAAM,sBAAsB,CAAE,aAAc;AAC3C,UAAM,iBACL,OAAO,aAAa,WACjB,SAAS,QAAS,MAAM,GAAI,EAAE,QAAS,QAAQ,GAAI,EAAE,KAAK,IAC1D;AACJ,aAAU;AAAA,MACT,GAAG;AAAA,MACH,CAAE,QAAQ,EAAG,GAAG;AAAA,IACjB,CAAE;AAAA,EACH;AAEA,QAAM,uBAAuB,MAAM;AAClC,QAAK,iBAAkB;AACtB,UAAK,UAAW;AAEf,4BAAqB,EAAG;AAAA,MACzB;AACA,yBAAoB,KAAM;AAAA,IAC3B,OAAO;AACN,yBAAoB,IAAK;AAAA,IAC1B;AAAA,EACD;AAEA,SACC,qBAAC,cACA;AAAA,wBAAC,kBAAe,QAAS,oBAAC,YAAO,GAC9B,kBAAQ,OACX;AAAA,IACA,qBAAC,SAAM,WAAU,UAAS,KAAI,MAC7B;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,OAAQ,QAAQ;AAAA,UAChB,UAAW;AAAA,UACX,SAAU,mBAAmB;AAAA,UAC7B,iBAAgB;AAAA,UAChB,iBACC,kBAAkB,qBAAqB;AAAA;AAAA,MAEzC;AAAA,MACE,mBACD,oBAAC,SAAI,IAAK,oBACT;AAAA,QAAC;AAAA;AAAA,UACA,OAAQ,GAAI,aAAc;AAAA,UAC1B,OAAQ,OAAO;AAAA,UACf,UAAW;AAAA,UACX,MAAO;AAAA,YACN;AAAA,UACD;AAAA,UACA,sBAAqB;AAAA,UACrB,uBAAqB;AAAA;AAAA,MACtB,GACD;AAAA,OAEF;AAAA,KACD;AAEF;AAEA,IAAO,8BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,14 +1,20 @@
|
|
|
1
1
|
// packages/format-library/src/math/index.js
|
|
2
2
|
import { __, sprintf } from "@wordpress/i18n";
|
|
3
3
|
import { useState, useEffect } from "@wordpress/element";
|
|
4
|
-
import {
|
|
4
|
+
import {
|
|
5
|
+
insert,
|
|
6
|
+
insertObject,
|
|
7
|
+
slice,
|
|
8
|
+
getTextContent,
|
|
9
|
+
useAnchor
|
|
10
|
+
} from "@wordpress/rich-text";
|
|
5
11
|
import { RichTextToolbarButton } from "@wordpress/block-editor";
|
|
6
12
|
import {
|
|
7
13
|
Popover,
|
|
8
14
|
TextControl,
|
|
9
|
-
__experimentalVStack as VStack,
|
|
10
15
|
privateApis as componentsPrivateApis
|
|
11
16
|
} from "@wordpress/components";
|
|
17
|
+
import { Stack } from "@wordpress/ui";
|
|
12
18
|
import { math as icon } from "@wordpress/icons";
|
|
13
19
|
import { speak } from "@wordpress/a11y";
|
|
14
20
|
import { unlock } from "../lock-unlock.mjs";
|
|
@@ -71,7 +77,7 @@ function InlineUI({
|
|
|
71
77
|
focusOnMount: false,
|
|
72
78
|
anchor: popoverAnchor,
|
|
73
79
|
className: "block-editor-format-toolbar__math-popover",
|
|
74
|
-
children: /* @__PURE__ */ jsx("div", { style: { minWidth: "300px", padding: "4px" }, children: /* @__PURE__ */ jsxs(
|
|
80
|
+
children: /* @__PURE__ */ jsx("div", { style: { minWidth: "300px", padding: "4px" }, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: "xs", children: [
|
|
75
81
|
/* @__PURE__ */ jsx(
|
|
76
82
|
TextControl,
|
|
77
83
|
{
|
|
@@ -118,24 +124,40 @@ function Edit({
|
|
|
118
124
|
setLatexToMathML(() => module.default);
|
|
119
125
|
});
|
|
120
126
|
}, []);
|
|
127
|
+
function onClick() {
|
|
128
|
+
let newValue;
|
|
129
|
+
if (isObjectActive) {
|
|
130
|
+
const latex = activeObjectAttributes?.["data-latex"] || "";
|
|
131
|
+
newValue = insert(value, latex);
|
|
132
|
+
newValue.start = newValue.end - latex.length;
|
|
133
|
+
} else {
|
|
134
|
+
const selectedText = getTextContent(slice(value));
|
|
135
|
+
let innerHTML = "";
|
|
136
|
+
if (selectedText && latexToMathML) {
|
|
137
|
+
try {
|
|
138
|
+
innerHTML = latexToMathML(selectedText, {
|
|
139
|
+
displayMode: false
|
|
140
|
+
});
|
|
141
|
+
} catch {
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
newValue = insertObject(value, {
|
|
145
|
+
type: name,
|
|
146
|
+
attributes: { "data-latex": selectedText },
|
|
147
|
+
innerHTML
|
|
148
|
+
});
|
|
149
|
+
newValue.start = newValue.end - 1;
|
|
150
|
+
}
|
|
151
|
+
onChange(newValue);
|
|
152
|
+
onFocus();
|
|
153
|
+
}
|
|
121
154
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
122
155
|
/* @__PURE__ */ jsx(
|
|
123
156
|
RichTextToolbarButton,
|
|
124
157
|
{
|
|
125
158
|
icon,
|
|
126
159
|
title,
|
|
127
|
-
onClick
|
|
128
|
-
const newValue = insertObject(value, {
|
|
129
|
-
type: name,
|
|
130
|
-
attributes: {
|
|
131
|
-
"data-latex": ""
|
|
132
|
-
},
|
|
133
|
-
innerHTML: ""
|
|
134
|
-
});
|
|
135
|
-
newValue.start = newValue.end - 1;
|
|
136
|
-
onChange(newValue);
|
|
137
|
-
onFocus();
|
|
138
|
-
},
|
|
160
|
+
onClick,
|
|
139
161
|
isActive: isObjectActive
|
|
140
162
|
}
|
|
141
163
|
),
|
|
@@ -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 {
|
|
5
|
-
"mappings": ";AAGA,SAAS,IAAI,eAAe;AAC5B,SAAS,UAAU,iBAAiB;AACpC,
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useState, useEffect } from '@wordpress/element';\nimport {\n\tinsert,\n\tinsertObject,\n\tslice,\n\tgetTextContent,\n\tuseAnchor,\n} 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\n\tfunction onClick() {\n\t\tlet newValue;\n\n\t\tif ( isObjectActive ) {\n\t\t\t// Revert the active math object to its LaTeX source so clicking\n\t\t\t// the button toggles back to the exact text it was created from.\n\t\t\t// Keep the restored text selected so it can be edited or\n\t\t\t// re-marked right away.\n\t\t\tconst latex = activeObjectAttributes?.[ 'data-latex' ] || '';\n\t\t\tnewValue = insert( value, latex );\n\t\t\tnewValue.start = newValue.end - latex.length;\n\t\t} else {\n\t\t\t// If there's a selection, seed the format with it so you can type\n\t\t\t// LaTeX inline and then mark it as math.\n\t\t\tconst selectedText = getTextContent( slice( value ) );\n\t\t\tlet innerHTML = '';\n\t\t\tif ( selectedText && latexToMathML ) {\n\t\t\t\ttry {\n\t\t\t\t\tinnerHTML = latexToMathML( selectedText, {\n\t\t\t\t\t\tdisplayMode: false,\n\t\t\t\t\t} );\n\t\t\t\t} catch {\n\t\t\t\t\t// Leave unrendered; the popover opens with the text\n\t\t\t\t\t// prefilled so the expression can be corrected.\n\t\t\t\t}\n\t\t\t}\n\t\t\tnewValue = insertObject( value, {\n\t\t\t\ttype: name,\n\t\t\t\tattributes: { 'data-latex': selectedText },\n\t\t\t\tinnerHTML,\n\t\t\t} );\n\t\t\tnewValue.start = newValue.end - 1;\n\t\t}\n\n\t\tonChange( newValue );\n\t\tonFocus();\n\t}\n\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={ onClick }\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
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/non-breaking-space/index.js"],
|
|
4
4
|
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { insert } from '@wordpress/rich-text';\nimport { RichTextShortcut } from '@wordpress/block-editor';\n\nconst name = 'core/non-breaking-space';\nconst title = __( 'Non breaking space' );\n\nexport const nonBreakingSpace = {\n\tname,\n\ttitle,\n\ttagName: 'nbsp',\n\tclassName: null,\n\tedit( { value, onChange } ) {\n\t\tfunction addNonBreakingSpace() {\n\t\t\tonChange( insert( value, '\\u00a0' ) );\n\t\t}\n\n\t\treturn (\n\t\t\t<RichTextShortcut\n\t\t\t\ttype=\"primaryShift\"\n\t\t\t\tcharacter=\" \"\n\t\t\t\tonUse={ addNonBreakingSpace }\n\t\t\t/>\n\t\t);\n\t},\n};\n"],
|
|
5
|
-
"mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB,SAAS,wBAAwB;AAgB9B;AAdH,IAAM,OAAO;AACb,IAAM,QAAQ,GAAI,oBAAqB;AAEhC,IAAM,mBAAmB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,WAAW;AAAA,EACX,KAAM,EAAE,OAAO,SAAS,GAAI;AAC3B,aAAS,sBAAsB;AAC9B,eAAU,OAAQ,OAAO,
|
|
5
|
+
"mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB,SAAS,wBAAwB;AAgB9B;AAdH,IAAM,OAAO;AACb,IAAM,QAAQ,GAAI,oBAAqB;AAEhC,IAAM,mBAAmB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,WAAW;AAAA,EACX,KAAM,EAAE,OAAO,SAAS,GAAI;AAC3B,aAAS,sBAAsB;AAC9B,eAAU,OAAQ,OAAO,GAAS,CAAE;AAAA,IACrC;AAEA,WACC;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,WAAU;AAAA,QACV,OAAQ;AAAA;AAAA,IACT;AAAA,EAEF;AACD;",
|
|
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.
|
|
3
|
+
"version": "5.49.1-next.v.202606191442.0+17fe7db8a",
|
|
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.0",
|
|
46
|
-
"@wordpress/base-styles": "^
|
|
47
|
-
"@wordpress/block-editor": "^15.
|
|
48
|
-
"@wordpress/components": "^35.
|
|
49
|
-
"@wordpress/compose": "^8.1.0",
|
|
50
|
-
"@wordpress/data": "^10.48.0",
|
|
51
|
-
"@wordpress/element": "^8.0.0",
|
|
52
|
-
"@wordpress/html-entities": "^4.48.0",
|
|
53
|
-
"@wordpress/i18n": "^6.21.0",
|
|
54
|
-
"@wordpress/icons": "^
|
|
55
|
-
"@wordpress/latex-to-mathml": "^1.16.0",
|
|
56
|
-
"@wordpress/private-apis": "^1.48.0",
|
|
57
|
-
"@wordpress/rich-text": "^7.48.0",
|
|
58
|
-
"@wordpress/ui": "^0.
|
|
59
|
-
"@wordpress/url": "^4.48.0"
|
|
44
|
+
"@wordpress/a11y": "^4.48.2-next.v.202606191442.0+17fe7db8a",
|
|
45
|
+
"@wordpress/base-styles": "^10.0.2-next.v.202606191442.0+17fe7db8a",
|
|
46
|
+
"@wordpress/block-editor": "^15.22.1-next.v.202606191442.0+17fe7db8a",
|
|
47
|
+
"@wordpress/components": "^35.1.1-next.v.202606191442.0+17fe7db8a",
|
|
48
|
+
"@wordpress/compose": "^8.1.2-next.v.202606191442.0+17fe7db8a",
|
|
49
|
+
"@wordpress/data": "^10.48.2-next.v.202606191442.0+17fe7db8a",
|
|
50
|
+
"@wordpress/element": "^8.0.2-next.v.202606191442.0+17fe7db8a",
|
|
51
|
+
"@wordpress/html-entities": "^4.48.2-next.v.202606191442.0+17fe7db8a",
|
|
52
|
+
"@wordpress/i18n": "^6.21.2-next.v.202606191442.0+17fe7db8a",
|
|
53
|
+
"@wordpress/icons": "^14.0.2-next.v.202606191442.0+17fe7db8a",
|
|
54
|
+
"@wordpress/latex-to-mathml": "^1.16.2-next.v.202606191442.0+17fe7db8a",
|
|
55
|
+
"@wordpress/private-apis": "^1.48.2-next.v.202606191442.0+17fe7db8a",
|
|
56
|
+
"@wordpress/rich-text": "^7.48.2-next.v.202606191442.0+17fe7db8a",
|
|
57
|
+
"@wordpress/ui": "^0.16.1-next.v.202606191442.0+17fe7db8a",
|
|
58
|
+
"@wordpress/url": "^4.48.2-next.v.202606191442.0+17fe7db8a"
|
|
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": "1b6a19222df5a88f161880b5789efb3171d8f425"
|
|
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
|
@@ -3,14 +3,20 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { __, sprintf } from '@wordpress/i18n';
|
|
5
5
|
import { useState, useEffect } from '@wordpress/element';
|
|
6
|
-
import {
|
|
6
|
+
import {
|
|
7
|
+
insert,
|
|
8
|
+
insertObject,
|
|
9
|
+
slice,
|
|
10
|
+
getTextContent,
|
|
11
|
+
useAnchor,
|
|
12
|
+
} from '@wordpress/rich-text';
|
|
7
13
|
import { RichTextToolbarButton } from '@wordpress/block-editor';
|
|
8
14
|
import {
|
|
9
15
|
Popover,
|
|
10
16
|
TextControl,
|
|
11
|
-
__experimentalVStack as VStack,
|
|
12
17
|
privateApis as componentsPrivateApis,
|
|
13
18
|
} from '@wordpress/components';
|
|
19
|
+
import { Stack } from '@wordpress/ui';
|
|
14
20
|
import { math as icon } from '@wordpress/icons';
|
|
15
21
|
import { speak } from '@wordpress/a11y';
|
|
16
22
|
|
|
@@ -88,7 +94,7 @@ function InlineUI( {
|
|
|
88
94
|
className="block-editor-format-toolbar__math-popover"
|
|
89
95
|
>
|
|
90
96
|
<div style={ { minWidth: '300px', padding: '4px' } }>
|
|
91
|
-
<
|
|
97
|
+
<Stack direction="column" gap="xs">
|
|
92
98
|
<TextControl
|
|
93
99
|
__next40pxDefaultSize
|
|
94
100
|
hideLabelFromVision
|
|
@@ -114,7 +120,7 @@ function InlineUI( {
|
|
|
114
120
|
<style children=".wp-block-math__error .components-badge__content{white-space:normal}" />
|
|
115
121
|
</>
|
|
116
122
|
) }
|
|
117
|
-
</
|
|
123
|
+
</Stack>
|
|
118
124
|
</div>
|
|
119
125
|
</Popover>
|
|
120
126
|
);
|
|
@@ -135,23 +141,51 @@ function Edit( {
|
|
|
135
141
|
setLatexToMathML( () => module.default );
|
|
136
142
|
} );
|
|
137
143
|
}, [] );
|
|
144
|
+
|
|
145
|
+
function onClick() {
|
|
146
|
+
let newValue;
|
|
147
|
+
|
|
148
|
+
if ( isObjectActive ) {
|
|
149
|
+
// Revert the active math object to its LaTeX source so clicking
|
|
150
|
+
// the button toggles back to the exact text it was created from.
|
|
151
|
+
// Keep the restored text selected so it can be edited or
|
|
152
|
+
// re-marked right away.
|
|
153
|
+
const latex = activeObjectAttributes?.[ 'data-latex' ] || '';
|
|
154
|
+
newValue = insert( value, latex );
|
|
155
|
+
newValue.start = newValue.end - latex.length;
|
|
156
|
+
} else {
|
|
157
|
+
// If there's a selection, seed the format with it so you can type
|
|
158
|
+
// LaTeX inline and then mark it as math.
|
|
159
|
+
const selectedText = getTextContent( slice( value ) );
|
|
160
|
+
let innerHTML = '';
|
|
161
|
+
if ( selectedText && latexToMathML ) {
|
|
162
|
+
try {
|
|
163
|
+
innerHTML = latexToMathML( selectedText, {
|
|
164
|
+
displayMode: false,
|
|
165
|
+
} );
|
|
166
|
+
} catch {
|
|
167
|
+
// Leave unrendered; the popover opens with the text
|
|
168
|
+
// prefilled so the expression can be corrected.
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
newValue = insertObject( value, {
|
|
172
|
+
type: name,
|
|
173
|
+
attributes: { 'data-latex': selectedText },
|
|
174
|
+
innerHTML,
|
|
175
|
+
} );
|
|
176
|
+
newValue.start = newValue.end - 1;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
onChange( newValue );
|
|
180
|
+
onFocus();
|
|
181
|
+
}
|
|
182
|
+
|
|
138
183
|
return (
|
|
139
184
|
<>
|
|
140
185
|
<RichTextToolbarButton
|
|
141
186
|
icon={ icon }
|
|
142
187
|
title={ title }
|
|
143
|
-
onClick={
|
|
144
|
-
const newValue = insertObject( value, {
|
|
145
|
-
type: name,
|
|
146
|
-
attributes: {
|
|
147
|
-
'data-latex': '',
|
|
148
|
-
},
|
|
149
|
-
innerHTML: '',
|
|
150
|
-
} );
|
|
151
|
-
newValue.start = newValue.end - 1;
|
|
152
|
-
onChange( newValue );
|
|
153
|
-
onFocus();
|
|
154
|
-
} }
|
|
188
|
+
onClick={ onClick }
|
|
155
189
|
isActive={ isObjectActive }
|
|
156
190
|
/>
|
|
157
191
|
{ isObjectActive && (
|