init commit

TextEditor/src/MathField.js

@@ -0,0 +1,43 @@
+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;