react simplemde editor
v5.2.0
Easymde (가장 신선한 단순한 포크)에 대한 구성 요소 래퍼를 반응합니다.
REACT (PEER) 및 EASYMDE (피어)의 두 가지 종속성 만.
@rip21? 에 의해 제작되었습니다
easymde , codemirror 또는 cursor 정보를 검색하여 조작 할 수 있습니다.Markdown-Toc으로 생성 된 목차
>=16.8.2easymde 이제 피어 의존성이 있습니다. 수동으로 설치하십시오.label 소품이 제거되었습니다options 각 렌더링 및 해당 버그와 관련된 새로운 인스턴스가 생성되는 것을 방지하기 위해 메모를 메모해야합니다 (아래에 더 자세히 설명).ref 통해 ref Prop을 사용하여 div 래퍼에 쉽게 액세스 할 수 있습니다.@babel/runtime 헬퍼는 더 이상 감소되지 않지만 수입됩니다. npm install --save react-simplemde-editor easymde
참고 : @babel/runtime 설치해야 할 수도 있습니다.
호스팅 된 데모
또는 로컬에서 볼 수 있으려면 :
git clone https://github.com/RIP21/react-simplemde-editor.git
cd react-simplemde-editor
yarn install
yarn demo
open browser at localhost:3000
더 많은 예를 보려면 데모 코드를보십시오.
아래의 모든 예는 TypeScript입니다
통제되지 않은 사용
import React from "react" ;
import SimpleMDE from "react-simplemde-editor" ;
import "easymde/dist/easymde.min.css" ;
< SimpleMDE /> ; export const ControlledUsage = ( ) => {
const [ value , setValue ] = useState ( "Initial value" ) ;
const onChange = useCallback ( ( value : string ) => {
setValue ( value ) ;
} , [ ] ) ;
return < SimpleMdeReact value = { value } onChange = { onChange } /> ;
} ; options 소품으로 전달되는 단순한 옵션의 API를 설정할 수 있습니다. TypeScript를 사용하는 경우 컴파일러에 의해 추론됩니다.
참고 : 사용자 정의 ID를 지정하지 않으면 자동으로 ID가 생성됩니다.
옵션이 각 레더에서 변경되지 않도록 options 메모하려면 useMemo 필요합니다! 행동과 성능에 영향을 미칩니다. 그러면 SimpleMdeReact 렌더링하는 부모의 각 렌더링마다 편집자의 새로운 인스턴스를 얻을 수 있기 때문입니다. 또한 각 value 변경에 대한 options 변경하면 집중력을 잃게됩니다. 따라서 options 구성 요소 외부의 const 로 넣거나, props 으로 options 부분적으로 또는 완전히 설정 해야하는 경우 기능/후크 구성 요소 또는 class 기반 구성 요소의 클래스 필드의 경우 useMemo 를 확인하십시오. 여기에 약간 더 많은 것 : #164
export const UsingOptions = ( ) => {
const [ value , setValue ] = useState ( "Initial" ) ;
const onChange = useCallback ( ( value : string ) => {
setValue ( value ) ;
} , [ ] ) ;
const autofocusNoSpellcheckerOptions = useMemo ( ( ) => {
return {
autofocus : true ,
spellChecker : false ,
} as SimpleMDE . Options ;
} , [ ] ) ;
return (
< SimpleMdeReact
options = { autofocusNoSpellcheckerOptions }
value = { value }
onChange = { onChange }
/>
) ;
} ; extraKeys props를 사용하여 키 맵을 포함시킬 수 있습니다. Codemirror 추가 키에서 자세히 알아보십시오
export const UpdateableByHotKeys = ( ) => {
const extraKeys = useMemo < KeyMap > ( ( ) => {
return {
Up : function ( cm ) {
cm . replaceSelection ( " surprise. " ) ;
} ,
Down : function ( cm ) {
cm . replaceSelection ( " surprise again! " ) ;
} ,
} ;
} , [ ] ) ;
const [ value , setValue ] = useState ( "initial" ) ;
const onChange = ( value : string ) => setValue ( value ) ;
return (
< SimpleMdeReact value = { value } onChange = { onChange } extraKeys = { extraKeys } />
) ;
} ; import ReactDOMServer from "react-dom/server" ;
export const CustomPreview = ( ) => {
const customRendererOptions = useMemo ( ( ) => {
return {
previewRender ( ) {
return ReactDOMServer . renderToString (
< ReactMarkdown
source = { text }
renderers = { {
CodeBlock : CodeRenderer ,
Code : CodeRenderer ,
} }
/>
) ;
} ,
} as SimpleMDE . Options ;
} , [ ] ) ;
return (
< div >
< h4 > Custom preview </ h4 >
< SimpleMdeReact options = { customRendererOptions } />
</ div >
) ;
} ;여기에서 전체 이벤트 목록을 참조하십시오
import { SimpleMdeReact } from "react-simplemde-editor" ;
import type { SimpleMdeToCodemirrorEvents } from "react-simplemde-editor" ;
export const CustomEventListeners = ( ) => {
const [ value , setValue ] = useState ( "Initial value" ) ;
const onChange = useCallback ( ( value : string ) => {
setValue ( value ) ;
} , [ ] ) ;
// Make sure to always `useMemo` all the `options` and `events` props to ensure best performance!
const events = useMemo ( ( ) => {
return {
focus : ( ) => console . log ( value ) ,
} as SimpleMdeToCodemirrorEvents ;
} , [ ] ) ;
return < SimpleMdeReact events = { events } value = { value } onChange = { onChange } /> ;
} ; export const Autosaving = ( ) => {
const delay = 1000 ;
const autosavedValue = localStorage . getItem ( `smde_demo` ) || "Initial value" ;
const anOptions = useMemo ( ( ) => {
return {
autosave : {
enabled : true ,
uniqueId : "demo" ,
delay ,
} ,
} ;
} , [ delay ] ) ;
return (
< SimpleMdeReact id = "demo" value = { autosavedValue } options = { anOptions } />
) ;
} ;easymde , codemirror 또는 cursor 정보를 검색하여 조작 할 수 있습니다. export const GetDifferentInstances = ( ) => {
// simple mde
const [ simpleMdeInstance , setMdeInstance ] = useState < SimpleMDE | null > ( null ) ;
const getMdeInstanceCallback = useCallback ( ( simpleMde : SimpleMDE ) => {
setMdeInstance ( simpleMde ) ;
} , [ ] ) ;
useEffect ( ( ) => {
simpleMdeInstance &&
console . info ( "Hey I'm editor instance!" , simpleMdeInstance ) ;
} , [ simpleMdeInstance ] ) ;
// codemirror
const [ codemirrorInstance , setCodemirrorInstance ] = useState < Editor | null > (
null
) ;
const getCmInstanceCallback = useCallback ( ( editor : Editor ) => {
setCodemirrorInstance ( editor ) ;
} , [ ] ) ;
useEffect ( ( ) => {
codemirrorInstance &&
console . info ( "Hey I'm codemirror instance!" , codemirrorInstance ) ;
} , [ codemirrorInstance ] ) ;
// line and cursor
const [ lineAndCursor , setLineAndCursor ] = useState < Position | null > ( null ) ;
const getLineAndCursorCallback = useCallback ( ( position : Position ) => {
setLineAndCursor ( position ) ;
} , [ ] ) ;
useEffect ( ( ) => {
lineAndCursor &&
console . info ( "Hey I'm line and cursor info!" , lineAndCursor ) ;
} , [ lineAndCursor ] ) ;
return (
< div >
< h4 > Getting instance of Mde and codemirror and line and cursor info </ h4 >
< SimpleMdeReact
value = "Go to console to see stuff logged"
getMdeInstance = { getMdeInstanceCallback }
getCodemirrorInstance = { getCmInstanceCallback }
getLineAndCursor = { getLineAndCursorCallback }
/>
</ div >
) ;
} ;여기에 당신이하는 방법은 다음과 같습니다. 특정 브라우저 조각의 조롱이 필요하지만 이것이 전체 예입니다.
import { act , render , screen } from "@testing-library/react" ;
import { useState } from "react" ;
import { SimpleMdeReact } from "react-simplemde-editor" ;
import userEvent from "@testing-library/user-event" ;
// @ts-ignore
Document . prototype . createRange = function ( ) {
return {
setEnd : function ( ) { } ,
setStart : function ( ) { } ,
getBoundingClientRect : function ( ) {
return { right : 0 } ;
} ,
getClientRects : function ( ) {
return {
length : 0 ,
left : 0 ,
right : 0 ,
} ;
} ,
} ;
} ;
const Editor = ( ) => {
const [ value , setValue ] = useState ( "" ) ;
return < SimpleMdeReact value = { value } onChange = { setValue } /> ;
} ;
describe ( "Renders" , ( ) => {
it ( "succesfully" , async ( ) => {
act ( ( ) => {
render ( < Editor /> ) ;
} ) ;
const editor = await screen . findByRole ( "textbox" ) ;
userEvent . type ( editor , "hello" ) ;
expect ( screen . getByText ( "hello" ) ) . toBeDefined ( ) ;
} ) ;
} ) ; export interface SimpleMDEReactProps
extends Omit < React . HTMLAttributes < HTMLDivElement > , "onChange" > {
id ?: string ;
onChange ?: ( value : string , changeObject ?: EditorChange ) => void ;
value ?: string ;
extraKeys ?: KeyMap ;
options ?: SimpleMDE . Options ;
events ?: SimpleMdeToCodemirrorEvents ;
getMdeInstance ?: GetMdeInstance ;
getCodemirrorInstance ?: GetCodemirrorInstance ;
getLineAndCursor ?: GetLineAndCursor ;
placeholder ?: string ;
textareaProps ?: Omit <
React . HTMLAttributes < HTMLTextAreaElement > ,
"id" | "style" | "placeholder"
> ;
} default - 단순화
SimpleMdeReact default 과 동일하지만 이름이 지정됩니다
유형 :
SimpleMdeReactProps 구성 요소의 소품
DOMEvent 이벤트를 아래에 내보내는 데 사용되는 특정 이벤트
CopyEvents Codemirror 이벤트 만 복사합니다
GlobalEvents 다른 글로벌 코드 미러 이벤트
DefaultEvent 기본 Codemirror 이벤트 핸들러 기능
IndexEventsSignature 문자열을 키로 기대하고 DefaultEvent 반환하는 인덱스 서명
SimpleMdeToCodemirrorEvents 수동으로 제작 된 이벤트 ( easymde 내부적으로 사용하는 @types/[email protected] 기반) + 위의 모든 것은 Codemirror 이벤트 이름과 events 소품에 대한 실제 핸들러 간의 전체 매핑으로 합쳐졌습니다.
GetMdeInstance MDE 인스턴스를 검색하는 콜백 함수의 서명
GetCodemirrorInstance Codemirror 인스턴스를 검색하는 콜백 함수의 서명
GetLineAndCursor 라인 및 커서 정보를 검색하는 콜백 함수의 서명
simplemde 자체 대신 Easymde (가장 신선한 단순한 포크)를 사용합니다. 깨지는 변화가 있으므로 v4에 버전을 부딪쳤다.simplemde/dist/simplemde.min.css 이제 easymde/dist/easymde.min.css 가 될 것입니다. initialValue 소품이 제거되어 value 소품으로 대체되어 구성 요소 마운트 후에 이루어질 값을 직접 변경할 수 있습니다.버전 1.0은 단순한 옵션이 잘 구성되지 않았 으며이 readme에는 옵션이 더 잘 포함되도록 변경 사항을 반영합니다. 이것은 여전히 매우 새로운 프로젝트입니다. 테스트, 피드백 및 PR을 환영하고 감사합니다.
