@wordpress/format-library 5.32.1-next.ff1cebbba.0 → 5.33.1-next.36001005c.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.
Files changed (12) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/build/default-formats.js +2 -0
  3. package/build/default-formats.js.map +2 -2
  4. package/build/math/index.js +181 -0
  5. package/build/math/index.js.map +7 -0
  6. package/build-module/default-formats.js +2 -0
  7. package/build-module/default-formats.js.map +2 -2
  8. package/build-module/math/index.js +153 -0
  9. package/build-module/math/index.js.map +7 -0
  10. package/package.json +15 -14
  11. package/src/default-formats.js +2 -0
  12. package/src/math/index.js +166 -0
package/CHANGELOG.md CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  ## Unreleased
4
4
 
5
+ ## 5.33.0 (2025-10-17)
6
+
5
7
  ## 5.32.0 (2025-10-01)
6
8
 
7
9
  ## 5.31.0 (2025-09-17)
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
package/build/default-formats.js.map CHANGED
@@ -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
  }
package/build/math/index.js ADDED
@@ -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
package/build/math/index.js.map ADDED
@@ -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
+ }
package/build-module/default-formats.js CHANGED
@@ -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 {
package/build-module/default-formats.js.map CHANGED
@@ -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
  }
package/build-module/math/index.js ADDED
@@ -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
package/build-module/math/index.js.map ADDED
@@ -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.32.1-next.ff1cebbba.0",
3
+ "version": "5.33.1-next.36001005c.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.32.1-next.ff1cebbba.0",
38
- "@wordpress/block-editor": "^15.5.1-next.ff1cebbba.0",
39
- "@wordpress/components": "^30.6.1-next.ff1cebbba.0",
40
- "@wordpress/compose": "^7.32.1-next.ff1cebbba.0",
41
- "@wordpress/data": "^10.32.1-next.ff1cebbba.0",
42
- "@wordpress/element": "^6.32.1-next.ff1cebbba.0",
43
- "@wordpress/html-entities": "^4.32.1-next.ff1cebbba.0",
44
- "@wordpress/i18n": "^6.5.1-next.ff1cebbba.0",
45
- "@wordpress/icons": "^11.0.1-next.ff1cebbba.0",
46
- "@wordpress/private-apis": "^1.32.1-next.ff1cebbba.0",
47
- "@wordpress/rich-text": "^7.32.1-next.ff1cebbba.0",
48
- "@wordpress/url": "^4.32.1-next.ff1cebbba.0"
37
+ "@wordpress/a11y": "^4.33.1-next.36001005c.0",
38
+ "@wordpress/block-editor": "^15.6.1-next.36001005c.0",
39
+ "@wordpress/components": "^30.7.1-next.36001005c.0",
40
+ "@wordpress/compose": "^7.33.1-next.36001005c.0",
41
+ "@wordpress/data": "^10.33.1-next.36001005c.0",
42
+ "@wordpress/element": "^6.33.1-next.36001005c.0",
43
+ "@wordpress/html-entities": "^4.33.1-next.36001005c.0",
44
+ "@wordpress/i18n": "^6.6.1-next.36001005c.0",
45
+ "@wordpress/icons": "^11.0.1-next.36001005c.0",
46
+ "@wordpress/latex-to-mathml": "^1.1.1-next.36001005c.0",
47
+ "@wordpress/private-apis": "^1.33.1-next.36001005c.0",
48
+ "@wordpress/rich-text": "^7.33.1-next.36001005c.0",
49
+ "@wordpress/url": "^4.33.1-next.36001005c.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": "c5b659710aff01d40d2eb97b211eb2cec9c07d3b"
58
+ "gitHead": "b73a8a22e779c59efb8f911e32b681652f237d60"
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
  ];
package/src/math/index.js ADDED
@@ -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
+ };