Descargar react simple code editor : descarga del código fuente react simple code editor

react simple code editor

Otros recursos

Release 0.14.1

Descargar

reaccionador-codo-editor

El editor de código simple sin lujos con resaltado de sintaxis.

Por qué

Varios editores de código basados en el navegador, como ACE, CodeMirror, Monaco, etc., proporcionan la capacidad de incrustar un editor de código completo en su página web. Sin embargo, si solo necesita un editor simple con una resaltación de sintaxis sin ninguna de las características adicionales, pueden ser exageradas, ya que generalmente no tienen una pequeña huella del tamaño del paquete. Esta biblioteca tiene como objetivo proporcionar un editor de código simple con sintaxis que resalte el soporte sin ninguna de las características adicionales, perfecta para insertas y formularios simples donde los usuarios pueden enviar código.

Características

Destacación de sintaxis modular con biblioteca de terceros
Línea de sangría o texto seleccionado presionando la tecla Tab, con sangría personalizable
Sangría automática en nuevas líneas
Envuelva el texto seleccionado en Parens, Brackets o Quotes
Deshacer palabras completas en lugar de letra por letra
Accesible, use Ctrl+Shift+M (Mac) / Ctrl+M para alternar la tecla Tab Capture

Instalación

npm install react-simple-code-editor

o

yarn add react-simple-code-editor

Uso

Debe utilizar el editor con una biblioteca de terceros que proporciona resaltado de sintaxis. Por ejemplo, se verá como seguir con prismjs :

 import React from 'react' ;
import Editor from 'react-simple-code-editor' ;
import { highlight , languages } from 'prismjs/components/prism-core' ;
import 'prismjs/components/prism-clike' ;
import 'prismjs/components/prism-javascript' ;
import 'prismjs/themes/prism.css' ; //Example style, you can use another

function App ( ) {
  const [ code , setCode ] = React . useState (
    `function add(a, b) {n  return a + b;n}`
  ) ;
  return (
    < Editor
      value = { code }
      onValueChange = { code => setCode ( code ) }
      highlight = { code => highlight ( code , languages . js ) }
      padding = { 10 }
      style = { {
        fontFamily : '"Fira code", "Fira Mono", monospace' ,
        fontSize : 12 ,
      } }
    />
  ) ;
}

Tenga en cuenta que, dependiendo de su marcador de sintaxis, es posible que deba incluir CSS adicional para el resaltado de sintaxis para funcionar.

Accesorios

El editor acepta todos los accesorios aceptados por textarea . Además, puede pasar los siguientes accesorios:

value ( string ): valor actual del editor, es decir, el código a mostrar. Este debe ser un accesorio controlado.
onValueChange ( string => mixed ): devolución de llamada que se llama cuando cambia el valor del editor. Deberá actualizar el valor de valor cuando se llama.
highlight ( string => string | React.Node ): devolución de llamada que recibirá texto para resaltar. Deberá devolver una cadena HTML o un elemento React con la sintaxis resaltando usando una biblioteca como prismjs .
tabSize ( number ): el número de caracteres para insertar al presionar la tecla Tab. Por ejemplo, para la sangría de 4 espacios, tabSize será 4 y insertSpaces será true . Valor predeterminado: 2 .
insertSpaces ( boolean ): si se debe usar espacios para la sangría. Valor predeterminado: true . Si lo establece en false , también puede establecer tabSize en 1 .
ignoreTabKey ( boolean ): si el editor debe ignorar la tecla Tab Presses para que los usuarios de teclado puedan pasar el editor. Los usuarios pueden alternar este comportamiento usando Ctrl+Shift+M (Mac) / Ctrl+M manualmente cuando esto es false . Predeterminado: false .
padding ( number ): relleno opcional para el código. Valor predeterminado: 0 .
textareaId ( string ): una ID para el textarea subyacente puede ser útil para configurar una label .
textareaClassName ( string ): un nombre de clase para el textarea subyacente, puede ser útil para un control más preciso de sus estilos.
preClassName ( string ): un nombre de clase para el pre -preying, puede ser útil para un control más preciso de sus estilos.

Manifestación

react-simple-code-editor.github.io/react-simple-code-editor

Cómo funciona

Funciona superponiendo una sintaxis resaltada <pre> bloque sobre un <textarea> . Cuando escribe, selecciona, copia texto, etc., interactúa con el subyacente <textarea> , por lo que la experiencia se siente nativa. Este es un enfoque muy simple en comparación con otros editores que vuelven a implementar el comportamiento.

La resaltura de sintaxis puede ser realizada por cualquier biblioteca de terceros siempre que devuelva HTML y el usuario sea totalmente controlable.

La vainilla <textarea> no admite insertar caracteres de pestaña para la sangría, por lo que lo reimplemamos escuchando eventos keydown y actualizando programáticamente el texto. Una advertencia con la actualización programada del texto es que perdemos la pila de deshacer, por lo que necesitamos mantener nuestra propia pila de deshacer. Como resultado, también podemos implementar un comportamiento de deshacer mejorado, como deshacer palabras completas similares a editores como VScode.

Limitaciones

Debido a la forma en que funciona, tiene ciertas limitaciones:

El código resaltado de sintaxis no puede tener una familia de fuentes diferente, peso de fuente, estilo de fuente, altura de línea, etc. para su contenido. Dado que el editor funciona alineando el código resaltado sobre un <textarea> , cambiar cualquier cosa que afecte el diseño puede desalinarlo.
La pila de deshacer personalizada es incompatible con el menú contextual del navegador Deshacer/Rehacer elementos. Sin embargo, otros editores completos tampoco admiten los elementos del menú Deshacer/rehacer del navegador.
El editor no está optimizado para el rendimiento y los documentos grandes pueden afectar la velocidad de escritura.
Ocultamos texto en TextARea usando -webkit-text-fill-color: transparent , que funciona en todos los navegadores modernos (incluso los que no son Webkit como Firefox y Edge). En IE 10+, usamos color: transparent que no oculta el cursor. El texto puede parecer más audaz en los navegadores no compatibles.