popupに数式を出してみる

code:js

import('/api/code/programming-notes/popupに数式を出してみる/script.js');

2021-05-21 00:49:43 テストのつもりが完成してしまった……

https://gyazo.com/c9df4e42704c51b9bd108ee556735e92

features

数式にミスが有ると、どこにミスが有るのか教えてくれるよ

$ \begin{aligned}\int\sin\theta\mathrm{d}\theta=&\int\mathrm{d}(-\cos\theta)\\=&-\cos\theta+C\quad.\mathrm{for}\exist C\in\Bbb{R}\end{aligned}

https://gyazo.com/3d1ee7a178945c8a562d0e4ee93b4be0

code:script.js

import {html} from '../htm@3.0.4%2Fpreact/script.js';

import {useKaTeX} from '../use-KaTeX/script.js';

import {useState} from '../preact@10.5.13/hooks.js';

import {PopupContainer, CSS} from '../popup-container@0.1.0/script.js';

import register from '../preact-custom-element@4.2.1/script.js';

import {scrapboxDOM} from '../scrapbox-dom-accessor/script.js';

import {useMutationObserver} from '../useMutationObserver/script.js';

import {throttle} from '../custom-throttle/script.js';

const App = ({formula}) => {

const {ref, error, setFormula} = useKaTeX(formula); // 数式rendering用hook

styleTop: 0,

styleLeft: 0,

}); // cursorの位置

// .formula内にcursorが来たらpreviewを開始する

// 負荷低減のために、throttleで少し間引いている

const callback = throttle((mutation) => {

const cursor = mutation.target;

const {top, left} = cursor.getBoundingClientRect();

const elements = document.elementsFromPoint(left, top);

const formulaDOM = elements.find(element => element.matches('.formula'));

if (!formulaDOM) {

setOpen(false);

return;

}

setOpen(true);

setFormula(formulaDOM.textContent.slice(3, -1));

setCursorPosition({

styleTop: +cursor.style.top.slice(0, -2),

styleLeft: +cursor.style.left.slice(0, -2),

});

}, 100);

return html`

<${CSS} />

<style>

.error {color:#fd7373; }

</style>

<${PopupContainer} cursorPosition="${cursorPosition}" open="${open}">

<span class="katex-display" ref="${ref}" />

<//>

`;

};

document.getElementById('editor')

.insertAdjacentHTML('beforeend', '<userscript-katex-test formula="E=mc^2"></userscript-katex-test>');