React Mathquill 라이브러리 분석

Mathquill 라이브러리

Mathquill 공식사이트

→ 웹 사이트에 수식 기호를 쉽게 입력 가능하게 도와주는 라이브러리

→ Latex 문법을 기반으로 수식으로 표현된 상태에서 바로 편집이 가능

→ WYSIWYG과 DHTML을 이용한 LaTeX 편집기

→ 키보드 입력, GUI 입력, Tex 지원, 자동 레이아웃 기능 지원

→ IE8 이상 또는 최신 브라우저들 지원.

React-Mathquill 라이브러리

React-Mathquill Repository

→ EditableMathField : 동적인 수식 편집 컴포넌트

→ StaticMathField : 정적인 수식 편집 컴포넌트

→ addStyles : 스타일 관련 함수

➕ StaticMathField

(1) Props

→ children : String - A string of latex to render statically on the page

import React from 'react'
import { addStyles, StaticMathField } from 'react-mathquill'

// inserts the required css to the <head> block.
// you can skip this, if you want to do that by yourself.
addStyles()

const StaticMathExample = () => (
  <StaticMathField>{'\\frac{1}{\\sqrt{2}}\\cdot 2'}</StaticMathField>
)

➖EditableMathField

(1) Props

→ latex : String - Initial latex value for the input field

→ config : Object - A mathquill config object

→ onChange(mathField) - A function that is called on change events.

→ mathquillDidMount(mathField) - A function that is called when the Mathquill element is initalized.

(2) API Method

`.el()`

→ Returns the root HTML element.

<EditableMathField
		latex={latex}
	  onChange={(mathField) => {
        console.log(mathField.el())
    }}
/>

`.latex()`

→ Returns the contents as LaTeX.

<EditableMathField
		latex={latex}
	  onChange={(mathField) => {
        console.log(mathField.latex())
    }}
/>

`.focus()`

→ Puts the focus on the editable field.

<EditableMathField
		latex={latex}
	  onChange={(mathField) => {
        console.log(mathField.focus())
    }}
/>

`.blur()`

→ Removes focus from the editable field.

<EditableMathField
		latex={latex}
	  onChange={(mathField) => {
        console.log(mathField.blur())
    }}
/>

`.write(latex_string)`

→ Write the given LaTeX at the current cursor position. If the cursor does not have focus, writes to last position the cursor occupied in the editable field.

→ mathquillDidMount 함수를 통해 mathField Type을 State로 관리

→ 이후, Sqrt 버튼을 클릭하면 write() 함수를 통해 mathField에 변경을 주어 onChange 함수 실행

import React, { useState } from 'react'
import { addStyles, EditableMathField } from 'react-mathquill'

const EditableMathExample = () => {
  const [latex, setLatex] = useState('\\frac{1}{\\sqrt{2}}\\cdot 2')
	const [latexInput, setLatexInput] = useState('')

	const mathFieldHandler = (mathField) -> {
		setLatexInput(mathField)
	}	
	const clickHandler = (latex) => {
		latexInput.write(latex)		
	}

  return (
    <div>
      <EditableMathField
        latex={latex}
        onChange={(mathField) => {
          setLatex(mathField.latex())
        }}
	mathquillDidMount={mathFieldHandler}
      />
      <p>{latex}</p>
      <button onClick={() => clickHandler('\sqrt{}'}>Sqrt</button>
    </div>
  )
}