add proper HTML editor

[alttp.git] / resources / js / components / common / HTMLInput.js

diff --git a/resources/js/components/common/HTMLInput.js b/resources/js/components/common/HTMLInput.js
new file mode 100644 (file)
index 0000000..8a54842
--- /dev/null
+++ b/resources/js/components/common/HTMLInput.js
@@ -0,0 +1,31 @@
+import { html } from '@codemirror/lang-html';
+import { EditorView } from '@codemirror/view';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { githubDark } from '@uiw/codemirror-theme-github';
+import CodeMirror from '@uiw/react-codemirror';
+
+const HTMLInput = ({
+       name,
+       onChange,
+       value,
+}) => {
+       const handleChange = React.useCallback((value) => {
+               return onChange({ target: { name, value } });
+       }, [name, onChange]);
+
+       return <CodeMirror
+               extensions={[html(), EditorView.lineWrapping]}
+               onChange={handleChange}
+               theme={githubDark}
+               value={value}
+       />;
+};
+
+HTMLInput.propTypes = {
+       name: PropTypes.string,
+       onChange: PropTypes.func,
+       value: PropTypes.string,
+};
+
+export default HTMLInput;