react simple code editor 다운로드 - react simple code editor 소스 코드 다운로드

react simple code editor

기타 리소스

Release 0.14.1

다운로드

반응 단순 코드 편집기

구문 하이라이트가있는 간단한 프릴 코드 편집기.

왜

ACE, Codemirror, Monaco 등과 같은 여러 브라우저 기반 코드 편집기는 웹 페이지에 전체 기능을 갖춘 코드 편집기를 포함시킬 수있는 기능을 제공합니다. 그러나 추가 기능이없는 구문 강조 표시가있는 간단한 편집기가 필요한 경우 일반적으로 작은 번들 크기의 풋 프린트가 없기 때문에 과잉이 될 수 있습니다. 이 라이브러리는 추가 기능이없는 구문 강조 지원이있는 간단한 코드 편집기를 제공하는 것을 목표로합니다. 간단한 임베드 및 사용자가 코드를 제출할 수있는 양식에 적합합니다.

특징

타사 라이브러리로 강조 표시되는 모듈 식 구문
사용자 정의 가능한 들여 쓰기와 함께 탭 키를 눌러 인트 라인 또는 선택한 텍스트
새로운 라인의 자동 계약
선택한 텍스트를 파렌, 괄호 또는 따옴표로 랩합니다
편지로 문자 대신 전체 단어를 취소하십시오
액세스 가능, Ctrl+Shift+M (mac) / Ctrl+M 사용하여 탭 탭 키를 전환합니다.

설치

npm install react-simple-code-editor

또는

yarn add react-simple-code-editor

용법

구문 강조 표시를 제공하는 타사 라이브러리와 함께 편집기를 사용해야합니다. 예를 들어, 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 ,
      } }
    />
  ) ;
}

구문 형광펜에 따라 구문 강조 표시에 대한 추가 CSS를 포함해야 할 수도 있습니다.

소품

편집자는 textarea 수락 한 모든 소품을 수락합니다. 또한 다음 소품을 전달할 수 있습니다.

value ( string ) : 편집기의 현재 값, 즉 표시 할 코드입니다. 이것은 제어 된 소품이어야합니다.
onValueChange ( string => mixed ) : 편집기의 값이 변경 될 때 호출되는 콜백. 호출되면 값 소품을 업데이트해야합니다.
highlight ( string => string | React.Node ) : 강조 표시 할 텍스트를받을 콜백. prismjs 와 같은 라이브러리를 사용하여 HTML 문자열 또는 구문 강조 표시가있는 React 요소를 반환해야합니다.
tabSize ( number ) : 탭 키를 누를 때 삽입 할 문자 수입니다. 예를 들어, 4 개의 Space Intentation의 경우 tabSize 는 4 이고 insertSpaces true 입니다. 기본값 : 2 .
insertSpaces ( boolean ) : 들여 쓰기에 공간을 사용할지 여부. 기본값 : true . false 로 설정하면 tabSize 1 으로 설정할 수도 있습니다.
ignoreTabKey ( boolean ) : 편집기가 탭 키 프레스를 무시하여 키보드 사용자가 편집기를 지나서 탭 할 수 있도록 해야하는지 여부. 사용자는 Ctrl+Shift+M ( false ) / Ctrl+M 사용 하여이 동작을 전환 할 수 있습니다. 기본값 : false .
padding ( number ) : 코드 옵션 패딩. 기본값 : 0 .
textareaId ( string ) : 기본 textarea 의 ID는 label 설정하는 데 유용 할 수 있습니다.
textareaClassName ( string ) : 기본 textarea 의 클래스 이름은 스타일을보다 정확하게 제어하는 데 유용 할 수 있습니다.
preClassName ( string ) : 기본 pre 의 클래스 이름은 스타일을보다 정확하게 제어하는 데 유용 할 수 있습니다.

데모

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

작동 방식

<textarea> 통해 <pre> 블록 강조 표시된 구문을 오버레이하여 작동합니다. 입력하고 선택하고 텍스트를 복사하면 기본 <textarea> 와 상호 작용하므로 경험이 기본적으로 느껴집니다. 이것은 행동을 재 구현하는 다른 편집자에 비해 매우 간단한 접근법입니다.

구문 강조 표시는 HTML을 반환하는 한 모든 타사 라이브러리에서 수행 할 수 있으며 사용자가 완전히 제어 할 수 있습니다.

바닐라 <textarea> 들여 쓰기를 위해 탭 문자 삽입을 지원하지 않으므로 keydown 이벤트를 듣고 프로그래밍 방식으로 텍스트를 업데이트하여 다시 구현합니다. 프로그래밍 방식으로 텍스트를 업데이트 한 한 가지주의 사항은 실행 취소 스택을 잃어 버리므로 자신의 실행 취소 스택을 유지해야한다는 것입니다. 결과적으로 VSCODE와 같은 편집자와 유사한 전체 단어를 취소하는 것과 같은 개선 된 실행 취소 동작을 구현할 수도 있습니다.

제한

작동 방식으로 인해 특정 제한 사항이 있습니다.

구문 강조 표시된 코드는 콘텐츠에 대해 다른 글꼴 패밀리, 글꼴 무게, 글꼴 스타일, 라인 높이 등을 가질 수 없습니다. 편집기는 <textarea> 에 강조 표시된 코드를 정렬하여 작동하므로 레이아웃에 영향을 미치는 것을 변경하면이를 잘못 정렬 할 수 있습니다.
사용자 정의 취소 스택은 Undo/Redo 항목 브라우저의 컨텍스트 메뉴와 호환되지 않습니다. 그러나 다른 전체 특집 편집자는 브라우저의 실행 취소/레디 메뉴 항목도 지원하지 않습니다.
편집자는 성능에 최적화되지 않았으며 큰 문서는 타이핑 속도에 영향을 줄 수 있습니다.
우리는 모든 현대식 브라우저 (Firefox 및 Edge와 같은 비 베키트)에서 작동하는 -webkit-text-fill-color: transparent 사용하여 TextRea에서 텍스트를 숨 깁니다. IE 10+에서는 color: transparent . 텍스트는 지원되지 않는 브라우저에서 더 대담하게 보일 수 있습니다.