react simplemde editor

React Simplemde (easymde) ตัวแก้ไข Markdown

wrapper ส่วนประกอบตอบสนองสำหรับ easymde (Simplemde Fork ที่สดใหม่ที่สุด)

มีเพียงสองการพึ่งพาปฏิกิริยา (เพียร์) และ easymde (เพียร์)

สร้างโดย @RIP21? ‍

• ใหม่ใน v5
• ติดตั้ง
• การสาธิต
• การใช้งาน
  • การใช้งานควบคุม
  • ตัวเลือก
  • คีย์
  • ตัวอย่างการแสดงผลตัวอย่างที่กำหนดเอง
  • กิจกรรม / ผู้ฟังเหตุการณ์เพิ่มเติมสำหรับกิจกรรมของ Codemirror
  • การประหยัดอัตโนมัติ
  • ดึงข้อมูล easymde , codemirror หรือ cursor เพื่อให้สามารถจัดการได้
  • การทดสอบขั้นพื้นฐาน
• API
  • อุปกรณ์ประกอบฉาก
  • รายการส่งออกทั้งหมด
• การเปลี่ยนแปลง
  • ใหม่ใน v4
  • ใหม่ใน v3
  • ใหม่ใน v2

สารบัญที่สร้างขึ้นด้วย markdown-toc

ใหม่ใน v5

• [Breaking] Full rewrite to Hooks หมายถึงปฏิกิริยาที่มากขึ้นดังนั้นอาจมีข้อบกพร่องที่เกี่ยวข้องกับการอัปเดตน้อยลง ต้องใช้เวอร์ชันปฏิกิริยาขั้นต่ำ >=16.8.2
• [ทำลาย] easymde ตอนนี้เป็นผู้พึ่งพาเพียร์โปรดติดตั้งด้วยตนเอง
• [ทำลาย] เสา label ถูกลบออก
• [การทำลาย] อวนที่ปลอดภัย SSR ลบออกโปรดตรวจสอบให้แน่ใจว่าได้นำเข้าแบบไดนามิก
• [การทำลาย] options จะได้รับการบันทึกเพื่อป้องกันไม่ให้อินสแตนซ์ใหม่ถูกสร้างขึ้นในการแสดงผลแต่ละครั้งและอื่น ๆ ที่เกี่ยวข้องกับข้อบกพร่องนั้น (เพิ่มเติมที่ด้านล่าง)
• [อาจทำลาย] ส่งต่อการ ref ดังนั้นคุณสามารถเข้าถึง wrapper div ได้อย่างง่ายดายโดยใช้ ref Prop
• [อาจทำลายได้] ข้อบกพร่องจำนวนมากคงที่ตัวอย่างอัปเดต
• [อาจทำลายล้าง] @babel/runtime Helpers ไม่ได้ถูกนำมาใช้อีกต่อไป แต่นำเข้าอีกต่อไป

ติดตั้ง

 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 } /> ;
} ;

ตัวเลือก

คุณสามารถตั้งค่าตัวเลือก API ของ Simplemde ซึ่งคุณผ่านเป็น options Prop หากคุณใช้ TypeScript มันจะถูกอนุมานโดยคอมไพเลอร์

หมายเหตุ: หากคุณไม่ได้ระบุ ID ที่กำหนดเองมันจะสร้าง ID ให้คุณโดยอัตโนมัติ

โปรดทราบว่าคุณต้อง useMemo เพื่อบันทึก options ดังนั้นพวกเขาจึงไม่เปลี่ยนแปลงในแต่ละ RERENDER! มันจะส่งผลกระทบต่อพฤติกรรมและประสิทธิภาพเพราะในแต่ละการแสดงผลของผู้ปกครองที่ทำให้ SimpleMdeReact คุณจะได้รับอินสแตนซ์ใหม่ของตัวแก้ไขซึ่งคุณต้องการหลีกเลี่ยง! นอกจากนี้หากคุณเปลี่ยนตัว options ในการเปลี่ยนแปลง value แต่ละครั้งคุณจะสูญเสียโฟกัส ดังนั้นใส่ options เป็น const นอกส่วนประกอบหรือหาก options จะต้องตั้งค่าบางส่วนหรือทั้งหมดโดย props สอบให้แน่ใจว่าได้ useMemo ในกรณีของส่วนประกอบการทำงาน/hooks หรือฟิลด์คลาสสำหรับส่วนประกอบตาม class เพิ่มเติมเล็กน้อยเกี่ยวกับที่นี่: #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 }
    />
  ) ;
} ;

คีย์

คุณสามารถรวมแผนที่คีย์โดยใช้ Prop extraKeys อ่านเพิ่มเติมได้ที่ปุ่มพิเศษ 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 >
  ) ;
} ;

กิจกรรม / ผู้ฟังเหตุการณ์เพิ่มเติมสำหรับกิจกรรมของ Codemirror

ดูรายการกิจกรรมทั้งหมดที่นี่

 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 ( ) ;
  } ) ;
} ) ; 

API

อุปกรณ์ประกอบฉาก

 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 - กิจกรรม Codemirror ระดับโลกอื่น ๆ

DefaultEvent - ฟังก์ชั่นตัวจัดการเหตุการณ์ codemirror เริ่มต้น

IndexEventsSignature - ลายเซ็นดัชนีที่คาดว่าสตริงเป็นคีย์และส่งคืน DefaultEvent

SimpleMdeToCodemirrorEvents - เหตุการณ์ที่สร้างขึ้นด้วยตนเอง (อิงจาก @types/[email protected] ที่ easymde ใช้ภายใน) + ทั้งหมดที่รวมอยู่ด้วยกันเข้าด้วยกันในการทำแผนที่ทั้งหมดระหว่างชื่อ events codemirror และตัวจัดการจริง

GetMdeInstance - ลายเซ็นของฟังก์ชั่นการโทรกลับที่ดึงอินสแตนซ์ MDE

GetCodemirrorInstance - ลายเซ็นของฟังก์ชันการโทรกลับที่ดึงอินสแตนซ์ codemirror

GetLineAndCursor - ลายเซ็นของฟังก์ชั่นการโทรกลับที่ดึงข้อมูล Line และ Cursor

การเปลี่ยนแปลง

ใหม่ใน v4

• ตอนนี้ใช้ easymde (Simplemde Fork ที่สดใหม่ที่สุด) แทนที่จะเป็น simplemde เอง การเปลี่ยนแปลงที่อาจเกิดขึ้นได้ดังนั้นฉันจึงชนเวอร์ชันเป็น V4
• การเปลี่ยนแปลงที่ชัดเจนอย่างเห็นได้ชัด จะต้องนำเข้า CSS อย่างไร มันเคยเป็น simplemde/dist/simplemde.min.css ตอนนี้มันจะเป็น easymde/dist/easymde.min.css

ใหม่ใน v3

• เสา initialValue ได้ถูกลบออกและแทนที่ด้วย prop value ช่วยให้การเปลี่ยนแปลงโดยตรงกับค่าที่จะทำหลังจากการติดตั้งส่วนประกอบ
• v3.6.8 หากการเรนเดอร์ฝั่งเซิร์ฟเวอร์คุณสามารถตั้งค่า ID แบบคงที่เพื่อหลีกเลี่ยงข้อผิดพลาดในการซิงโครไนซ์การแสดงผล
• เพิ่ม v3.6.17 การพิมพ์ typescript
• v3.6.19 อุปกรณ์ประกอบฉากทั้งหมดจะถูกส่งไปยังเสื้อคลุมตอนนี้ (ยกเว้น ID, onchange และอื่น ๆ อีกไม่กี่ที่ถูกเพิกเฉย)
• v3.6.21 การสนับสนุน React 17 (ไม่ได้ใช้วิธีการที่ไม่ปลอดภัยอีกต่อไป)

ใหม่ใน v2

เวอร์ชัน 1.0 ไม่มีตัวเลือก Simplemde ที่กำหนดค่าไว้อย่างดี readme นี้สะท้อนให้เห็นถึงการเปลี่ยนแปลงที่เกิดขึ้นเพื่อรวมตัวเลือกที่ดีกว่า นี่ยังคงเป็นโครงการใหม่มาก การทดสอบข้อเสนอแนะและ PRS ยินดีต้อนรับและชื่นชม