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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

import React from "react";
import styled from 'styled-components'
import CharLimit from "../decorators/CharLimit";
import Editor from 'react-simple-code-editor';
import {Highlighter} from "../renderers/Code";
import {CodeLike, Hover} from "../Common/mixins";

const Wrapper = styled.div`
  position: relative;
`
const EditorWrapper = styled(Editor)`
  overflow: visible !important;
  
  & > * {
    padding: 0 !important;
    width: 100%;
  }
  
  & pre, & code, & > textarea {
    ${CodeLike}
    min-height: 40vh;
  }
  
  & pre {
    z-index: -1 !important;
  }
  
  & > textarea {
    ${Hover}
    padding: 0.6em !important;
    outline: none !important;
  }
`

export const Code = ({content, id, readOnly, setContentCallback, ...props}) => {
  return (
    <Wrapper>
      <EditorWrapper
        name="content"
        readOnly={readOnly}
        placeholder="Paste your text here"
        value={content}
        id={id}
        required
        highlight={code => <Highlighter theme="atom">{code}</Highlighter> }
        onValueChange={code => setContentCallback(code)}
        padding={15}
      />
      <CharLimit
        content={content}
        maxLength={props.maxLength} />
    </Wrapper>
  );
}