Source: input/CodeEditorOqt.js

import React, { useEffect } from "react";
import AceEditor from "react-ace";
import { processOptions, useVariables } from "../..";
import "ace-builds/src-noconflict/mode-jsx";
/*eslint-disable no-alert, no-console */
import "ace-builds/src-min-noconflict/ext-searchbox";
/*eslint-disable no-alert, no-console */
import "ace-builds/src-min-noconflict/ext-language_tools";
import "ace-builds/src-noconflict/mode-json";
import "ace-builds/src-noconflict/mode-csharp";
import "ace-builds/src-noconflict/mode-html";
import "ace-builds/src-noconflict/mode-jsx";
import "ace-builds/src-noconflict/theme-monokai";
import "ace-builds/src-noconflict/theme-github";
import "ace-builds/src-noconflict/theme-tomorrow";
import "ace-builds/src-noconflict/theme-kuroir";
import "ace-builds/src-noconflict/theme-twilight";
import "ace-builds/src-noconflict/theme-xcode";
import "ace-builds/src-noconflict/theme-textmate";
import "ace-builds/src-noconflict/theme-solarized_dark";
import "ace-builds/src-noconflict/theme-solarized_light";
import "ace-builds/src-noconflict/theme-terminal";

/**
 * Componente que renderiza un input de código
 * @name Reactor.Components.Input.CodeEditorOqt
 * @param {string} [options = {}] 
 *  Json string con las propiedades React que se quieran asignar al componente
 *    <pre> {
 *     placeholder: "",
 *     theme: "monokai",
 *     mode: "html",
 *     enableBasicAutocompletion: true,
 *     enableLiveAutocompletion: true,
 *     fontSize: 14,
 *     showGutter: true,
 *     showPrintMargin: true,
 *     highlightActiveLine: true,
 *     enableSnippets: true,
 *     showLineNumbers: true,
 *     maxHeight: "200px"
 *   }</pre>
 * Los lenguajes admitidos son: json, csharp, html y jsx
 * Los temas admitidos: monokai, github, tomorrow, kuroir, twilight, xcode, textmate, solarized_dark, solarized_light, terminal
 * @param {string?} context Contexto donde se encuentra la variable
 * @param {string} variable nombre de variable que va a contener el resultado, tambien para reconfigurar el componente
 * @param {string?} deafult_value Valor por defecto
 * @class 
 * @example 
<code_editor
  variable="code"
  context="test"
  default_value="hola mundo"
  options='{
    "mode": "csharp",
    "theme": "monokai",
    "fontSize": "14",
    "basicAuto": "true",
    "liveAuto": "true",
    "snippets": "true",
    "maxHeight": "200px"
  }'
></code_editor>
<div var-children="code.value" context="test"></div>
 */

const CodeEditorOqt = ({variable, context, default_value, options, children}) => {

  const { data = defaultOptions, setData } = useVariables({variable, context});

  useEffect(()=>{
    setData(processOptions(options, defaultOptions, defaultOptions));
  }, [options])

  const onChange = (newValue) => {
    setData({...data, value: newValue});
  }

  return (
    <>
      <AceEditor
        debounceChangePeriod={350}
        style={{ maxHeight : data.maxHeight }}
        focus={true}
        width = "100%"
        height = "1500px"
        wrapEnabled={true}
        placeholder={data.placeholder}
        mode={data.mode}
        theme={data.theme}
        name="editor"
        onChange={onChange}
        defaultValue={default_value}
        fontSize={data.fontSize}
        showPrintMargin={data.showPrintMargin}
        showGutter={data.showGutter}
        highlightActiveLine={data.highlightActiveLine}
        setOptions={{
          useWorker: true,
          enableBasicAutocompletion: data.enableBasicAutocompletion,
          enableLiveAutocompletion: data.enableLiveAutocompletion,
          enableSnippets: data.enableSnippets,
          showLineNumbers: data.showLineNumbers,
          tabSize: 2
        }}
      />
      {children}
    </>
  );
}

const defaultOptions = {
  placeholder: "",
  theme: "monokai",
  mode: "html",
  enableBasicAutocompletion: true,
  enableLiveAutocompletion: true,
  fontSize: 14,
  showGutter: true,
  showPrintMargin: true,
  highlightActiveLine: true,
  enableSnippets: true,
  showLineNumbers: true,
  maxHeight: "200px"
};

const languages = [
  "json",
  "csharp",
  "html",
  "jsx"
];

const themes = [
  "monokai",
  "github",
  "tomorrow",
  "kuroir",
  "twilight",
  "xcode",
  "textmate",
  "solarized_dark",
  "solarized_light",
  "terminal"
];

export default CodeEditorOqt;