UNPKG

@wordpress/block-library

Version:
8 lines (7 loc) • 7.14 kB
{ "version": 3, "sources": ["../../src/math/edit.jsx"], "sourcesContent": ["import { __ } from '@wordpress/i18n';\nimport {\n\tuseBlockProps,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { Popover } from '@wordpress/components';\nimport { ValidatedTextareaControl, Link } from '@wordpress/ui';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { useDispatch } from '@wordpress/data';\nimport { useEvent } from '@wordpress/compose';\n\nexport default function MathEdit( { attributes, setAttributes, isSelected } ) {\n\tconst { latex, mathML } = attributes;\n\tconst [ blockRef, setBlockRef ] = useState();\n\tconst [ error, setError ] = useState( null );\n\tconst [ latexToMathML, setLatexToMathML ] = useState();\n\tconst formRef = useRef();\n\tconst { __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\n\t// Re-render once the converter loads, so MathML saved from a corrupted\n\t// source is repaired and a source typed before the converter loaded is\n\t// rendered. The converter loads asynchronously, and the user can type in\n\t// the meantime, so read the source at that time rather than on mount.\n\tconst renderLatest = useEvent( ( convert ) => {\n\t\tif ( ! latex ) {\n\t\t\treturn;\n\t\t}\n\t\ttry {\n\t\t\tconst newMathML = convert( latex, { displayMode: true } );\n\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\tsetAttributes( { mathML: newMathML } );\n\t\t} catch ( err ) {\n\t\t\tsetError( err.message );\n\t\t}\n\t} );\n\n\tuseEffect( () => {\n\t\timport( '@wordpress/latex-to-mathml' ).then( ( module ) => {\n\t\t\tsetLatexToMathML( () => module.default );\n\t\t\trenderLatest( module.default );\n\t\t} );\n\t}, [ renderLatest ] );\n\n\tconst blockProps = useBlockProps( {\n\t\tref: setBlockRef,\n\t\tposition: 'relative',\n\t} );\n\n\treturn (\n\t\t<div { ...blockProps }>\n\t\t\t{ mathML ? (\n\t\t\t\t<math\n\t\t\t\t\t// We can't spread block props on the math element because\n\t\t\t\t\t// it only supports a limited amount of global attributes.\n\t\t\t\t\t// For example, draggable will have no effect.\n\t\t\t\t\tdisplay=\"block\"\n\t\t\t\t\tdangerouslySetInnerHTML={ { __html: mathML } }\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t// Show the source until it renders, as the front end does.\n\t\t\t\t<math display=\"block\">\n\t\t\t\t\t<semantics>\n\t\t\t\t\t\t{ /* eslint-disable-next-line react/no-unknown-property -- MathML attribute. */ }\n\t\t\t\t\t\t<annotation encoding=\"application/x-tex\">\n\t\t\t\t\t\t\t{ latex || '\\u200B' }\n\t\t\t\t\t\t</annotation>\n\t\t\t\t\t</semantics>\n\t\t\t\t</math>\n\t\t\t) }\n\t\t\t{ isSelected && (\n\t\t\t\t<Popover\n\t\t\t\t\tplacement=\"bottom-start\"\n\t\t\t\t\toffset={ 8 }\n\t\t\t\t\tanchor={ blockRef }\n\t\t\t\t\tfocusOnMount={ false }\n\t\t\t\t\t// Surface any parsing error before focus leaves the block.\n\t\t\t\t\t// An invalid field is refocused, keeping the popover open.\n\t\t\t\t\tonFocusOutside={ () => formRef.current?.reportValidity() }\n\t\t\t\t\t__unstableSlotName=\"__unstable-block-tools-after\"\n\t\t\t\t>\n\t\t\t\t\t<form\n\t\t\t\t\t\tref={ formRef }\n\t\t\t\t\t\tstyle={ { padding: '16px', minWidth: '300px' } }\n\t\t\t\t\t\tonSubmit={ ( event ) => event.preventDefault() }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ValidatedTextareaControl\n\t\t\t\t\t\t\tlabel={ __( 'LaTeX math syntax' ) }\n\t\t\t\t\t\t\tvalue={ latex ?? '' }\n\t\t\t\t\t\t\tclassName=\"wp-block-math__textarea-control\"\n\t\t\t\t\t\t\tcustomValidity={\n\t\t\t\t\t\t\t\terror\n\t\t\t\t\t\t\t\t\t? { type: 'invalid', message: error }\n\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonValueChange={ ( newLatex ) => {\n\t\t\t\t\t\t\t\tif ( ! latexToMathML ) {\n\t\t\t\t\t\t\t\t\t// The source is read back from the MathML,\n\t\t\t\t\t\t\t\t\t// so clear a stale render along with it.\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\tlatex: newLatex,\n\t\t\t\t\t\t\t\t\t\tmathML: '',\n\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tlet newMathML = '';\n\t\t\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\t\t\tnewMathML = latexToMathML( newLatex, {\n\t\t\t\t\t\t\t\t\t\tdisplayMode: true,\n\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\tsetError( null );\n\t\t\t\t\t\t\t\t} catch ( err ) {\n\t\t\t\t\t\t\t\t\tsetError( err.message );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tmathML: newMathML,\n\t\t\t\t\t\t\t\t\tlatex: newLatex,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tplaceholder={ __(\n\t\t\t\t\t\t\t\t'e.g., x^2, \\\\frac{a}{b}, \\\\sqrt{x}'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\topenInNewTab\n\t\t\t\t\t\t\tclassName=\"wp-block-math__learn-more\"\n\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t'https://wordpress.org/documentation/article/math-block/'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Learn more about LaTeX syntax' ) }\n\t\t\t\t\t\t</Link>\n\t\t\t\t\t</form>\n\t\t\t\t</Popover>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"], "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAmB;AACnB,0BAGO;AACP,wBAAwB;AACxB,gBAA+C;AAC/C,qBAA4C;AAC5C,kBAA4B;AAC5B,qBAAyB;AA2CrB;AAzCW,SAAR,SAA2B,EAAE,YAAY,eAAe,WAAW,GAAI;AAC7E,QAAM,EAAE,OAAO,OAAO,IAAI;AAC1B,QAAM,CAAE,UAAU,WAAY,QAAI,yBAAS;AAC3C,QAAM,CAAE,OAAO,QAAS,QAAI,yBAAU,IAAK;AAC3C,QAAM,CAAE,eAAe,gBAAiB,QAAI,yBAAS;AACrD,QAAM,cAAU,uBAAO;AACvB,QAAM,EAAE,wCAAwC,QAC/C,yBAAa,oBAAAA,KAAiB;AAM/B,QAAM,mBAAe,yBAAU,CAAE,YAAa;AAC7C,QAAK,CAAE,OAAQ;AACd;AAAA,IACD;AACA,QAAI;AACH,YAAM,YAAY,QAAS,OAAO,EAAE,aAAa,KAAK,CAAE;AACxD,8CAAwC;AACxC,oBAAe,EAAE,QAAQ,UAAU,CAAE;AAAA,IACtC,SAAU,KAAM;AACf,eAAU,IAAI,OAAQ;AAAA,IACvB;AAAA,EACD,CAAE;AAEF,gCAAW,MAAM;AAChB,WAAQ,4BAA6B,EAAE,KAAM,CAAEC,YAAY;AAC1D,uBAAkB,MAAMA,QAAO,OAAQ;AACvC,mBAAcA,QAAO,OAAQ;AAAA,IAC9B,CAAE;AAAA,EACH,GAAG,CAAE,YAAa,CAAE;AAEpB,QAAM,iBAAa,mCAAe;AAAA,IACjC,KAAK;AAAA,IACL,UAAU;AAAA,EACX,CAAE;AAEF,SACC,6CAAC,SAAM,GAAG,YACP;AAAA,aACD;AAAA,MAAC;AAAA;AAAA,QAIA,SAAQ;AAAA,QACR,yBAA0B,EAAE,QAAQ,OAAO;AAAA;AAAA,IAC5C;AAAA;AAAA,MAGA,4CAAC,UAAK,SAAQ,SACb,sDAAC,eAEA,sDAAC,gBAAW,UAAS,qBAClB,mBAAS,KACZ,GACD,GACD;AAAA;AAAA,IAEC,cACD;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,QAAS;AAAA,QACT,QAAS;AAAA,QACT,cAAe;AAAA,QAGf,gBAAiB,MAAM,QAAQ,SAAS,eAAe;AAAA,QACvD,oBAAmB;AAAA,QAEnB;AAAA,UAAC;AAAA;AAAA,YACA,KAAM;AAAA,YACN,OAAQ,EAAE,SAAS,QAAQ,UAAU,QAAQ;AAAA,YAC7C,UAAW,CAAE,UAAW,MAAM,eAAe;AAAA,YAE7C;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACA,WAAQ,gBAAI,mBAAoB;AAAA,kBAChC,OAAQ,SAAS;AAAA,kBACjB,WAAU;AAAA,kBACV,gBACC,QACG,EAAE,MAAM,WAAW,SAAS,MAAM,IAClC;AAAA,kBAEJ,eAAgB,CAAE,aAAc;AAC/B,wBAAK,CAAE,eAAgB;AAGtB,oCAAe;AAAA,wBACd,OAAO;AAAA,wBACP,QAAQ;AAAA,sBACT,CAAE;AACF;AAAA,oBACD;AACA,wBAAI,YAAY;AAChB,wBAAI;AACH,kCAAY,cAAe,UAAU;AAAA,wBACpC,aAAa;AAAA,sBACd,CAAE;AACF,+BAAU,IAAK;AAAA,oBAChB,SAAU,KAAM;AACf,+BAAU,IAAI,OAAQ;AAAA,oBACvB;AACA,kCAAe;AAAA,sBACd,QAAQ;AAAA,sBACR,OAAO;AAAA,oBACR,CAAE;AAAA,kBACH;AAAA,kBACA,iBAAc;AAAA,oBACb;AAAA,kBACD;AAAA;AAAA,cACD;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACA,cAAY;AAAA,kBACZ,WAAU;AAAA,kBACV,UAAO;AAAA,oBACN;AAAA,kBACD;AAAA,kBAEE,8BAAI,+BAAgC;AAAA;AAAA,cACvC;AAAA;AAAA;AAAA,QACD;AAAA;AAAA,IACD;AAAA,KAEF;AAEF;", "names": ["blockEditorStore", "module"] }