react simplemde editor
v5.2.0
EasyMde（最も新鮮なSimplemdeフォーク）の反応コンポーネントラッパー。
React（Peer）とEasyMde（ピア）の2つの依存関係のみ。
@rip21？によって構築されています
easymde 、 codemirror 、またはcursor情報を取得して、操作できるようにします。MarkDown-TOCで生成された目次
>=16.8.2easymde今すぐピア依存関係になります。手動でインストールしてくださいlabel小道具が削除されましたoptions 、そのバグに関連する各レンダリングおよびその他の新しいインスタンスが作成されるのを防ぐためにメモ化されなければならない（詳細については以下）refを使用するためdiv ref Prop。@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 Propとして渡すSimplemdeオプションのAPIを設定できます。 TypeScriptを使用している場合、コンパイラによって推測されます。
注：カスタムIDを指定しないと、自動的にIDが生成されます。
optionsをメモ化するには、各rerenderで変更されないようにするために、 useMemo必要であることに注意してください。それは行動とパフォーマンスに影響を与えます。なぜなら、 SimpleMdeReactをレンダリングする親の各レンダリングで、あなたが間違いなく避けたいエディターの新しいインスタンスを取得するからです。また、各value変更でoptions変更すると、フォーカスが失われます。したがって、コンポーネントの外側のconstとしてoptionsを配置するか、 options propsによって部分的または完全に設定されている場合は、機能/フックコンポーネント、または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 Propを使用してキーマップを含めることができます。 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 >
) ;
} ;ここでイベントの完全なリストを参照してください
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
SimpleMdeReact defaultと同じですが、名前が付けられています
種類：
SimpleMdeReactPropsコンポーネントの小道具DOMEvent - 以下にイベントをエクスポートするために使用される特定のイベントCopyEvents -CodeMirrorイベントのみをコピーしますGlobalEventsその他のグローバルコードミラーイベントDefaultEvent -Default CodeMirrorイベントハンドラー関数IndexEventsSignature文字列をキーとして期待し、 DefaultEventを返すインデックス署名SimpleMdeToCodemirrorEvents手動で作成されたイベント（ easymdeが内部で使用するevents @types/[email protected]に基づく）
GetMdeInstance -MDEインスタンスを取得するコールバック関数の署名GetCodemirrorInstance -CodeMirrorインスタンスを取得するコールバック関数の署名GetLineAndCursor行とカーソル情報を取得するコールバック関数の署名
simplemde自体の代わりに、easymde（最も新鮮なsimplemdeフォーク）を使用するようになりました。壊れる可能性のある変化の可能性があるため、バージョンをV4にバンプしました。simplemde/dist/simplemde.min.cssであったのでeasymde/dist/easymde.min.cssになりますinitialValue値の小道具は削除され、 valueプロップに置き換えられ、コンポーネントがマウントされた後に値を直接変更することができます。バージョン1.0には、適切に構成されたSimpleMdeオプションがありませんでした。このREADMEは、より良いものを含めるように行われた変更を反映しています。これはまだ非常に新しいプロジェクトです。テスト、フィードバック、PRSは歓迎され、大歓迎です。
