Monaco Text Editor Setup

monaco-text-editor-setup.tsx

export const Outer = styled.div`
  height: 100%;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
  overflow: hidden;
  position: relative;
`;
export const Inner = styled.div`
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  position: absolute;
`;

text-editor.tsx

export const TextEditorTsx: FC<{ textEditor: TextEditor }> = ({ textEditor}) => {
  return (
    <>
      <Outer>
        <Inner>
          {Boolean(textEditor.state.openFile) ? (
            <Editor
              onChange={(str) => textEditor.onTextEditorChange(str)}
              theme="vs-dark"
              defaultLanguage="json"
              defaultValue=""
              value={textEditor.state.openFile?.content || ""}
              options={{ readOnly: textEditor.state.readOnly }}
            />
          ) : (
            <></>
          )}
        </Inner>
      </Outer>
    </>
  );
};