43 lines
1016 B
JavaScript
43 lines
1016 B
JavaScript
import React, { useEffect, useRef } from 'react';
|
|
import 'mathlive';
|
|
|
|
const MathField = ({ value, onChange }) => {
|
|
const mfe = useRef(null);
|
|
|
|
// Konfiguracja
|
|
useEffect(() => {
|
|
const field = mfe.current;
|
|
if (!field) return;
|
|
field.setOptions({
|
|
virtualKeyboardMode: "manual",
|
|
locale: "pl",
|
|
});
|
|
// Nasłuchiwanie zmian w polu
|
|
const handleInput = (e) => onChange(e.target.value);
|
|
field.addEventListener('input', handleInput);
|
|
return () => field.removeEventListener('input', handleInput);
|
|
}, [onChange]);
|
|
|
|
// Synchronizacja wartości z zewnętrznym stanem
|
|
useEffect(() => {
|
|
if (mfe.current && mfe.current.value !== value) {
|
|
mfe.current.value = value;
|
|
}
|
|
}, [value]);
|
|
|
|
return (
|
|
<math-field
|
|
ref={mfe}
|
|
style={{
|
|
width: '100%',
|
|
padding: '12px',
|
|
fontSize: '1.5rem',
|
|
border: '1px solid #4CAF50',
|
|
borderRadius: '8px',
|
|
background: 'white'
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default MathField; |