rich markdown editor

editor penurunan harga kaya

Editor berbasis React dan Prosemirror yang mendukung Outline dan juga dapat digunakan untuk menampilkan konten dalam mode read-only. Editornya adalah WYSIWYG dan menyertakan alat pemformatan sambil tetap mempertahankan kemampuan untuk menulis pintasan penurunan harga sebaris dan menghasilkan penurunan harga biasa. Lihat buku cerita demo langsung .

Catatan Penting: Proyek ini tidak berusaha menjadi editor Markdown yang serba guna . Ini dibuat untuk basis pengetahuan Outline, dan meskipun orang lain boleh menggunakan atau menggunakan paket ini pada produk Anda sendiri, keputusan pengembangan dipusatkan pada kebutuhan Outline.

Penggunaan

Memasang

yarn add rich-markdown-editor

atau

npm install rich-markdown-editor

Perhatikan bahwa react , react-dom , dan styled-components merupakan ketergantungan rekan yang diperlukan .

Impor

 import Editor from "rich-markdown-editor" ;

< Editor
  defaultValue = "Hello world!"
/>

Kloning repo ini dan jalankan Buku Cerita dengan yarn start untuk melihat berbagai macam contoh penggunaan.

Alat peraga

id

Id unik untuk editor ini, digunakan untuk mempertahankan pengaturan di penyimpanan lokal. Jika tidak ada id yang diteruskan maka editor akan menggunakan nama jalur lokasi secara default.

defaultValue

String penurunan harga yang mewakili nilai awal editor. Gunakan ini sebagai penyangga untuk memulihkan konten yang disimpan sebelumnya agar pengguna dapat melanjutkan pengeditan.

value

String penurunan harga yang mewakili nilai editor. Gunakan prop ini untuk mengubah nilai editor setelah dipasang, ini akan merender ulang seluruh editor dan karena itu hanya cocok jika juga dalam mode readOnly . Jangan menyalurkan nilai onChange kembali ke value , editor tetap mempertahankan status internalnya dan ini akan mengakibatkan efek samping yang tidak terduga.

placeholder

Memungkinkan penggantian placeholder. Standarnya adalah "Tulis sesuatu yang bagus...".

readOnly

Dengan readOnly disetel ke false editor dioptimalkan untuk komposisi. Jika true editor dapat digunakan untuk menampilkan konten yang ditulis sebelumnya – judul mendapatkan jangkar dan tautan menjadi dapat diklik.

readOnlyWriteCheckboxes

Dengan readOnlyWriteCheckboxes yang disetel ke true kotak centang masih dapat dicentang atau tidak dicentang sebagai kasus khusus sementara readOnly disetel ke true dan editor tidak dapat diedit.

autoFocus

Jika disetel ke true dan readOnly disetel ke false , fokus di akhir dokumen secara otomatis.

maxLength

Ketika set menerapkan panjang karakter maksimum pada dokumen, tidak termasuk sintaksis penurunan harga.

extensions

Mengizinkan plugin Prosemirror tambahan diteruskan ke instance Prosemirror yang mendasarinya.

disableExtensions

Daftar nama ekstensi yang disertakan untuk dinonaktifkan. Menghapus item menu dan perintah terkait. Misalnya setel ke ["em", "blockquote"] untuk menonaktifkan teks miring dan blockquote.

theme

Memungkinkan penggantian tema bawaan untuk memberi merek pada editor, misalnya menggunakan tampilan font dan warna merek Anda sendiri agar editor sesuai dengan aplikasi Anda. Lihat tema bawaan untuk contoh kunci yang harus disediakan.

dictionary

Memungkinkan penggantian kamus salinan bawaan, misalnya untuk menginternasionalkan editor. Lihat kamus bawaan untuk contoh kunci yang harus disediakan.

dark

Dengan dark disetel ke true editor akan menggunakan tema gelap default yang disertakan. Lihat sumbernya di sini.

dir

Bawaan: auto

Mengontrol arah dokumen. Nilai yang mungkin adalah:

• ltr : Tata letak editor dioptimalkan untuk dokumen LTR dan kontennya secara eksplisit ditandai sebagai LTR.
• rtl : Tata letak editor dioptimalkan untuk dokumen RTL dan kontennya secara eksplisit ditandai sebagai RTL.
• auto : Tata letak editor ditentukan oleh browser berdasarkan konten dokumen.

tooltip

Komponen React yang akan membungkus item yang memiliki tooltip opsional. Anda dapat menggunakan ini untuk memasukkan pustaka tooltip Anda sendiri ke dalam editor – komponen akan diteruskan dengan props berikut:

• tooltip : Node React dengan konten tooltip
• placement : Enum top , bottom , left , right
• children : Komponen yang dibungkus oleh tooltip, harus dirender

headingsOffset

Nomor yang akan mengimbangi judul dokumen dengan beberapa tingkatan. Misalnya, jika Anda sudah menyarangkan editor di bawah judul utama h1 Anda mungkin ingin pengguna hanya dapat membuat judul h2 dan di bawahnya, dalam hal ini Anda akan menyetel prop ke 1 .

scrollTo

Sebuah string yang mewakili jangkar judul – dokumen akan digulir dengan mulus sehingga judul terlihat di area pandang.

embeds

Secara opsional tentukan penyematan yang akan disisipkan sebagai pengganti tautan ketika fungsi matcher mengembalikan nilai kebenaran. Nilai kembalian metode matcher akan tersedia pada komponen di bawah props.attrs.matches . Jika title dan icon disediakan maka penyematan juga akan muncul di menu blok.

 < Editor
  embeds = { [
    {
      title : "Google Doc" ,
      keywords : "google docs gdocs" ,
      icon : < GoogleDocIcon /> ,
      defaultHidden : false ,
      matcher : href => href . matches ( / docs.google.com / i ) ,
      component : GoogleDocEmbed
    }
  ] }
/>

Panggilan balik

uploadImage(file: Blob): Promise<string>

Jika Anda ingin editor mendukung gambar maka panggilan balik ini harus disediakan. Callback harus menerima satu objek File dan mengembalikan janji resolusi ke url ketika gambar telah diunggah ke lokasi penyimpanan, misalnya S3. misalnya:

 < Editor
  uploadImage = { async file => {
    const result = await s3 . upload ( file ) ;
    return result . url ;
  } }
/> 

onBlur(): void

Callback ini dipicu ketika pengguna kehilangan fokus pada konten editor yang dapat diedit dan semua elemen UI terkait seperti menu blok dan toolbar mengambang. Jika Anda ingin mendengarkan peristiwa blur hanya pada area yang dapat diedit, gunakan props handleDOMEvents .

onFocus(): void

Callback ini dipicu ketika pengguna mendapatkan fokus pada konten editor yang dapat diedit atau elemen UI terkait seperti menu blok atau toolbar mengambang. Jika Anda ingin mendengarkan peristiwa fokus hanya pada area yang dapat diedit, gunakan props handleDOMEvents .

onSave({ done: boolean }): void

Callback ini dipicu ketika pengguna secara eksplisit meminta untuk menyimpan menggunakan pintasan keyboard, Cmd+S atau Cmd+Enter . Anda dapat menggunakan ini sebagai sinyal untuk menyimpan dokumen ke server jauh.

onCancel(): void

Callback ini terpicu ketika Cmd+Escape ditekan di dalam editor. Anda dapat menggunakannya untuk membatalkan pengeditan.

onChange(() => value): void

Callback ini dipicu ketika konten editor berubah, biasanya karena input pengguna seperti penekanan tombol atau penggunaan opsi pemformatan. Anda dapat menggunakan ini untuk mempertahankan status editor secara lokal.

Ini mengembalikan fungsi yang ketika dipanggil mengembalikan nilai teks dokumen saat ini. Pengoptimalan ini dilakukan untuk menghindari serialisasi status dokumen menjadi teks pada setiap peristiwa perubahan, sehingga aplikasi host dapat memilih kapan memerlukan nilai serial.

onImageUploadStart(): void

Callback ini dipicu sebelum uploadImage dan dapat digunakan untuk menampilkan beberapa UI yang menunjukkan upload sedang berlangsung.

onImageUploadStop(): void

Dipicu setelah upload gambar berhasil atau gagal.

onSearchLink(term: string): Promise<{ title: string, subtitle?: string, url: string }[]>

Editor menyediakan kemampuan untuk mencari tautan untuk disisipkan dari toolbar pemformatan. Jika panggilan balik ini disediakan, ia harus menerima istilah pencarian sebagai satu-satunya parameter dan mengembalikan janji yang menyelesaikan array objek. misalnya:

 < Editor
  onSearchLink = { async searchTerm => {
    const results = await MyAPI . search ( searchTerm ) ;

    return results . map ( result => {
      title : result . name ,
      subtitle : `Created ${ result . createdAt } ` ,
      url : result . url
    } )
  } }
/> 

onCreateLink(title: string): Promise<string>

Editor menyediakan kemampuan untuk membuat tautan dari toolbar pemformatan untuk pembuatan dokumen sambil jalan. Jika panggilan balik ini disediakan, ia harus menerima tautan "judul" sebagai satu-satunya parameter dan mengembalikan janji yang menghasilkan url untuk tautan yang dibuat, misalnya:

 < Editor
  onCreateLink = { async title => {
    const url = await MyAPI . create ( {
      title
    } ) ;

    return url ;
  } }
/> 

onShowToast(message: string, type: ToastType): void

Dipicu ketika editor ingin menampilkan pesan kepada pengguna. Hubungkan ke sistem notifikasi aplikasi Anda, atau gunakan secara sederhana window.alert(message) . Parameter kedua adalah jenis roti panggang: 'kesalahan' atau 'info'.

onClickLink(href: string, event: MouseEvent): void

Panggilan balik ini memungkinkan penggantian penanganan tautan. Seringkali Anda ingin tautan eksternal membuka jendela baru dan tautan internal menggunakan sesuatu seperti react-router untuk bernavigasi. Jika tidak ada panggilan balik yang diberikan maka perilaku default membuka tab baru akan berlaku untuk semua tautan. misalnya:

 import { history } from "react-router" ;

< Editor
  onClickLink = { ( href , event ) => {
    if ( isInternalLink ( href ) ) {
      history . push ( href ) ;
    } else {
      window . location . href = href ;
    }
  } }
/> 

onHoverLink(event: MouseEvent): boolean

Callback ini memungkinkan pendeteksian ketika pengguna mengarahkan kursor ke link dalam dokumen.

 < Editor
  onHoverLink = { event => {
    console . log ( `Hovered link ${ event . target . href } ` ) ;
  } }
/> 

onClickHashtag(tag: string, event: MouseEvent): void

Callback ini memungkinkan penanganan mengklik hashtag di teks dokumen. Jika tidak ada panggilan balik yang diberikan maka hashtag akan ditampilkan sebagai teks biasa, sehingga Anda dapat memilih apakah akan mendukungnya atau tidak dengan meneruskan prop ini.

 import { history } from "react-router" ;

< Editor
  onClickHashtag = { tag => {
    history . push ( `/hashtags/ ${ tag } ` ) ;
  } }
/> 

handleDOMEvents: {[name: string]: (view: EditorView, event: Event) => boolean;}

Objek ini memetakan nama peristiwa ( focus , paste , touchstart , dll.) ke fungsi panggilan balik.

 < Editor
  handleDOMEvents = { {
    focus : ( ) => console . log ( "FOCUS" ) ,
    blur : ( ) => console . log ( "BLUR" ) ,
    paste : ( ) => console . log ( "PASTE" ) ,
    touchstart : ( ) => console . log ( "TOUCH START" ) ,
  } }
/>

Antarmuka

Komponen Editor memaparkan beberapa metode untuk berinteraksi dengan editor yang terpasang.

focusAtStart(): void

Tempatkan kursor di awal dokumen dan fokuskan.

focusAtEnd(): void

Tempatkan kursor di akhir dokumen dan fokuskan.

getHeadings(): { title: string, level: number, id: string }[]

Mengembalikan array objek dengan konten teks dari semua judul dalam dokumen, levelnya dalam hierarki, dan id jangkar. Ini berguna untuk membuat daftar isi Anda sendiri karena opsi toc telah dihapus di v10.

Berkontribusi

Proyek ini menggunakan benang untuk mengelola dependensi. Anda dapat menggunakan npm namun itu tidak akan menghormati file kunci benang dan mungkin menginstal versi yang sedikit berbeda.

 yarn install

Saat dijalankan dalam pengembangan, Buku Cerita disertakan ke editor contoh dengan hot reload. Setelah menginstal dependensi, jalankan yarn start berjalan.

Saat mengembangkan menggunakan yarn link , Anda dapat menggunakan yarn watch untuk terus membangun kembali perubahan menjadi dist saat Anda melakukan perubahan.

Lisensi

Proyek ini berlisensi BSD.