frontend/src/components/Inputs/Code.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import React, {useEffect, useRef} from "react";
import * as indentation from "indent-textarea";
import FloatingLabel from "../decorators/FloatingLabel";
import CharLimit from "../decorators/CharLimit";
import {RelPositioning} from "./shared";

export const Code = ({content, ...props}) => {
  const textInput = useRef(null);

  useEffect(() => {
    indentation.watch(textInput.current);
  }, [textInput])

  return (
    <RelPositioning>
      <FloatingLabel
        label="content"
        id={props.id}
        value={content} />
      <textarea
        name="content"
        readOnly={props.readOnly}
        placeholder="Paste your text here"
        value={content}
        id={props.id}
        ref={textInput}
        required
        onChange={props.onChange}
        className="lt-shadow" />
      <CharLimit
        content={content}
        maxLength={props.maxLength} />
    </RelPositioning>
  );
}