react simple code editor Download - react simple code editor Código Fonte Download

react simple code editor

Outros recursos

Release 0.14.1

Baixar

React-Simple-Code-Editor

Editor de código simples sem frescuras com destaque de sintaxe.

Por que

Vários editores de código baseados no navegador, como ACE, Codemirror, Mônaco etc. fornecem a capacidade de incorporar um editor de código completo em sua página da web. No entanto, se você precisar apenas de um editor simples com destaque de sintaxe, sem nenhum dos recursos extras, eles podem ser exagerados, pois geralmente não têm uma pegada de tamanho pequeno. Esta biblioteca tem como objetivo fornecer a um editor de código simples com suporte de destaque da sintaxe sem nenhum dos recursos extras, perfeito para incorporação e formulários simples em que os usuários podem enviar código.

Características

Sintaxe modular destacando com biblioteca de terceiros
Linha de recuo ou texto selecionado pressionando a tecla de guia, com recuo personalizável
Recuo automático em novas linhas
Enrole o texto selecionado em parens, suportes ou citações
Desfazer palavras inteiras em vez de carta por carta
Acessível, use Ctrl+Shift+M (Mac) / Ctrl+M para alternar a tecla de captura de captura

Instalação

npm install react-simple-code-editor

ou

yarn add react-simple-code-editor

Uso

Você precisa usar o editor com uma biblioteca de terceiros que fornece destaque de sintaxe. Por exemplo, parecerá seguir 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 ,
      } }
    />
  ) ;
}

Observe que, dependendo do seu marcador de sintaxe, talvez seja necessário incluir CSS adicionais para destaque da sintaxe para funcionar.

Adereços

O editor aceita todos os adereços aceitos pela textarea . Além disso, você pode passar os seguintes adereços:

value ( string ): valor atual do editor ou seja, o código a ser exibido. Este deve ser um suporte controlado.
onValueChange ( string => mixed ): retorno de chamada que é chamado quando o valor do editor muda. Você precisará atualizar o suporte de valor quando isso for chamado.
highlight ( string => string | React.Node ): Retorno de chamada que receberá texto para destacar. Você precisará retornar uma string html ou um elemento react com destaque da sintaxe usando uma biblioteca como prismjs .
tabSize ( number ): o número de caracteres a serem inseridos ao pressionar a tecla da guia. Por exemplo, para o 4 Space Indentation, tabSize será 4 e insertSpaces será true . Padrão: 2 .
insertSpaces ( boolean ): se deve usar espaços para recuo. Padrão: true . Se você o definir como false , também poderá definir tabSize como 1 .
ignoreTabKey ( boolean ): se o editor deve ignorar a tecla de guia pressiona para que os usuários do teclado possam guiar o editor. Os usuários podem alternar esse comportamento usando Ctrl+Shift+M (Mac) / Ctrl+M manualmente quando isso é false . Padrão: false .
padding ( number ): preenchimento opcional para código. Padrão: 0 .
textareaId ( string ): um id para a textarea subjacente pode ser útil para definir um label .
textareaClassName ( string ): um nome de classe para o textarea subjacente pode ser útil para um controle mais preciso de seus estilos.
preClassName ( string ): um nome de classe para o pre , pode ser útil para um controle mais preciso de seus estilos.

Demonstração

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

Como funciona

Funciona sobrepondo um bloco <pre> sintaxe destacado sobre um <textarea> . Ao digitar, selecionar, copiar o texto etc., você interage com o <textarea> subjacente, para que a experiência pareça nativa. Esta é uma abordagem muito simples em comparação com outros editores que reimpleem o comportamento.

O destaque da sintaxe pode ser feito por qualquer biblioteca de terceiros, desde que retorne HTML e seja totalmente controlável pelo usuário.

O Vanilla <textarea> não suporta caracteres de inserção da guia para recuperação, por isso o reimplementamos ouvindo os eventos keydown e atualizando programaticamente o texto. Uma advertência em atualizar programaticamente o texto é que perdemos a pilha de desfazer, por isso precisamos manter nossa própria pilha de desfazer. Como resultado, também podemos implementar comportamentos aprimorados de desfazer, como desfazer palavras inteiras semelhantes aos editores como o VSCode.

Limitações

Devido à maneira como funciona, tem certas limitações:

O código destacado da sintaxe não pode ter uma família de fontes diferentes, peso da fonte, estilo de fonte, altura da linha etc. para seu conteúdo. Como o editor trabalha alinhando o código destacado em uma <textarea> , alterar qualquer coisa que afete o layout pode desalinhar.
A pilha de desfazer personalizada é incompatível com o menu de contexto do navegador de desfazer/refazer. No entanto, outros editores completos de destaque não suportam itens de menu desfazer/refazer do navegador.
O editor não é otimizado para desempenho e documentos grandes podem afetar a velocidade de digitação.
Ocultamos o texto na textarea usando -webkit-text-fill-color: transparent , que funciona em todos os navegadores modernos (mesmo não-webkit como Firefox e Edge). No IE 10+, usamos color: transparent que não esconde o cursor. O texto pode parecer mais ousado em navegadores não suportados.