# Mathfield Demo import { useEffect } from 'react'; import ErrorBoundary from '@site/src/components/ErrorBoundary'; export function MathfieldDemo({children}) { const INDENT = ' '; /** * Convert a basic type or an object into a HTML string */ function asString( depth, value, options = {} ){ options.quote ??= '"'; options.ancestors ??= []; // // BOOLEAN // if (typeof value === 'boolean') { return { text: `${escapeHTML(String(value))}`, itemCount: 1, lineCount: 1, }; } // // NUMBER // if (typeof value === 'number') { return { text: `${escapeHTML(String(value))}`, itemCount: 1, lineCount: 1, }; } // // STRING // if (typeof value === 'string') { if (options.quote.length === 0) { return { text: escapeHTML(value), itemCount: 1, lineCount: value.split(/\r\n|\r|\n/).length, }; } return { text: `${escapeHTML( options.quote + value + options.quote )}`, itemCount: 1, lineCount: value.split(/\r\n|\r|\n/).length, }; } // // FUNCTION // if (typeof value === 'function') { let functionValue = ''; if ('toString' in value) functionValue = escapeHTML(value.toString()); else functionValue = escapeHTML(String(value)); return { text: `ƒ ${functionValue}`, itemCount: 1, lineCount: functionValue.split(/\r\n|\r|\n/).length, }; } // // NULL/UNDEFINED // if (value === null || value === undefined) { return { text: `${escapeHTML(String(value))}`, itemCount: 1, lineCount: 1, }; } // Avoid infinite recursions (e.g. `window.window`) if (depth > 20) { return { text: '(...)', itemCount: 1, lineCount: 1, }; } // // ARRAY // if (Array.isArray(value)) { if (options.ancestors.includes(value)) return { text: '[...]', itemCount: 1, lineCount: 1, }; const result = []; // To account for sparse array, we can't use map() (it skips over empty slots) for (let i = 0; i < value.length; i++) { if (Object.keys(value).includes(Number(i).toString())) { result.push( asString(depth + 1, value[i], { ancestors: [...options.ancestors, value], }) ); } else { result.push({ text: 'empty', itemCount: 1, lineCount: 1, }); } } const itemCount = result.reduce((acc, val) => acc + val.itemCount, 0); const lineCount = result.reduce( (acc, val) => Math.max(acc, val.lineCount), 0 ); if (itemCount > 5 || lineCount > 1) { return { text: "[\n" + INDENT.repeat(depth + 1) + result .map((x, i) => '' + i + '' + x.text) .join(", \n" + INDENT.repeat(depth + 1)) + '\n' + INDENT.repeat(depth) + "]", itemCount, lineCount: 2 + result.reduce((acc, val) => acc + val.lineCount, 0), }; } return { text: "[" + result.map((x) => x.text).join(", ") + "]", itemCount: Math.max(1, itemCount), lineCount: 1, }; } // // HTMLElement // if (value instanceof Element) { if (options.ancestors.includes(value)) return { text: 'Element...', itemCount: 1, lineCount: 1, }; let result = `<${value.localName}`; let lineCount = 1; Array.from(value.attributes).forEach((x) => { result += ' ' + x.localName + '="' + value.getAttribute(x.localName) + '"'; }); result += '>'; if (value.innerHTML) { let content = value.innerHTML.split('\n'); if (content.length > 4) { content = [...content.slice(0, 5), '(...)\n']; } result += content.join('\n'); lineCount += content.length; } result += ``; return { text: `${escapeHTML(result)}`, itemCount: 1, lineCount: lineCount, }; } // // OBJECT // if (typeof value === 'object') { if (options.ancestors.includes(value)) return { text: '{...}', itemCount: 1, lineCount: 1, }; if (value instanceof Map) { const kv = Object.fromEntries(value); const result = asString(depth, kv, { ancestors: [...options.ancestors, value], }); return { ...result, text: 'Map' + result.text }; } if (value instanceof Set) { const elts = Array.from(value); const result = asString(depth, elts, { ancestors: [...options.ancestors, value], }); return { ...result, text: 'Set' + result.text }; } if ('toString' in value) { const s = value.toString(); if (s !== '[object Object]') return { text: escapeHTML(s), itemCount: 1, lineCount: 1, }; } let props = Object.keys(value); Object.getOwnPropertyNames(value).forEach((prop) => { if (!props.includes(prop)) { props.push(prop); } }); props = props.filter((x) => !x.startsWith('_')); if (props.length === 0 && typeof props.toString === 'function') { const result = value.toString(); if (result === '[object Object]') return { text: '{}', itemCount: 1, lineCount: 1, }; return { text: result, itemCount: 1, lineCount: result.split(/\r\n|\r|\n/).length, }; } const propStrings = props.sort().map((key) => { if (typeof value[key] === 'object' && value[key] !== null) { let result = asString(depth + 1, value[key], { ancestors: [...options.ancestors, value], }); if (result.itemCount > 500) { result = { text: "(...)", itemCount: 1, lineCount: 1, }; } return { text: `${key}: ${result.text}`, itemCount: result.itemCount, lineCount: result.lineCount, }; } if (typeof value[key] === 'function') { return { text: `${key}: ƒ (...)`, itemCount: 1, lineCount: 1, }; } const result = asString(depth + 1, value[key], { ancestors: [...options.ancestors, value], }); return { text: `${key}: ${result.text}`, itemCount: result.itemCount, lineCount: result.lineCount, }; }); const itemCount = propStrings.reduce((acc, val) => acc + val.itemCount, 0); const lineCount = propStrings.reduce((acc, val) => acc + val.lineCount, 0); if (itemCount < 5) { return { text: "{" + propStrings .map((x) => x.text) .join(", ") + "}", itemCount, lineCount, }; } return { text: "{\n" + INDENT.repeat(depth + 1) + propStrings .map((x) => x.text) .join( ",\n" + INDENT.repeat(depth + 1) ) + '\n' + INDENT.repeat(depth) + "}", itemCount: itemCount, lineCount: lineCount + 2, }; } return { text: String(value), itemCount: 1, lineCount: 1 }; } function escapeHTML(s) { return s .replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"') .replace(/'/g, '''); } const onMathfieldUpdate = (mf) => { // The ref callback is called with null when the element unmounts if (mf === null) return; const latexField = document.getElementById('latex'); if (!latexField) return; latexField.value = mf.value; const expr = mf?.expression; // Output MathJSON representation of the expression document.getElementById('math-json').innerHTML = expr ? asString(0, expr.json).text : '😕 The Compute Engine is not available'; if (!expr) return; let result = ''; if (typeof MathfieldElement !== 'undefined' && MathfieldElement.computeEngine) { MathfieldElement.computeEngine.precision = 7; } if (expr.head !== 'Equal') { const exprN = expr.N(); if (!exprN.isSame(expr)) result = exprN.latex; } if (!result) { const exprSimplify = expr.simplify(); if (!exprSimplify.isSame(expr)) result = exprSimplify.latex; } if (expr.head !== 'Equal') { if (!result) { const exprEval = expr.evaluate(); if (!exprEval.isSame(expr)) result = exprEval.latex; } } if (result) { const markup = window.MathLive?.convertLatexToMarkup?.('= ' + result); if (markup) { document.getElementById('result').innerHTML = markup; document.getElementById('result-section').classList.add('is-visible'); } else { document.getElementById('result-section').classList.remove('is-visible'); } } else { document.getElementById('result-section').classList.remove('is-visible'); } }; const onInput = (evt) => onMathfieldUpdate(evt.target); useEffect(() => { const latexField = document.getElementById('latex'); latexField.value = children; }, []) // There's a bug somewhere (React?) where `return ` doesn't work // (the JSX code produced is invalid). Calling the _jsx function directly // works around the issue. return _jsx('math-field', { onInput, ref: (node) => onMathfieldUpdate(node), value: children }); } {`x=\\frac{-b\\pm \\sqrt{b^2-4ac}}{2a}`}
Keyboard Shortcuts
Read more about using the **Compute Engine** to evaluate and simplify expression.

LaTeX

Read more about the supported **LaTeX commands**.

MathJSON




Learn more about MathJSON and try a demo of the **Compute Engine**.


## Keyboard Shortcuts





  

  
{`$$ \\frac{\\blacksquare}{\\blacksquare}$$`}

  
Fraction

  
/

  


  

  
{`$$ \\square^\\blacksquare$$`}

  
Superscript, Power

  
^

  
⇧+6

  
SHIFT+6

  


  

  
{`$$\\square_\\blacksquare$$`}

  
Subscript

  
_

  


  

  
{`$$\\sqrt{\\blacksquare}$$`}

  
Square root

  
⌥ + V

  
ALT + V

  


  

  
{`$$\\int^{\\blacksquare}_{\\blacksquare}$$`}

  
Integral

  
⌥ + B

  
ALT + B

  


  

  
{`$$\\sum$$`}

  
Sum

  
⌥ + W

  
ALT + W

  


  

  
{`$$\\prod^\\blacksquare_\\blacksquare$$`}

  
Product

  
⌥ + ⇧ + P

  
ALT + SHIFT + P

  


  

  
{`$$ \\pi$$`}

  
Pi

  
PI

  


  

  
{`$$ \\infty$$`}

  
Infinity

  
OO

  


  

  
{`$$ \\pm$$`}

  
Plus or minus

  
+-

  


  

  
{`$$ \\mathbb{R}$$`}

  
Blakckboard R

  
⇧+R⇧+R

  
SHIFT+RSHIFT+R

  







  

  
Enter/exit LaTeX mode

  
ESC

  


  

  
Enter/exit text mode

  
"

  
⇧+'

  
SHIFT+'

  










Read more about all the available **keybindings** and **shortcuts**.






export default function ({children}) {
  useEffect(() => {
    const platform = navigator['userAgentData']?.platform ?? navigator.platform;
    const isApple = /^mac/i.test(platform) || /iphone|ipod|ipad/i.test(navigator.userAgent);

    // The body class gets cleared when the page is reloaded, so we need to
    // set it again after a short delay.
    if (isApple) 
      setTimeout(() => document.body.classList.add('glyphs'), 16);
    
    // Restore the body class when the page is reloaded
    return () => document.body.classList.remove('glyphs');
  }, []);
  return <>{children};
}