@wordpress/format-library 5.33.4 → 5.33.6
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/build/math/index.js
CHANGED
|
@@ -57,14 +57,16 @@ function InlineUI({
|
|
|
57
57
|
settings: math
|
|
58
58
|
});
|
|
59
59
|
const handleLatexChange = (newLatex) => {
|
|
60
|
-
let mathML;
|
|
60
|
+
let mathML = "";
|
|
61
61
|
setLatex(newLatex);
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
62
|
+
if (newLatex) {
|
|
63
|
+
try {
|
|
64
|
+
mathML = latexToMathML(newLatex, { displayMode: false });
|
|
65
|
+
setError(null);
|
|
66
|
+
} catch (err) {
|
|
67
|
+
setError(err.message);
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
68
70
|
}
|
|
69
71
|
const newReplacements = value.replacements.slice();
|
|
70
72
|
newReplacements[value.start] = {
|
package/build/math/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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\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<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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
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\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\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<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\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<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
6
|
"names": ["componentsPrivateApis", "VStack", "module", "icon"]
|
|
7
7
|
}
|
|
@@ -30,14 +30,16 @@ function InlineUI({
|
|
|
30
30
|
settings: math
|
|
31
31
|
});
|
|
32
32
|
const handleLatexChange = (newLatex) => {
|
|
33
|
-
let mathML;
|
|
33
|
+
let mathML = "";
|
|
34
34
|
setLatex(newLatex);
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
35
|
+
if (newLatex) {
|
|
36
|
+
try {
|
|
37
|
+
mathML = latexToMathML(newLatex, { displayMode: false });
|
|
38
|
+
setError(null);
|
|
39
|
+
} catch (err) {
|
|
40
|
+
setError(err.message);
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
41
43
|
}
|
|
42
44
|
const newReplacements = value.replacements.slice();
|
|
43
45
|
newReplacements[value.start] = {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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\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<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": "
|
|
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\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\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<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\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<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
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/format-library",
|
|
3
|
-
"version": "5.33.
|
|
3
|
+
"version": "5.33.6",
|
|
4
4
|
"description": "Format library for the WordPress editor.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -35,17 +35,17 @@
|
|
|
35
35
|
"wpScript": true,
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@wordpress/a11y": "^4.33.1",
|
|
38
|
-
"@wordpress/block-editor": "^15.6.
|
|
39
|
-
"@wordpress/components": "^30.6.
|
|
38
|
+
"@wordpress/block-editor": "^15.6.6",
|
|
39
|
+
"@wordpress/components": "^30.6.4",
|
|
40
40
|
"@wordpress/compose": "^7.33.1",
|
|
41
41
|
"@wordpress/data": "^10.33.1",
|
|
42
42
|
"@wordpress/element": "^6.33.1",
|
|
43
43
|
"@wordpress/html-entities": "^4.33.1",
|
|
44
44
|
"@wordpress/i18n": "^6.6.1",
|
|
45
45
|
"@wordpress/icons": "^11.0.1",
|
|
46
|
-
"@wordpress/latex-to-mathml": "^1.1.
|
|
46
|
+
"@wordpress/latex-to-mathml": "^1.1.2",
|
|
47
47
|
"@wordpress/private-apis": "^1.33.1",
|
|
48
|
-
"@wordpress/rich-text": "^7.33.
|
|
48
|
+
"@wordpress/rich-text": "^7.33.2",
|
|
49
49
|
"@wordpress/url": "^4.33.1"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"publishConfig": {
|
|
56
56
|
"access": "public"
|
|
57
57
|
},
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "e821b2ec0a90d60aa7cafc248ba049f13b4265b7"
|
|
59
59
|
}
|
package/src/math/index.js
CHANGED
|
@@ -42,16 +42,18 @@ function InlineUI( {
|
|
|
42
42
|
|
|
43
43
|
// Update the math object in real-time as the user types
|
|
44
44
|
const handleLatexChange = ( newLatex ) => {
|
|
45
|
-
let mathML;
|
|
45
|
+
let mathML = '';
|
|
46
46
|
|
|
47
47
|
setLatex( newLatex );
|
|
48
48
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
49
|
+
if ( newLatex ) {
|
|
50
|
+
try {
|
|
51
|
+
mathML = latexToMathML( newLatex, { displayMode: false } );
|
|
52
|
+
setError( null );
|
|
53
|
+
} catch ( err ) {
|
|
54
|
+
setError( err.message );
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
55
57
|
}
|
|
56
58
|
|
|
57
59
|
const newReplacements = value.replacements.slice();
|