-1



Estoy intentando crear una especie de IDE del estilo de CodeMirror pero muchísimo más simple, para la web. Estoy utilizando DIVs con la propiedad "contentEditable=true" en vez de inputs o textareas para escribir los textos.

La cosa es que cuando pulso enter va creando DIVs que hacen referencia a la nueva línea de código pero estos DIVs no soy capaz de detectarlos hasta que pulso por tercera vez la tecla ENTER.

El IDE que quiero crear sería unicamente para escribir código CSS y JS y que automáticamente vaya coloreando la sintaxis a mi gusto.

Si a alguien se le ocurre alguna idea de como hacerlo que me lo comente.

Pongo ejemplo de código para que podáis reproducir el error.

Código HTML.

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="txtarea-code">
            <div class="numbers" id='numbers'>
               <div class="numC">1</div>
            </div>
            <div class="code" id='code'>
         
            </div>
         </div> 
    </body>
    <script src="javascript.js"></script>
</html>

Código Javascript

//Variables code,numbers
let code = document.getElementById("code");
let numbers = document.getElementById("numbers");

//AddEventListener - Click
code.addEventListener("click", initSintax(code, numbers));
//Función initSintax
function initSintax(arg1, arg2){
    // Enter, Backspace, Space - keydown
    let code = arg1;
    let numbers = arg2;

    code.setAttribute("contentEditable","true");
    code.focus();   
    let cn = 0;
    code.addEventListener("keydown",function(event){
        // Aquí intento colocar a todos los divs que ha creado
        // la clase DIV desde el principio pero como solo
        // detectar el -code.children.length- a partir de la tercera
        // pulsación de la tecla ENTER lo he hecho de esta manera.
        // Funciona pero es una chapuza.
        if(code.children.length >= 1 && cn == 0){
            code.children[0].setAttribute("class","child"); 
            code.children[1].setAttribute("class","child"); 
            code.children[2].setAttribute("class","child"); 
            cn = 1;
        }else{
            // Aquí agrego la clase -child- a cada nuevo elemtno DIV que
            // se va creando a través de la pulsación de la tecla ENTER
            code.children[code.children.length-1].setAttribute("class","child"); 
        }
        if(event.code == "Enter"){
            createNumber(numbers);
          }
        });
    };
//Función para crear los números de línea
function createNumber(mainNumber){
    let valorNum = document.getElementsByClassName("numC");
    valorNum = valorNum[valorNum.length-1].innerHTML;
    let num = document.createElement("div");
    num.setAttribute("class","numC");
    num.innerHTML = parseInt(valorNum)+1;
    mainNumber.appendChild(num);
    return parseInt(valorNum)+1;
};

Estilos CSS (SASS) - para un WIDTH de 320px

body{
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.txtarea-code{
    width: calc(262px + 25px);
    height: 530px;
    resize: none;
    margin-top: 10px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #8c8f94;
    display: flex;
}
    .txtarea-code .numbers{
        width: auto;
        min-width: 35px;
        height: 100%;
        background-color: #f7f7f7;
        border-right: 1px solid #8c8f94;
        overflow-y: scroll;
        scrollbar-width: 0px;
        content: '';
    }
    .txtarea-code .numbers div{
            width: calc(100% - 7px);
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: right;
            padding-right: 7px;
            font-size: 16px;
        }
    .txtarea-code .code{
            width: calc(100% - 25px);
            min-height: 20px;
            resize: none;
            border: transparent;
            font-size: 16px;
    }
    .txtarea-code .code .child{
                height: 20px !important;
    }
    .textarea-code .code .active{
            background-color: #e8f2ff;
           }

Muchas gracias de antemano !!

Saludos !!

2
  • Pon un ejemplo mínimo verificable, por favor, para ver tu código y poder reproducir el error y ayudarte a solucionarlo, gracias.
    – masterguru
    el 5 sep. 2022 a las 19:21
  • He adaptado el código para que puedas recrear el error. Al pulsar enter la primera vez crea 2 divs. Tiene sentido porque el primer div hace referencia a la primera linea y el segundo div a la segunda linea. La cosa es que no consigo que detecte los div desde el principio de su creación. Los detecta a partir de la tercera pulsación de la tecla Enter. También me gustaría poder detectar en que DIV está el foco cuando el usuario haga clic en un DIV para poder colorear el fondo y diferenciar la línea en la que está el cursor. Muchas gracias de antemano
    – ArtCodex64
    el 5 sep. 2022 a las 20:44

1 respuesta 1

0

Puede ser algo así?

let code = document.getElementById("code");
let numbers = document.getElementById("numbers");
let selected_line = code.children[code.children.length - 1];

code.addEventListener("click", focusEvent);
function focusEvent(event) {
    if (event.path[0].classList.contains("child")) {
        focus(event.path[0]);
    }
}

function focus(target) {
    code.querySelectorAll(".focus").forEach((el) => el.classList.remove("focus"));
    target.classList.add("focus");
    selected_line = target;
}

function initSintax(){
    code.addEventListener("keydown",function(event){
        if(event.code == "Enter" || event.code == "NumpadEnter")
        {
             createNumber();
             setTimeout(() => focus(selected_line.nextSibling),10);
        }
     });
}

function createNumber(){
    let valorNum = numbers.querySelectorAll(".numC");
    valorNum = valorNum[valorNum.length-1].innerHTML;
    let num = document.createElement("div");
    num.setAttribute("class","numC");
    num.innerHTML = parseInt(valorNum)+1;
    numbers.appendChild(num);
    return parseInt(valorNum)+1;
}

initSintax();
.txtarea-code{
    width: calc(262px + 25px);
    height: 530px;
    resize: none;
    margin-top: 10px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #8c8f94;
    display: flex;
   
}
    .txtarea-code .numbers{
        width: auto;
        min-width: 35px;
        height: 100%;
        background-color: #f7f7f7;
        border-right: 1px solid #8c8f94;
        overflow-y: hidden;

        scrollbar-width: 0px;
        content: '';
    }
    .txtarea-code .numbers div{
            width: calc(100% - 7px);
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: right;
            padding-right: 7px;
            font-size: 14px;
          
         
        }
    .txtarea-code .code{
            width: calc(100% - 25px);
            min-height: 20px;
            resize: none;
            border: transparent;
            font-size: 16px;
             outline:none !important;
    }
    .txtarea-code .code .child{
                height: 20px !important;
                            align-items: center;
    display: flex;
    }
    .textarea-code .code .active{
            background-color:#e8f2ff;
           }
           .focus{
               background-color:#a7c0ec;
           }
<div class="txtarea-code">
    <div class="numbers" id='numbers'>
        <div class="numC">1</div>
    </div>
    <div class="code" id='code' contenteditable="true">
        <div class="child focus" spellcheck="false"></div>
    </div>
  </div>

2
  • Buenas ! Muchas gracias por tu ayuda, me ha sido muy útil. He cambiado un poco tu código de JS porque en Firefox no me reconocía la función -path- de Javascript. También le he quitado el -nextSibling- y he dejado unicamente el elemento. En mi navegador funciona correctamente. Muchas gracias por tu ayuda de nuevo. Una última cosa, cuando aparece el cursor de texto sobre el DIV no aparece centrado, sabes por que puede ser eso? Estoy mirando como corregir el error pero de momento no he encontrado como. Saludos !
    – ArtCodex64
    el 6 sep. 2022 a las 10:48
  • @ArtCodex64, no debés editar su código. En su lugar, indicale qué es lo que debe modificar o agregar, o directamente redactá otra respuesta. Acá podés ver la revisión de la edición.
    – padaleiana
    el 6 sep. 2022 a las 18:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.