X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;ds=sidebyside;f=resources%2Fjs%2Fcomponents%2Fcommon%2FHTMLInput.js;fp=resources%2Fjs%2Fcomponents%2Fcommon%2FHTMLInput.js;h=8a548427901b27ab8f97f0b294c1fa321c38d970;hb=a24b514e92a0d5fca7a6c99b6414aa4814065a7d;hp=0000000000000000000000000000000000000000;hpb=7c6716036321ba09846785720e81459aad55a323;p=alttp.git

diff --git a/resources/js/components/common/HTMLInput.js b/resources/js/components/common/HTMLInput.js
new file mode 100644
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;