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;