]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/common/HTMLInput.js
tracker medallion controler
[alttp.git] / resources / js / components / common / HTMLInput.js
1 import { html } from '@codemirror/lang-html';
2 import { EditorView } from '@codemirror/view';
3 import PropTypes from 'prop-types';
4 import React from 'react';
5 import { githubDark } from '@uiw/codemirror-theme-github';
6 import CodeMirror from '@uiw/react-codemirror';
7
8 const HTMLInput = ({
9         name,
10         onChange,
11         value,
12 }) => {
13         const handleChange = React.useCallback((value) => {
14                 return onChange({ target: { name, value } });
15         }, [name, onChange]);
16
17         return <CodeMirror
18                 extensions={[html(), EditorView.lineWrapping]}
19                 onChange={handleChange}
20                 theme={githubDark}
21                 value={value}
22         />;
23 };
24
25 HTMLInput.propTypes = {
26         name: PropTypes.string,
27         onChange: PropTypes.func,
28         value: PropTypes.string,
29 };
30
31 export default HTMLInput;