react simplemde editor
v5.2.0
React Component Wrapper untuk Easymde (garpu sederhana paling segar).
Hanya dua dependensi, React (Peer) dan Easymde (Peer).
Dibangun oleh @rip21?
easymde , codemirror atau cursor untuk dapat memanipulasinya.Daftar Isi Dihasilkan dengan Markdown-Toc
>=16.8.2easymde sekarang menjadi ketergantungan rekan, silakan instal secara manuallabel prop telah dihapusoptions [Breaking] harus dimoized untuk mencegah contoh baru dibuat pada setiap render dan lainnya terkait dengan bug itu (lebih lanjut tentang itu di bawah)ref , sehingga Anda dapat dengan mudah mendapatkan akses ke pembungkus div dengan menggunakan ref Prop.@babel/runtime helter tidak lagi dilengkapi tetapi diimpor. npm install --save react-simplemde-editor easymde
Catatan: Mungkin Anda mungkin perlu menginstal @babel/runtime , coba tanpanya, tetapi jika Anda tidak memiliki masalah, maka Anda tidak boleh.
Demo yang di -host
atau untuk melihatnya secara lokal:
git clone https://github.com/RIP21/react-simplemde-editor.git
cd react-simplemde-editor
yarn install
yarn demo
open browser at localhost:3000
Lihat kode demo untuk lebih banyak contoh.
Semua contoh di bawah ini ada di TypeScript
Penggunaan yang tidak terkendali
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 } /> ;
} ; Anda dapat mengatur API opsi SimpleMde yang Anda pastikan sebagai penyangga options . Jika Anda menggunakan naskah itu akan disimpulkan oleh kompiler.
Catatan: Jika Anda tidak menentukan ID khusus, ia akan secara otomatis menghasilkan ID untuk Anda.
Perhatikan bahwa Anda perlu useMemo options memoize sehingga tidak berubah pada setiap rerender! Ini akan memengaruhi perilaku dan kinerja karena pada setiap render orang tua yang membuat SimpleMdeReact Anda akan mendapatkan instance baru dari editor, yang pasti ingin Anda hindari! Juga, jika Anda mengubah options pada setiap perubahan value , Anda akan kehilangan fokus. Jadi, masukkan options sebagai const di luar komponen, atau jika options harus sebagian atau sepenuhnya ditetapkan oleh props pastikan untuk useMemo komponen fungsional/kait, atau bidang kelas untuk komponen berbasis class . Sedikit lebih banyak tentang itu di sini: #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 }
/>
) ;
} ; Anda dapat menyertakan peta kunci menggunakan prop extraKeys . Baca lebih lanjut di 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 >
) ;
} ;Lihat daftar lengkap acara di sini
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 atau cursor untuk dapat memanipulasinya. 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 >
) ;
} ;Inilah cara Anda melakukannya. Ini membutuhkan tiruan potongan browser tertentu untuk bekerja, tetapi ini adalah contoh utuh.
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
SimpleMdeReact - Sama seperti default tetapi bernama
Jenis:
SimpleMdeReactProps - Props of the Component
DOMEvent - Acara tertentu yang digunakan untuk mendapatkan acara yang diekspor di bawah ini
CopyEvents - Hanya Salin Acara Codemirror
GlobalEvents - Beberapa acara Codemirror global lainnya
DefaultEvent - Fungsi penangan event codemirror default
IndexEventsSignature - Indeks tanda tangan yang mengharapkan string sebagai kunci dan mengembalikan DefaultEvent
SimpleMdeToCodemirrorEvents - Acara yang dibuat secara manual (berdasarkan @types/[email protected] yang digunakan easymde secara internal) + semua yang digabungkan bersama menjadi pemetaan seluruh antara nama acara Codemirror dan penangan aktual untuk acara prop acara Prop events dan Acara Peristiwa ke dalam
GetMdeInstance - tanda tangan fungsi panggilan balik yang mengambil instance MDE
GetCodemirrorInstance - tanda tangan fungsi panggilan balik yang mengambil instance codemirror
GetLineAndCursor - tanda tangan fungsi panggilan balik yang mengambil info baris dan kursor
simplemde itu sendiri. Kemungkinan perubahan perubahan, jadi saya menabrak versi ke V4.simplemde/dist/simplemde.min.css sekarang akan menjadi easymde/dist/easymde.min.css initialValue Prop telah dihapus dan diganti dengan value prop, memungkinkan perubahan langsung pada nilai yang dibuat setelah komponen dipasang.Versi 1.0 tidak memiliki opsi sederhana yang dikonfigurasi dengan baik, readme ini mencerminkan perubahan yang dibuat untuk memasukkan opsi yang lebih baik. Ini masih merupakan proyek yang sangat baru. Pengujian, umpan balik, dan PR dipersilakan dan dihargai.
