@wordpress/format-library 5.32.1-next.ff1cebbba.0 → 5.33.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 +2 -0
- package/build/default-formats.js +2 -0
- package/build/default-formats.js.map +2 -2
- package/build/math/index.js +181 -0
- package/build/math/index.js.map +7 -0
- package/build-module/default-formats.js +2 -0
- package/build-module/default-formats.js.map +2 -2
- package/build-module/math/index.js +153 -0
- package/build-module/math/index.js.map +7 -0
- package/package.json +15 -14
- package/src/default-formats.js +2 -0
- package/src/math/index.js +166 -0
package/CHANGELOG.md
CHANGED
package/build/default-formats.js
CHANGED
|
@@ -33,6 +33,7 @@ var import_superscript = require("./superscript");
|
|
|
33
33
|
var import_keyboard = require("./keyboard");
|
|
34
34
|
var import_unknown = require("./unknown");
|
|
35
35
|
var import_language = require("./language");
|
|
36
|
+
var import_math = require("./math");
|
|
36
37
|
var import_non_breaking_space = require("./non-breaking-space");
|
|
37
38
|
var default_formats_default = [
|
|
38
39
|
import_bold.bold,
|
|
@@ -48,6 +49,7 @@ var default_formats_default = [
|
|
|
48
49
|
import_keyboard.keyboard,
|
|
49
50
|
import_unknown.unknown,
|
|
50
51
|
import_language.language,
|
|
52
|
+
import_math.math,
|
|
51
53
|
import_non_breaking_space.nonBreakingSpace
|
|
52
54
|
];
|
|
53
55
|
//# sourceMappingURL=default-formats.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/default-formats.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport { bold } from './bold';\nimport { code } from './code';\nimport { image } from './image';\nimport { italic } from './italic';\nimport { link } from './link';\nimport { strikethrough } from './strikethrough';\nimport { underline } from './underline';\nimport { textColor } from './text-color';\nimport { subscript } from './subscript';\nimport { superscript } from './superscript';\nimport { keyboard } from './keyboard';\nimport { unknown } from './unknown';\nimport { language } from './language';\nimport { nonBreakingSpace } from './non-breaking-space';\n\nexport default [\n\tbold,\n\tcode,\n\timage,\n\titalic,\n\tlink,\n\tstrikethrough,\n\tunderline,\n\ttextColor,\n\tsubscript,\n\tsuperscript,\n\tkeyboard,\n\tunknown,\n\tlanguage,\n\tnonBreakingSpace,\n];\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAqB;AACrB,kBAAqB;AACrB,mBAAsB;AACtB,oBAAuB;AACvB,kBAAqB;AACrB,2BAA8B;AAC9B,uBAA0B;AAC1B,wBAA0B;AAC1B,uBAA0B;AAC1B,yBAA4B;AAC5B,sBAAyB;AACzB,qBAAwB;AACxB,sBAAyB;AACzB,gCAAiC;AAEjC,IAAO,0BAAQ;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;",
|
|
4
|
+
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport { bold } from './bold';\nimport { code } from './code';\nimport { image } from './image';\nimport { italic } from './italic';\nimport { link } from './link';\nimport { strikethrough } from './strikethrough';\nimport { underline } from './underline';\nimport { textColor } from './text-color';\nimport { subscript } from './subscript';\nimport { superscript } from './superscript';\nimport { keyboard } from './keyboard';\nimport { unknown } from './unknown';\nimport { language } from './language';\nimport { math } from './math';\nimport { nonBreakingSpace } from './non-breaking-space';\n\nexport default [\n\tbold,\n\tcode,\n\timage,\n\titalic,\n\tlink,\n\tstrikethrough,\n\tunderline,\n\ttextColor,\n\tsubscript,\n\tsuperscript,\n\tkeyboard,\n\tunknown,\n\tlanguage,\n\tmath,\n\tnonBreakingSpace,\n];\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAqB;AACrB,kBAAqB;AACrB,mBAAsB;AACtB,oBAAuB;AACvB,kBAAqB;AACrB,2BAA8B;AAC9B,uBAA0B;AAC1B,wBAA0B;AAC1B,uBAA0B;AAC1B,yBAA4B;AAC5B,sBAAyB;AACzB,qBAAwB;AACxB,sBAAyB;AACzB,kBAAqB;AACrB,gCAAiC;AAEjC,IAAO,0BAAQ;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name2 in all)
|
|
9
|
+
__defProp(target, name2, { get: all[name2], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
+
mod
|
|
26
|
+
));
|
|
27
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
|
+
var math_exports = {};
|
|
29
|
+
__export(math_exports, {
|
|
30
|
+
math: () => math
|
|
31
|
+
});
|
|
32
|
+
module.exports = __toCommonJS(math_exports);
|
|
33
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
34
|
+
var import_i18n = require("@wordpress/i18n");
|
|
35
|
+
var import_element = require("@wordpress/element");
|
|
36
|
+
var import_rich_text = require("@wordpress/rich-text");
|
|
37
|
+
var import_block_editor = require("@wordpress/block-editor");
|
|
38
|
+
var import_components = require("@wordpress/components");
|
|
39
|
+
var import_icons = require("@wordpress/icons");
|
|
40
|
+
var import_lock_unlock = require("../lock-unlock");
|
|
41
|
+
const { Badge } = (0, import_lock_unlock.unlock)(import_components.privateApis);
|
|
42
|
+
const name = "core/math";
|
|
43
|
+
const title = (0, import_i18n.__)("Math");
|
|
44
|
+
function InlineUI({
|
|
45
|
+
value,
|
|
46
|
+
onChange,
|
|
47
|
+
activeAttributes,
|
|
48
|
+
contentRef,
|
|
49
|
+
latexToMathML
|
|
50
|
+
}) {
|
|
51
|
+
const [latex, setLatex] = (0, import_element.useState)(
|
|
52
|
+
activeAttributes?.["data-latex"] || ""
|
|
53
|
+
);
|
|
54
|
+
const [error, setError] = (0, import_element.useState)(null);
|
|
55
|
+
const popoverAnchor = (0, import_rich_text.useAnchor)({
|
|
56
|
+
editableContentElement: contentRef.current,
|
|
57
|
+
settings: math
|
|
58
|
+
});
|
|
59
|
+
const handleLatexChange = (newLatex) => {
|
|
60
|
+
let mathML;
|
|
61
|
+
setLatex(newLatex);
|
|
62
|
+
try {
|
|
63
|
+
mathML = latexToMathML(newLatex, { displayMode: false });
|
|
64
|
+
setError(null);
|
|
65
|
+
} catch (err) {
|
|
66
|
+
setError(err.message);
|
|
67
|
+
return;
|
|
68
|
+
}
|
|
69
|
+
const newReplacements = value.replacements.slice();
|
|
70
|
+
newReplacements[value.start] = {
|
|
71
|
+
type: name,
|
|
72
|
+
attributes: {
|
|
73
|
+
"data-latex": newLatex
|
|
74
|
+
},
|
|
75
|
+
innerHTML: mathML
|
|
76
|
+
};
|
|
77
|
+
onChange({
|
|
78
|
+
...value,
|
|
79
|
+
replacements: newReplacements
|
|
80
|
+
});
|
|
81
|
+
};
|
|
82
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
83
|
+
import_components.Popover,
|
|
84
|
+
{
|
|
85
|
+
placement: "bottom-start",
|
|
86
|
+
offset: 8,
|
|
87
|
+
focusOnMount: false,
|
|
88
|
+
anchor: popoverAnchor,
|
|
89
|
+
className: "block-editor-format-toolbar__math-popover",
|
|
90
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { minWidth: "300px", padding: "4px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 1, children: [
|
|
91
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
92
|
+
import_components.TextControl,
|
|
93
|
+
{
|
|
94
|
+
__nextHasNoMarginBottom: true,
|
|
95
|
+
__next40pxDefaultSize: true,
|
|
96
|
+
hideLabelFromVision: true,
|
|
97
|
+
label: (0, import_i18n.__)("LaTeX math syntax"),
|
|
98
|
+
value: latex,
|
|
99
|
+
onChange: handleLatexChange,
|
|
100
|
+
placeholder: (0, import_i18n.__)("e.g., x^2, \\frac{a}{b}"),
|
|
101
|
+
autoComplete: "off"
|
|
102
|
+
}
|
|
103
|
+
),
|
|
104
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
105
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
106
|
+
Badge,
|
|
107
|
+
{
|
|
108
|
+
intent: "error",
|
|
109
|
+
className: "wp-block-math__error",
|
|
110
|
+
children: error
|
|
111
|
+
}
|
|
112
|
+
),
|
|
113
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: ".wp-block-math__error .components-badge__content{white-space:normal}" })
|
|
114
|
+
] })
|
|
115
|
+
] }) })
|
|
116
|
+
}
|
|
117
|
+
);
|
|
118
|
+
}
|
|
119
|
+
function Edit({
|
|
120
|
+
value,
|
|
121
|
+
onChange,
|
|
122
|
+
onFocus,
|
|
123
|
+
isObjectActive,
|
|
124
|
+
activeObjectAttributes,
|
|
125
|
+
contentRef
|
|
126
|
+
}) {
|
|
127
|
+
const [latexToMathML, setLatexToMathML] = (0, import_element.useState)();
|
|
128
|
+
(0, import_element.useEffect)(() => {
|
|
129
|
+
import("@wordpress/latex-to-mathml").then((module2) => {
|
|
130
|
+
setLatexToMathML(() => module2.default);
|
|
131
|
+
});
|
|
132
|
+
}, []);
|
|
133
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
134
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
135
|
+
import_block_editor.RichTextToolbarButton,
|
|
136
|
+
{
|
|
137
|
+
icon: import_icons.math,
|
|
138
|
+
title,
|
|
139
|
+
onClick: () => {
|
|
140
|
+
const newValue = (0, import_rich_text.insertObject)(value, {
|
|
141
|
+
type: name,
|
|
142
|
+
attributes: {
|
|
143
|
+
"data-latex": ""
|
|
144
|
+
},
|
|
145
|
+
innerHTML: ""
|
|
146
|
+
});
|
|
147
|
+
newValue.start = newValue.end - 1;
|
|
148
|
+
onChange(newValue);
|
|
149
|
+
onFocus();
|
|
150
|
+
},
|
|
151
|
+
isActive: isObjectActive
|
|
152
|
+
}
|
|
153
|
+
),
|
|
154
|
+
isObjectActive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
155
|
+
InlineUI,
|
|
156
|
+
{
|
|
157
|
+
value,
|
|
158
|
+
onChange,
|
|
159
|
+
activeAttributes: activeObjectAttributes,
|
|
160
|
+
contentRef,
|
|
161
|
+
latexToMathML
|
|
162
|
+
}
|
|
163
|
+
)
|
|
164
|
+
] });
|
|
165
|
+
}
|
|
166
|
+
const math = {
|
|
167
|
+
name,
|
|
168
|
+
title,
|
|
169
|
+
tagName: "math",
|
|
170
|
+
className: null,
|
|
171
|
+
attributes: {
|
|
172
|
+
"data-latex": "data-latex"
|
|
173
|
+
},
|
|
174
|
+
contentEditable: false,
|
|
175
|
+
edit: Edit
|
|
176
|
+
};
|
|
177
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
178
|
+
0 && (module.exports = {
|
|
179
|
+
math
|
|
180
|
+
});
|
|
181
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/math/index.js"],
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } 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\t__experimentalVStack as VStack,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { math as icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../lock-unlock';\n\nconst { Badge } = 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\ttry {\n\t\t\tmathML = latexToMathML( newLatex, { displayMode: false } );\n\t\t\tsetError( null );\n\t\t} catch ( err ) {\n\t\t\tsetError( err.message );\n\t\t\treturn;\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<VStack spacing={ 1 }>\n\t\t\t\t\t<TextControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\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/>\n\t\t\t\t\t{ error && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Badge\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{ error }\n\t\t\t\t\t\t\t</Badge>\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</VStack>\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
|
+
"names": ["componentsPrivateApis", "VStack", "module", "icon"]
|
|
7
|
+
}
|
|
@@ -11,6 +11,7 @@ import { superscript } from "./superscript";
|
|
|
11
11
|
import { keyboard } from "./keyboard";
|
|
12
12
|
import { unknown } from "./unknown";
|
|
13
13
|
import { language } from "./language";
|
|
14
|
+
import { math } from "./math";
|
|
14
15
|
import { nonBreakingSpace } from "./non-breaking-space";
|
|
15
16
|
var default_formats_default = [
|
|
16
17
|
bold,
|
|
@@ -26,6 +27,7 @@ var default_formats_default = [
|
|
|
26
27
|
keyboard,
|
|
27
28
|
unknown,
|
|
28
29
|
language,
|
|
30
|
+
math,
|
|
29
31
|
nonBreakingSpace
|
|
30
32
|
];
|
|
31
33
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/default-formats.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport { bold } from './bold';\nimport { code } from './code';\nimport { image } from './image';\nimport { italic } from './italic';\nimport { link } from './link';\nimport { strikethrough } from './strikethrough';\nimport { underline } from './underline';\nimport { textColor } from './text-color';\nimport { subscript } from './subscript';\nimport { superscript } from './superscript';\nimport { keyboard } from './keyboard';\nimport { unknown } from './unknown';\nimport { language } from './language';\nimport { nonBreakingSpace } from './non-breaking-space';\n\nexport default [\n\tbold,\n\tcode,\n\timage,\n\titalic,\n\tlink,\n\tstrikethrough,\n\tunderline,\n\ttextColor,\n\tsubscript,\n\tsuperscript,\n\tkeyboard,\n\tunknown,\n\tlanguage,\n\tnonBreakingSpace,\n];\n"],
|
|
5
|
-
"mappings": "AAGA,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AAEjC,IAAO,0BAAQ;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;",
|
|
4
|
+
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport { bold } from './bold';\nimport { code } from './code';\nimport { image } from './image';\nimport { italic } from './italic';\nimport { link } from './link';\nimport { strikethrough } from './strikethrough';\nimport { underline } from './underline';\nimport { textColor } from './text-color';\nimport { subscript } from './subscript';\nimport { superscript } from './superscript';\nimport { keyboard } from './keyboard';\nimport { unknown } from './unknown';\nimport { language } from './language';\nimport { math } from './math';\nimport { nonBreakingSpace } from './non-breaking-space';\n\nexport default [\n\tbold,\n\tcode,\n\timage,\n\titalic,\n\tlink,\n\tstrikethrough,\n\tunderline,\n\ttextColor,\n\tsubscript,\n\tsuperscript,\n\tkeyboard,\n\tunknown,\n\tlanguage,\n\tmath,\n\tnonBreakingSpace,\n];\n"],
|
|
5
|
+
"mappings": "AAGA,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,wBAAwB;AAEjC,IAAO,0BAAQ;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { __ } from "@wordpress/i18n";
|
|
3
|
+
import { useState, useEffect } from "@wordpress/element";
|
|
4
|
+
import { insertObject, useAnchor } from "@wordpress/rich-text";
|
|
5
|
+
import { RichTextToolbarButton } from "@wordpress/block-editor";
|
|
6
|
+
import {
|
|
7
|
+
Popover,
|
|
8
|
+
TextControl,
|
|
9
|
+
__experimentalVStack as VStack,
|
|
10
|
+
privateApis as componentsPrivateApis
|
|
11
|
+
} from "@wordpress/components";
|
|
12
|
+
import { math as icon } from "@wordpress/icons";
|
|
13
|
+
import { unlock } from "../lock-unlock";
|
|
14
|
+
const { Badge } = unlock(componentsPrivateApis);
|
|
15
|
+
const name = "core/math";
|
|
16
|
+
const title = __("Math");
|
|
17
|
+
function InlineUI({
|
|
18
|
+
value,
|
|
19
|
+
onChange,
|
|
20
|
+
activeAttributes,
|
|
21
|
+
contentRef,
|
|
22
|
+
latexToMathML
|
|
23
|
+
}) {
|
|
24
|
+
const [latex, setLatex] = useState(
|
|
25
|
+
activeAttributes?.["data-latex"] || ""
|
|
26
|
+
);
|
|
27
|
+
const [error, setError] = useState(null);
|
|
28
|
+
const popoverAnchor = useAnchor({
|
|
29
|
+
editableContentElement: contentRef.current,
|
|
30
|
+
settings: math
|
|
31
|
+
});
|
|
32
|
+
const handleLatexChange = (newLatex) => {
|
|
33
|
+
let mathML;
|
|
34
|
+
setLatex(newLatex);
|
|
35
|
+
try {
|
|
36
|
+
mathML = latexToMathML(newLatex, { displayMode: false });
|
|
37
|
+
setError(null);
|
|
38
|
+
} catch (err) {
|
|
39
|
+
setError(err.message);
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
const newReplacements = value.replacements.slice();
|
|
43
|
+
newReplacements[value.start] = {
|
|
44
|
+
type: name,
|
|
45
|
+
attributes: {
|
|
46
|
+
"data-latex": newLatex
|
|
47
|
+
},
|
|
48
|
+
innerHTML: mathML
|
|
49
|
+
};
|
|
50
|
+
onChange({
|
|
51
|
+
...value,
|
|
52
|
+
replacements: newReplacements
|
|
53
|
+
});
|
|
54
|
+
};
|
|
55
|
+
return /* @__PURE__ */ jsx(
|
|
56
|
+
Popover,
|
|
57
|
+
{
|
|
58
|
+
placement: "bottom-start",
|
|
59
|
+
offset: 8,
|
|
60
|
+
focusOnMount: false,
|
|
61
|
+
anchor: popoverAnchor,
|
|
62
|
+
className: "block-editor-format-toolbar__math-popover",
|
|
63
|
+
children: /* @__PURE__ */ jsx("div", { style: { minWidth: "300px", padding: "4px" }, children: /* @__PURE__ */ jsxs(VStack, { spacing: 1, children: [
|
|
64
|
+
/* @__PURE__ */ jsx(
|
|
65
|
+
TextControl,
|
|
66
|
+
{
|
|
67
|
+
__nextHasNoMarginBottom: true,
|
|
68
|
+
__next40pxDefaultSize: true,
|
|
69
|
+
hideLabelFromVision: true,
|
|
70
|
+
label: __("LaTeX math syntax"),
|
|
71
|
+
value: latex,
|
|
72
|
+
onChange: handleLatexChange,
|
|
73
|
+
placeholder: __("e.g., x^2, \\frac{a}{b}"),
|
|
74
|
+
autoComplete: "off"
|
|
75
|
+
}
|
|
76
|
+
),
|
|
77
|
+
error && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
78
|
+
/* @__PURE__ */ jsx(
|
|
79
|
+
Badge,
|
|
80
|
+
{
|
|
81
|
+
intent: "error",
|
|
82
|
+
className: "wp-block-math__error",
|
|
83
|
+
children: error
|
|
84
|
+
}
|
|
85
|
+
),
|
|
86
|
+
/* @__PURE__ */ jsx("style", { children: ".wp-block-math__error .components-badge__content{white-space:normal}" })
|
|
87
|
+
] })
|
|
88
|
+
] }) })
|
|
89
|
+
}
|
|
90
|
+
);
|
|
91
|
+
}
|
|
92
|
+
function Edit({
|
|
93
|
+
value,
|
|
94
|
+
onChange,
|
|
95
|
+
onFocus,
|
|
96
|
+
isObjectActive,
|
|
97
|
+
activeObjectAttributes,
|
|
98
|
+
contentRef
|
|
99
|
+
}) {
|
|
100
|
+
const [latexToMathML, setLatexToMathML] = useState();
|
|
101
|
+
useEffect(() => {
|
|
102
|
+
import("@wordpress/latex-to-mathml").then((module) => {
|
|
103
|
+
setLatexToMathML(() => module.default);
|
|
104
|
+
});
|
|
105
|
+
}, []);
|
|
106
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
107
|
+
/* @__PURE__ */ jsx(
|
|
108
|
+
RichTextToolbarButton,
|
|
109
|
+
{
|
|
110
|
+
icon,
|
|
111
|
+
title,
|
|
112
|
+
onClick: () => {
|
|
113
|
+
const newValue = insertObject(value, {
|
|
114
|
+
type: name,
|
|
115
|
+
attributes: {
|
|
116
|
+
"data-latex": ""
|
|
117
|
+
},
|
|
118
|
+
innerHTML: ""
|
|
119
|
+
});
|
|
120
|
+
newValue.start = newValue.end - 1;
|
|
121
|
+
onChange(newValue);
|
|
122
|
+
onFocus();
|
|
123
|
+
},
|
|
124
|
+
isActive: isObjectActive
|
|
125
|
+
}
|
|
126
|
+
),
|
|
127
|
+
isObjectActive && /* @__PURE__ */ jsx(
|
|
128
|
+
InlineUI,
|
|
129
|
+
{
|
|
130
|
+
value,
|
|
131
|
+
onChange,
|
|
132
|
+
activeAttributes: activeObjectAttributes,
|
|
133
|
+
contentRef,
|
|
134
|
+
latexToMathML
|
|
135
|
+
}
|
|
136
|
+
)
|
|
137
|
+
] });
|
|
138
|
+
}
|
|
139
|
+
const math = {
|
|
140
|
+
name,
|
|
141
|
+
title,
|
|
142
|
+
tagName: "math",
|
|
143
|
+
className: null,
|
|
144
|
+
attributes: {
|
|
145
|
+
"data-latex": "data-latex"
|
|
146
|
+
},
|
|
147
|
+
contentEditable: false,
|
|
148
|
+
edit: Edit
|
|
149
|
+
};
|
|
150
|
+
export {
|
|
151
|
+
math
|
|
152
|
+
};
|
|
153
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/math/index.js"],
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } 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\t__experimentalVStack as VStack,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { math as icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../lock-unlock';\n\nconst { Badge } = 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\ttry {\n\t\t\tmathML = latexToMathML( newLatex, { displayMode: false } );\n\t\t\tsetError( null );\n\t\t} catch ( err ) {\n\t\t\tsetError( err.message );\n\t\t\treturn;\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<VStack spacing={ 1 }>\n\t\t\t\t\t<TextControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\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/>\n\t\t\t\t\t{ error && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Badge\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{ error }\n\t\t\t\t\t\t\t</Badge>\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</VStack>\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
|
+
"names": []
|
|
7
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/format-library",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.33.0",
|
|
4
4
|
"description": "Format library for the WordPress editor.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -34,18 +34,19 @@
|
|
|
34
34
|
"react-native": "src/index",
|
|
35
35
|
"wpScript": true,
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@wordpress/a11y": "^4.
|
|
38
|
-
"@wordpress/block-editor": "^15.
|
|
39
|
-
"@wordpress/components": "^30.6.
|
|
40
|
-
"@wordpress/compose": "^7.
|
|
41
|
-
"@wordpress/data": "^10.
|
|
42
|
-
"@wordpress/element": "^6.
|
|
43
|
-
"@wordpress/html-entities": "^4.
|
|
44
|
-
"@wordpress/i18n": "^6.
|
|
45
|
-
"@wordpress/icons": "^11.0.
|
|
46
|
-
"@wordpress/
|
|
47
|
-
"@wordpress/
|
|
48
|
-
"@wordpress/
|
|
37
|
+
"@wordpress/a11y": "^4.33.0",
|
|
38
|
+
"@wordpress/block-editor": "^15.6.0",
|
|
39
|
+
"@wordpress/components": "^30.6.0",
|
|
40
|
+
"@wordpress/compose": "^7.33.0",
|
|
41
|
+
"@wordpress/data": "^10.33.0",
|
|
42
|
+
"@wordpress/element": "^6.33.0",
|
|
43
|
+
"@wordpress/html-entities": "^4.33.0",
|
|
44
|
+
"@wordpress/i18n": "^6.6.0",
|
|
45
|
+
"@wordpress/icons": "^11.0.0",
|
|
46
|
+
"@wordpress/latex-to-mathml": "^1.1.0",
|
|
47
|
+
"@wordpress/private-apis": "^1.33.0",
|
|
48
|
+
"@wordpress/rich-text": "^7.33.0",
|
|
49
|
+
"@wordpress/url": "^4.33.0"
|
|
49
50
|
},
|
|
50
51
|
"peerDependencies": {
|
|
51
52
|
"react": "^18.0.0",
|
|
@@ -54,5 +55,5 @@
|
|
|
54
55
|
"publishConfig": {
|
|
55
56
|
"access": "public"
|
|
56
57
|
},
|
|
57
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "2bbe0d34ab65458468758c48826296d7a753428b"
|
|
58
59
|
}
|
package/src/default-formats.js
CHANGED
|
@@ -14,6 +14,7 @@ import { superscript } from './superscript';
|
|
|
14
14
|
import { keyboard } from './keyboard';
|
|
15
15
|
import { unknown } from './unknown';
|
|
16
16
|
import { language } from './language';
|
|
17
|
+
import { math } from './math';
|
|
17
18
|
import { nonBreakingSpace } from './non-breaking-space';
|
|
18
19
|
|
|
19
20
|
export default [
|
|
@@ -30,5 +31,6 @@ export default [
|
|
|
30
31
|
keyboard,
|
|
31
32
|
unknown,
|
|
32
33
|
language,
|
|
34
|
+
math,
|
|
33
35
|
nonBreakingSpace,
|
|
34
36
|
];
|
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* WordPress dependencies
|
|
3
|
+
*/
|
|
4
|
+
import { __ } from '@wordpress/i18n';
|
|
5
|
+
import { useState, useEffect } from '@wordpress/element';
|
|
6
|
+
import { insertObject, useAnchor } from '@wordpress/rich-text';
|
|
7
|
+
import { RichTextToolbarButton } from '@wordpress/block-editor';
|
|
8
|
+
import {
|
|
9
|
+
Popover,
|
|
10
|
+
TextControl,
|
|
11
|
+
__experimentalVStack as VStack,
|
|
12
|
+
privateApis as componentsPrivateApis,
|
|
13
|
+
} from '@wordpress/components';
|
|
14
|
+
import { math as icon } from '@wordpress/icons';
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* Internal dependencies
|
|
18
|
+
*/
|
|
19
|
+
import { unlock } from '../lock-unlock';
|
|
20
|
+
|
|
21
|
+
const { Badge } = unlock( componentsPrivateApis );
|
|
22
|
+
|
|
23
|
+
const name = 'core/math';
|
|
24
|
+
const title = __( 'Math' );
|
|
25
|
+
|
|
26
|
+
function InlineUI( {
|
|
27
|
+
value,
|
|
28
|
+
onChange,
|
|
29
|
+
activeAttributes,
|
|
30
|
+
contentRef,
|
|
31
|
+
latexToMathML,
|
|
32
|
+
} ) {
|
|
33
|
+
const [ latex, setLatex ] = useState(
|
|
34
|
+
activeAttributes?.[ 'data-latex' ] || ''
|
|
35
|
+
);
|
|
36
|
+
const [ error, setError ] = useState( null );
|
|
37
|
+
|
|
38
|
+
const popoverAnchor = useAnchor( {
|
|
39
|
+
editableContentElement: contentRef.current,
|
|
40
|
+
settings: math,
|
|
41
|
+
} );
|
|
42
|
+
|
|
43
|
+
// Update the math object in real-time as the user types
|
|
44
|
+
const handleLatexChange = ( newLatex ) => {
|
|
45
|
+
let mathML;
|
|
46
|
+
|
|
47
|
+
setLatex( newLatex );
|
|
48
|
+
|
|
49
|
+
try {
|
|
50
|
+
mathML = latexToMathML( newLatex, { displayMode: false } );
|
|
51
|
+
setError( null );
|
|
52
|
+
} catch ( err ) {
|
|
53
|
+
setError( err.message );
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
const newReplacements = value.replacements.slice();
|
|
58
|
+
newReplacements[ value.start ] = {
|
|
59
|
+
type: name,
|
|
60
|
+
attributes: {
|
|
61
|
+
'data-latex': newLatex,
|
|
62
|
+
},
|
|
63
|
+
innerHTML: mathML,
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
onChange( {
|
|
67
|
+
...value,
|
|
68
|
+
replacements: newReplacements,
|
|
69
|
+
} );
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
return (
|
|
73
|
+
<Popover
|
|
74
|
+
placement="bottom-start"
|
|
75
|
+
offset={ 8 }
|
|
76
|
+
focusOnMount={ false }
|
|
77
|
+
anchor={ popoverAnchor }
|
|
78
|
+
className="block-editor-format-toolbar__math-popover"
|
|
79
|
+
>
|
|
80
|
+
<div style={ { minWidth: '300px', padding: '4px' } }>
|
|
81
|
+
<VStack spacing={ 1 }>
|
|
82
|
+
<TextControl
|
|
83
|
+
__nextHasNoMarginBottom
|
|
84
|
+
__next40pxDefaultSize
|
|
85
|
+
hideLabelFromVision
|
|
86
|
+
label={ __( 'LaTeX math syntax' ) }
|
|
87
|
+
value={ latex }
|
|
88
|
+
onChange={ handleLatexChange }
|
|
89
|
+
placeholder={ __( 'e.g., x^2, \\frac{a}{b}' ) }
|
|
90
|
+
autoComplete="off"
|
|
91
|
+
/>
|
|
92
|
+
{ error && (
|
|
93
|
+
<>
|
|
94
|
+
<Badge
|
|
95
|
+
intent="error"
|
|
96
|
+
className="wp-block-math__error"
|
|
97
|
+
>
|
|
98
|
+
{ error }
|
|
99
|
+
</Badge>
|
|
100
|
+
<style children=".wp-block-math__error .components-badge__content{white-space:normal}" />
|
|
101
|
+
</>
|
|
102
|
+
) }
|
|
103
|
+
</VStack>
|
|
104
|
+
</div>
|
|
105
|
+
</Popover>
|
|
106
|
+
);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
function Edit( {
|
|
110
|
+
value,
|
|
111
|
+
onChange,
|
|
112
|
+
onFocus,
|
|
113
|
+
isObjectActive,
|
|
114
|
+
activeObjectAttributes,
|
|
115
|
+
contentRef,
|
|
116
|
+
} ) {
|
|
117
|
+
const [ latexToMathML, setLatexToMathML ] = useState();
|
|
118
|
+
|
|
119
|
+
useEffect( () => {
|
|
120
|
+
import( '@wordpress/latex-to-mathml' ).then( ( module ) => {
|
|
121
|
+
setLatexToMathML( () => module.default );
|
|
122
|
+
} );
|
|
123
|
+
}, [] );
|
|
124
|
+
return (
|
|
125
|
+
<>
|
|
126
|
+
<RichTextToolbarButton
|
|
127
|
+
icon={ icon }
|
|
128
|
+
title={ title }
|
|
129
|
+
onClick={ () => {
|
|
130
|
+
const newValue = insertObject( value, {
|
|
131
|
+
type: name,
|
|
132
|
+
attributes: {
|
|
133
|
+
'data-latex': '',
|
|
134
|
+
},
|
|
135
|
+
innerHTML: '',
|
|
136
|
+
} );
|
|
137
|
+
newValue.start = newValue.end - 1;
|
|
138
|
+
onChange( newValue );
|
|
139
|
+
onFocus();
|
|
140
|
+
} }
|
|
141
|
+
isActive={ isObjectActive }
|
|
142
|
+
/>
|
|
143
|
+
{ isObjectActive && (
|
|
144
|
+
<InlineUI
|
|
145
|
+
value={ value }
|
|
146
|
+
onChange={ onChange }
|
|
147
|
+
activeAttributes={ activeObjectAttributes }
|
|
148
|
+
contentRef={ contentRef }
|
|
149
|
+
latexToMathML={ latexToMathML }
|
|
150
|
+
/>
|
|
151
|
+
) }
|
|
152
|
+
</>
|
|
153
|
+
);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
export const math = {
|
|
157
|
+
name,
|
|
158
|
+
title,
|
|
159
|
+
tagName: 'math',
|
|
160
|
+
className: null,
|
|
161
|
+
attributes: {
|
|
162
|
+
'data-latex': 'data-latex',
|
|
163
|
+
},
|
|
164
|
+
contentEditable: false,
|
|
165
|
+
edit: Edit,
|
|
166
|
+
};
|