@wordpress/format-library 5.48.0 → 5.49.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 -5
- 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 -14
- 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 -8
- 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 -16
- 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 -9
- package/src/link/css-classes-setting.js +3 -4
- package/src/math/index.js +50 -17
- 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\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,11 +77,10 @@ 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
|
{
|
|
78
|
-
__next40pxDefaultSize: true,
|
|
79
84
|
hideLabelFromVision: true,
|
|
80
85
|
label: __("LaTeX math syntax"),
|
|
81
86
|
value: latex,
|
|
@@ -118,24 +123,40 @@ function Edit({
|
|
|
118
123
|
setLatexToMathML(() => module.default);
|
|
119
124
|
});
|
|
120
125
|
}, []);
|
|
126
|
+
function onClick() {
|
|
127
|
+
let newValue;
|
|
128
|
+
if (isObjectActive) {
|
|
129
|
+
const latex = activeObjectAttributes?.["data-latex"] || "";
|
|
130
|
+
newValue = insert(value, latex);
|
|
131
|
+
newValue.start = newValue.end - latex.length;
|
|
132
|
+
} else {
|
|
133
|
+
const selectedText = getTextContent(slice(value));
|
|
134
|
+
let innerHTML = "";
|
|
135
|
+
if (selectedText && latexToMathML) {
|
|
136
|
+
try {
|
|
137
|
+
innerHTML = latexToMathML(selectedText, {
|
|
138
|
+
displayMode: false
|
|
139
|
+
});
|
|
140
|
+
} catch {
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
newValue = insertObject(value, {
|
|
144
|
+
type: name,
|
|
145
|
+
attributes: { "data-latex": selectedText },
|
|
146
|
+
innerHTML
|
|
147
|
+
});
|
|
148
|
+
newValue.start = newValue.end - 1;
|
|
149
|
+
}
|
|
150
|
+
onChange(newValue);
|
|
151
|
+
onFocus();
|
|
152
|
+
}
|
|
121
153
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
122
154
|
/* @__PURE__ */ jsx(
|
|
123
155
|
RichTextToolbarButton,
|
|
124
156
|
{
|
|
125
157
|
icon,
|
|
126
158
|
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
|
-
},
|
|
159
|
+
onClick,
|
|
139
160
|
isActive: isObjectActive
|
|
140
161
|
}
|
|
141
162
|
),
|
|
@@ -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\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.0",
|
|
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.
|
|
46
|
-
"@wordpress/base-styles": "^
|
|
47
|
-
"@wordpress/block-editor": "^15.
|
|
48
|
-
"@wordpress/components": "^
|
|
49
|
-
"@wordpress/compose": "^8.
|
|
50
|
-
"@wordpress/data": "^10.
|
|
51
|
-
"@wordpress/element": "^8.
|
|
52
|
-
"@wordpress/html-entities": "^4.
|
|
53
|
-
"@wordpress/i18n": "^6.
|
|
54
|
-
"@wordpress/icons": "^
|
|
55
|
-
"@wordpress/latex-to-mathml": "^1.
|
|
56
|
-
"@wordpress/private-apis": "^1.
|
|
57
|
-
"@wordpress/rich-text": "^7.
|
|
58
|
-
"@wordpress/ui": "^0.
|
|
59
|
-
"@wordpress/url": "^4.
|
|
44
|
+
"@wordpress/a11y": "^4.49.0",
|
|
45
|
+
"@wordpress/base-styles": "^10.1.0",
|
|
46
|
+
"@wordpress/block-editor": "^15.22.0",
|
|
47
|
+
"@wordpress/components": "^36.0.0",
|
|
48
|
+
"@wordpress/compose": "^8.2.0",
|
|
49
|
+
"@wordpress/data": "^10.49.0",
|
|
50
|
+
"@wordpress/element": "^8.1.0",
|
|
51
|
+
"@wordpress/html-entities": "^4.49.0",
|
|
52
|
+
"@wordpress/i18n": "^6.22.0",
|
|
53
|
+
"@wordpress/icons": "^15.0.0",
|
|
54
|
+
"@wordpress/latex-to-mathml": "^1.17.0",
|
|
55
|
+
"@wordpress/private-apis": "^1.49.0",
|
|
56
|
+
"@wordpress/rich-text": "^7.49.0",
|
|
57
|
+
"@wordpress/ui": "^0.16.0",
|
|
58
|
+
"@wordpress/url": "^4.49.0"
|
|
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": "0e7112a4f4fde4ea15bd9060489b8f6fe11eb6ca"
|
|
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();
|
|
@@ -102,7 +102,6 @@ function InlineLanguageUI( { value, contentRef, onChange, onClose } ) {
|
|
|
102
102
|
} }
|
|
103
103
|
>
|
|
104
104
|
<TextControl
|
|
105
|
-
__next40pxDefaultSize
|
|
106
105
|
label={ title }
|
|
107
106
|
value={ lang }
|
|
108
107
|
onChange={ ( val ) => setLang( val ) }
|
|
@@ -126,15 +125,15 @@ function InlineLanguageUI( { value, contentRef, onChange, onClose } ) {
|
|
|
126
125
|
] }
|
|
127
126
|
onChange={ ( val ) => setDir( val ) }
|
|
128
127
|
/>
|
|
129
|
-
<
|
|
128
|
+
<Stack justify="right">
|
|
130
129
|
<Button
|
|
131
130
|
__next40pxDefaultSize
|
|
132
131
|
variant="primary"
|
|
133
132
|
type="submit"
|
|
134
133
|
text={ __( 'Apply' ) }
|
|
135
134
|
/>
|
|
136
|
-
</
|
|
137
|
-
</
|
|
135
|
+
</Stack>
|
|
136
|
+
</Stack>
|
|
138
137
|
</Popover>
|
|
139
138
|
);
|
|
140
139
|
}
|
|
@@ -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,9 +94,8 @@ 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
|
-
__next40pxDefaultSize
|
|
94
99
|
hideLabelFromVision
|
|
95
100
|
label={ __( 'LaTeX math syntax' ) }
|
|
96
101
|
value={ latex }
|
|
@@ -114,7 +119,7 @@ function InlineUI( {
|
|
|
114
119
|
<style children=".wp-block-math__error .components-badge__content{white-space:normal}" />
|
|
115
120
|
</>
|
|
116
121
|
) }
|
|
117
|
-
</
|
|
122
|
+
</Stack>
|
|
118
123
|
</div>
|
|
119
124
|
</Popover>
|
|
120
125
|
);
|
|
@@ -135,23 +140,51 @@ function Edit( {
|
|
|
135
140
|
setLatexToMathML( () => module.default );
|
|
136
141
|
} );
|
|
137
142
|
}, [] );
|
|
143
|
+
|
|
144
|
+
function onClick() {
|
|
145
|
+
let newValue;
|
|
146
|
+
|
|
147
|
+
if ( isObjectActive ) {
|
|
148
|
+
// Revert the active math object to its LaTeX source so clicking
|
|
149
|
+
// the button toggles back to the exact text it was created from.
|
|
150
|
+
// Keep the restored text selected so it can be edited or
|
|
151
|
+
// re-marked right away.
|
|
152
|
+
const latex = activeObjectAttributes?.[ 'data-latex' ] || '';
|
|
153
|
+
newValue = insert( value, latex );
|
|
154
|
+
newValue.start = newValue.end - latex.length;
|
|
155
|
+
} else {
|
|
156
|
+
// If there's a selection, seed the format with it so you can type
|
|
157
|
+
// LaTeX inline and then mark it as math.
|
|
158
|
+
const selectedText = getTextContent( slice( value ) );
|
|
159
|
+
let innerHTML = '';
|
|
160
|
+
if ( selectedText && latexToMathML ) {
|
|
161
|
+
try {
|
|
162
|
+
innerHTML = latexToMathML( selectedText, {
|
|
163
|
+
displayMode: false,
|
|
164
|
+
} );
|
|
165
|
+
} catch {
|
|
166
|
+
// Leave unrendered; the popover opens with the text
|
|
167
|
+
// prefilled so the expression can be corrected.
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
newValue = insertObject( value, {
|
|
171
|
+
type: name,
|
|
172
|
+
attributes: { 'data-latex': selectedText },
|
|
173
|
+
innerHTML,
|
|
174
|
+
} );
|
|
175
|
+
newValue.start = newValue.end - 1;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
onChange( newValue );
|
|
179
|
+
onFocus();
|
|
180
|
+
}
|
|
181
|
+
|
|
138
182
|
return (
|
|
139
183
|
<>
|
|
140
184
|
<RichTextToolbarButton
|
|
141
185
|
icon={ icon }
|
|
142
186
|
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
|
-
} }
|
|
187
|
+
onClick={ onClick }
|
|
155
188
|
isActive={ isObjectActive }
|
|
156
189
|
/>
|
|
157
190
|
{ isObjectActive && (
|