import React from "https://esm.sh/react@19/"; import {createRoot} from "https://esm.sh/react-dom@19/client/"; function Preview({defaultText,size,fonts}) { const [text, setText] = React.useState(defaultText); return (

setText(e.target.value) } />

{Object.entries(fonts).filter(x=>x[1])
       .map(font=>
        <fieldset style={{fontFamily:font[0]}}><legend>{font}</legend>
	  <div style={{fontSize:size+'px'}} dangerouslySetInnerHTML={{ __html: text }} />
	</fieldset>
      )}

</section>
  )
}

function App () {

const [size, setSize] = React.useState(20);

const [fonts, setFonts] = React.useState({
    'serif': false,
    'sans-serif': false,
    'monospace': false,
    'New Computer Modern Math': true,
    'New Computer Modern Math Sans': false,
    'MLModern': false,
    'STIX Two Math': true,
    'Noto Sans Math': true,
    'Cambria Math': true,
    'Libertinus Math': false,
  });

return (
    <>
      <div id='controls'>
	  {Object.entries(fonts)
	   .map((x,indx)=>
	     <button key={'button'+indx}
		     ariaPressed={x[1]}
		     style={{backgroundColor:(x[1] ? '#ff0' : '#fcfcfc')}}
		     onClick={()=>setFonts({...fonts, [x[0]]: !fonts[x[0]] })}>
	       {x[0]}
	     </button>
	   )}
	<p>
	  <label htmlFor="fontSize">Font Size</label>
	  <input type="range" id="fontSize" min="1" value={size}
		 onChange={e=>setSize(e.target.value)} />
	  {size}px
	</p>
	<button id='helpButton' popovertarget='helpPOP'>?</button>
      </div>

<div popover='auto' id="helpPOP">
	<p>This previewer shows various math symbols and formulae in several typefaces.</p>
	<p>The typefaces are: <a href="https://en.wikipedia.org/wiki/Computer_Modern#New_Computer_Modern">New Computer Modern</a>, MLModern, <a href="https://www.stixfonts.org/">STIX Two</a>, <a href="https://fonts.google.com/noto/specimen/Noto+Sans+Math/about">Noto Sans Math</a>, <a href="https://learn.microsoft.com/en-us/typography/font-list/cambria-math">Cambria Math</a> and <a href="https://en.wikipedia.org/wiki/Libertinus">Libertinus Math</a>.
	</p>
	<p style={{textAlign:'center'}}><a href="/">Developed by Sean Brunnock</a></p>
      </div>

<div id='previewsDIV'>

<Preview size={size} fonts={fonts} 
		 defaultText = {`<math>
  <mrow>
    <mi>x</mi>
    <mo>=</mo>
    <mfrac>
      <mrow>
        <mrow>
          <mo>-</mo>
          <mi>b</mi>
        </mrow>
        <mo>±</mo>
        <msqrt>
          <mrow>
            <msup>
              <mi>b</mi>
              <mn>2</mn>
            </msup>
            <mo>-</mo>
            <mrow>
              <mn>4</mn>
              <mo>⁢</mo>
              <mi>a</mi>
              <mo>⁢</mo>
              <mi>c</mi>
            </mrow>
          </mrow>
        </msqrt>
      </mrow>
      <mrow>
        <mn>2</mn>
        <mo>⁢</mo>
        <mi>a</mi>
      </mrow>
    </mfrac>
  </mrow>
</math>`} />

<Preview size={size}  fonts={fonts} 
		 defaultText = {`<math>
 <mrow>
  <mrow>
   <msubsup>
    <mo>∫</mo>
    <mn>1</mn>
    <mi>t</mi>
   </msubsup>
   <mfrac>
    <mrow>
     <mo>ⅆ</mo>
     <mi>x</mi>
    </mrow>
    <mi>x</mi>
   </mfrac>
  </mrow>
  <apply>
   <int/>
   <bvar><ci>x</ci></bvar>
   <lowlimit><cn>1</cn></lowlimit>
   <uplimit><ci>t</ci></uplimit>
   <apply>
    <divide/>
    <cn>1</cn>
    <ci>x</ci>
   </apply>
  </apply>
 </mrow>
</math>`} />

<Preview size={size}  fonts={fonts} 
		defaultText = {`<math>
  <mrow>
    <mi>F</mi>
    <mrow>
      <mo>(</mo>
      <mi>λ</mi>
      <mo>)</mo>
    </mrow>
    <mo>=</mo>
    <mfrac>
      <mrow>
        <mn>2</mn>
        <mi>π</mi>
        <mi>h</mi>
        <msup>
          <mi>c</mi>
          <mn>2</mn>
        </msup>
      </mrow>
      <mrow>
        <msup>
          <mi>λ</mi>
          <mn>5</mn>
        </msup>
        <mrow>
          <mo>(</mo>
          <mrow>
            <mi>exp</mi>
            <mrow>
              <mo>(</mo>
              <mrow>
                <mfrac>
                  <mrow>
                    <mi>h</mi>
                    <mi>c</mi>
                  </mrow>
                  <mrow>
                    <mi>k</mi>
                    <mi>λ</mi>
                    <mi>T</mi>
                  </mrow>
                </mfrac>
              </mrow>
              <mo>)</mo>
            </mrow>
            <mo>−</mo>
            <mn>1</mn>
          </mrow>
          <mo>)</mo>
        </mrow>
      </mrow>
    </mfrac>
  </mrow>
</math>`} />
	
	<Preview size={size}  fonts={fonts}
		 defaultText = {`+ − × ÷
± ∓ ∗ ⋅`} />

<Preview size={size}  fonts={fonts}
		 defaultText = {`= ≠ ≈ ≅ ≡
< > ≤ ≥ ≪ ≫`} />

<Preview size={size}  fonts={fonts}
		 defaultText = {`∈ ∉ ∋ ⊂
⊆ ⊄ ⊃ ⊇
∪ ∩ ∅`} />

<Preview size={size}  fonts={fonts} 
		 defaultText = {`∂ ∇ ∞ ∫ ∬ ∮ ∑ ∏
<hr /> 
√ ∠ ∧ ∨ ¬ ∀ ∃ ∄
<hr /> 
∴ ∵ ← → ↑ ↓ ↔ ⇒ ⇔ ↦
<hr />
∝ ∞`} />

<Preview size={size}  fonts={fonts} 
		 defaultText = {`⌈ ⌉ ⌊ ⌋ ⟨ ⟩
⊥ ∥ ∣ ∤
⊕ ⊖ ⊗ ⊘ ⊙
◯ • ☆ ★ ≃ ∼ ≈ ≺ ≻
⪯ ⪰ ⊂ ⊆ ⊃ ⊇
∖ ∖ ∨ ∧ ⋁ ⋀ ⋂ ⋃
∐
′ ″ ℓ
℘ ℑ ‰`} />

<Preview size={size}  fonts={fonts} 
		 defaultText = {`½ ⅓ ¼ ⅕
⅙ ⅛ ⅔ ⅖
¾ ⅗ ⅜ ⅘
⅚ ⅝ ⅞`} />

<Preview size={size}  fonts={fonts} 
		 defaultText = {`α β γ δ
ε ζ η θ
ι κ λ μ
ν ξ ο π
ρ σ τ υ
φ χ ψ ω`} />

<Preview size={size}  fonts={fonts} 
		 defaultText = {`Α Β Γ Δ
Ε Ζ Η Θ
Ι Κ Λ Μ
Ν Ξ Ο Π
Ρ Σ Τ Υ
Φ Χ Ψ Ω`} />

<Preview size={size}  fonts={fonts} 
		 defaultText = {`ℂ ℕ ℚ ℝ ℤ`} />
	
      </div>
    </>
  )
}

createRoot(document.getElementById('root')).render( <React.StrictMode> <App/> </React.StrictMode> );

/*

*/