react simplemde editor
v5.2.0
Reagieren Sie die Komponentenverpackung für EASYMDE (die frischste Simplemde -Gabel).
Nur zwei Abhängigkeiten, React (Peer) und Easymde (Peer).
Gebaut von @RIP21?
easymde , codemirror oder cursor -Info ab, um sie manipulieren zu können.Inhaltsverzeichnis, die mit Markdown-TOC erzeugt werden
>=16.8.2easymde jetzt eine Abhängigkeit von Gleichaltrigen, bitte installieren Sie sie manuelllabel -Prop wurde entferntoptions müssen meieriert werden, um zu verhindern, dass neue Instanzen für jedes Rendern und andere mit diesen Bugs erstellt werden (mehr dazu unten)ref , sodass Sie mithilfe von ref Prop problemlos Zugriff auf div Wrapper erhalten können.@babel/runtime sind nicht mehr eingeführt, sondern importiert. npm install --save react-simplemde-editor easymde
Hinweis: Möglicherweise müssen Sie möglicherweise @babel/runtime installieren, versuchen Sie es ohne, aber wenn Sie keine Probleme haben, sollten Sie es nicht tun.
Hosted Demo
oder um es lokal zu sehen:
git clone https://github.com/RIP21/react-simplemde-editor.git
cd react-simplemde-editor
yarn install
yarn demo
open browser at localhost:3000
Weitere Beispiele finden Sie im Demo -Code.
Alle folgenden Beispiele finden Sie in TypeScript
Unkontrollierte Verwendung
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 } /> ;
} ; Sie können eine API von Simplemde -Optionen festlegen, die Sie als options -Requisiten geben. Wenn Sie TypeScript verwenden, wird dies vom Compiler abgeleitet.
Hinweis: Wenn Sie keine benutzerdefinierte ID angeben, generiert sie automatisch eine ID für Sie.
Beachten Sie, dass Sie useMemo benötigen müssen, um options zu meinen, damit sie nicht jeden Ranender ändern! Es wird sich auf das Verhalten und die Leistung auswirken, da Sie dann bei jedem Render des SimpleMdeReact Elternteils eine neue Instanz des Herausgebers erhalten, die Sie auf jeden Fall vermeiden möchten! Wenn Sie options für jede value ändern, verlieren Sie auch den Fokus. Stellen Sie also options als const außerhalb der Komponente ein oder wenn options teilweise oder vollständig durch props eingestellt werden müssen, stellen Sie bei Funktions-/Hooks -Komponenten oder Klassenfeld für class Komponenten sicher, dass useMemo sind. Etwas mehr dazu hier: #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 }
/>
) ;
} ; Sie können wichtige Karten mithilfe der extraKeys -Propie einfügen. Lesen Sie mehr bei Codemirror Extra Keys
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 >
) ;
} ;Hier finden Sie die vollständige Liste der Ereignisse hier
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 oder cursor -Info ab, um sie manipulieren zu können. 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 >
) ;
} ;So machst du es. Es erfordert, dass bestimmte Browser -Stücke funktionieren, aber dies ist ein ganzes Beispiel.
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 - SimpleMerDerAct
SimpleMdeReact - gilt als default , aber benannt
Typen:
SimpleMdeReactProps - Requisiten der Komponente
DOMEvent - bestimmte Ereignisse, mit denen Ereignisse unten exportiert werden
CopyEvents - kopieren Sie Codemirror -Ereignisse nur
GlobalEvents - einige andere globale Codemirror -Ereignisse
DefaultEvent - Standard -Codemirror -Ereignishandlerfunktion
IndexEventsSignature - Indexsignatur, die die Zeichenfolge als Schlüssel erwartet und DefaultEvent gibt
SimpleMdeToCodemirrorEvents - Manuell gestaltete Ereignisse (basierend auf @types/[email protected] , die easymde intern verwendet) + alle oben genannten haben sich zu einer gesamten Zuordnung zwischen Codemrror -Ereignisnamen und tatsächlichen Handlern für events miteinander verschmolzen.
GetMdeInstance - Signatur der Rückruffunktion, die die MDE -Instanz abruft
GetCodemirrorInstance - Signatur der Rückruffunktion, die die Codemirror -Instanz abruft
GetLineAndCursor - Signatur der Rückruffunktion, die Zeilen- und Cursor -Info abgerufen
simplemde selbst. Mögliche Breaking -Änderungen, also habe ich die Version auf V4 gestoßen.simplemde/dist/simplemde.min.css jetzt wird es easymde/dist/easymde.min.css sein initialValue -Requisite wurde entfernt und durch eine value ersetzt, sodass die direkten Änderungen des Werts nach den Komponentenmontage vorgenommen werden können.Version 1.0 hatte keine Simplemde -Optionen gut konfiguriert. Diese Readme spiegelt die Änderungen wider, die vorgenommen wurden, um Optionen zu enthalten. Dies ist immer noch ein sehr neues Projekt. Tests, Feedback und PRs sind willkommen und geschätzt.
