Necesito ayuda con este código de: indentación de código.

[Mr_J21]

Quiero que cuando detecte las dos llaves "{}" cree un sangría en cada línea nueva, (así ordena css.

<div contenteditable="true" onkeyup="addIndent(event)">
  <!-- contenido editable aquí -->
</div>

<script>
function addIndent(event) {
  if (event.keyCode === 13) {
    let content = document.getSelection().toString();
    if (content.startsWith("{") && content.endsWith("}")) {
      event.preventDefault();
      document.execCommand('insertText', false, ' ');
    } else {
      document.execCommand('indent', false, null);
      document.execCommand('insertText', false, ' ');
    }
  }
}
</script>

 

[leoparis]

Prueba este código:

<div contenteditable="true" onkeyup="addIndent(event)">
  <!-- contenido editable aquí -->
</div>

<script>
function addIndent(event) {
  if (event.keyCode === 13) {
    let content = document.getSelection().toString();
    if (content.startsWith("{") && content.endsWith("}")) {
      event.preventDefault();
      let textNode = document.createTextNode('\n  ');
      let range = document.getSelection().getRangeAt(0);
      range.insertNode(textNode);
      range.setStartAfter(textNode);
      range.setEndAfter(textNode);
      document.getSelection().collapseToEnd();
    } else {
      document.execCommand('indent', false, null);
      document.execCommand('insertText', false, ' ');
    }
  }
}
</script>

Cuando se presiona la tecla "Enter" con este código (event.keyCode === 13), se examina el texto elegido para determinar si comienza y termina con llaves. Si es así, se forma un nuevo nodo de texto con una nueva línea y dos espacios y se agrega al documento.

 

[Mr_J21]

Prueba este código:

<div contenteditable="true" onkeyup="addIndent(event)">
  <!-- contenido editable aquí -->
</div>

<script>
function addIndent(event) {
  if (event.keyCode === 13) {
    let content = document.getSelection().toString();
    if (content.startsWith("{") && content.endsWith("}")) {
      event.preventDefault();
      let textNode = document.createTextNode('\n  ');
      let range = document.getSelection().getRangeAt(0);
      range.insertNode(textNode);
      range.setStartAfter(textNode);
      range.setEndAfter(textNode);
      document.getSelection().collapseToEnd();
    } else {
      document.execCommand('indent', false, null);
      document.execCommand('insertText', false, ' ');
    }
  }
}
</script>

Cuando se presiona la tecla "Enter" con este código (event.keyCode === 13), se examina el texto elegido para determinar si comienza y termina con llaves. Si es así, se forma un nuevo nodo de texto con una nueva línea y dos espacios y se agrega al documento.

Ese código me serviría mas para Indentar el HTML.

Pero aquí te muestro lo que quiero hacer amigo :

Según vaya escribiendo quiero que organice el CSS similar a (Visual Studio Code) que crea un espacio dentro de las llaves

 

[bits4me]

Ten en cuenta que el cursor dentro del contenteditable no se puede mantener en la misma posición al formatear el código. Por lo tanto, si se intenta mantener la posición anterior del cursor, puede generar resultados impredecibles. Te dejo una versión de tu pen pero usando el comando ctrl + shift + f.

 

[Mr_J21]

Ten en cuenta que el cursor dentro del contenteditable no se puede mantener en la misma posición al formatear el código. Por lo tanto, si se intenta mantener la posición anterior del cursor, puede generar resultados impredecibles. Te dejo una versión de tu pen pero usando el comando ctrl + shift + f.

Un millón de gracias Brother, Una pregunta si usas un "textarea" ya no tendría el problema de los resultados impredecibles del cursor.