NABI NOTE
Dokumentasi

Perbandingan ​

Bandingkan dua dokumen tersimpan untuk melihat perubahan. Tampilan dapat dibuka tanpa editor; sambungkan callback untuk menerapkan konten lama yang dipilih ke dokumen saat ini.

Menerapkan konten lama yang dipilih ​

Perbandingan mandiri secara bawaan hanya dapat dibaca dan tidak menampilkan tombol penerapan >>. Hubungkan callback onMerge untuk menampilkan tombol tersebut.

Kiri adalah dokumen lama, kanan dokumen saat ini. Klik >> di samping perubahan untuk menerapkan konten lama paragraf atau kelompok baris tersebut. Pemilihan bukan per karakter. Konten yang dihapus dapat dipulihkan, dan konten baru dapat dibuang.

Contoh di bawah hanya dapat dibaca. Periksa perubahan waktu pertemuan dan barang yang perlu dibawa. Mulai ulang mengembalikan contoh semula.

Memuat...

Perbandingan mandiri ​

Impor dari nabi-note/diff. Berikan NABI TREE JSON tersimpan atau string HTML sebagai before dan after. Susun registry dengan wing yang sama seperti editor pembuat dokumen agar tabel, daftar, gambar, dan konten lain terbaca dan ditampilkan utuh.

ts
import { makeRegistry, wings } from 'nabi-note'
import { mountDiff } from 'nabi-note/diff'
import 'nabi-note/nabi.css'

const registry = makeRegistry(wings().allBasic().build())
const diff = mountDiff({
  root: document.querySelector('#comparison')!,
  before: previousDocument,
  after: currentDocument,
  registry,
  locale: 'id',
})

diff.update(nextPreviousDocument, nextCurrentDocument)

diff.unmount()

Secara default hanya perubahan beserta konteksnya yang terlihat. Tombol lipat membuka dokumen lengkap; sebelumnya/berikutnya menelusuri perubahan. Tanpa perubahan, seluruh dokumen tampil. Tanpa onMerge, perbandingan hanya baca.

Menghubungkan penggabungan klik melalui callback ​

Klik mengirim usulan hasil ke onMerge. Menyambungkan callback tidak otomatis menyimpan dokumen. Layanan harus menerima usulan dan memanggil update() untuk mengubah hasil perbandingan.

ts
const diff = mountDiff({
  root,
  before: previousDocument,
  after: currentDocument,
  registry,
  locale: 'id',
  onMerge(proposal) {
    if (proposal.signal.aborted) return
    const accepted = diff.update(proposal.before, proposal.result, proposal.revision)
    if (!accepted) return
    currentDocument = proposal.result
  },
  onError(error) {
    showError(error)
  },
})

proposal.result adalah NABI TREE JSON yang hanya menerapkan perubahan terpilih. before dan after adalah dokumen saat diklik; changeId mengidentifikasi perubahan, revision keadaan perbandingan. Berikan revision ini sebagai argumen ketiga update(): jika perbandingan sudah berubah, hasilnya false tanpa menerapkan usulan.

Klik ganda diblokir selama callback asinkron ditunggu. Memperbarui dengan dokumen lain atau melepas tampilan membatalkan signal. Saat menyimpan ke server, periksa sinyal dan versi dokumen server agar hasil lama tidak menimpa dokumen baru.

Membuka perbandingan dari editor ​

Sambungkan wing diff dan mountDiffWing() untuk membuka perbandingan dari toolbar. Acuannya dokumen terakhir yang dimuat. Pengeditan biasa dan urungkan tidak mengubah acuan.

ts
import { createNabiWith, mountToolbar, wings } from 'nabi-note'
import { mountDiffWing } from 'nabi-note/diff'

const { nabi, registry } = createNabiWith(wings().allBasic().use('diff'))
const comparison = mountDiffWing({
  nabi,
  registry,
  surface: content,
  locale: 'id',
})
const toolbar = mountToolbar({
  nabi,
  registry,
  root: toolbarRoot,
  surface: content,
  onHost(wing) {
    if (wing === 'diff') comparison.open()
  },
})

Nilai bawaan merge adalah true, sehingga konten lama terpilih dapat diterapkan ke editor. Tindakan dapat diurungkan dan acuan tetap dipertahankan. Perubahan editor asal selama tampilan terbuka menghitung ulang perbandingan. Gunakan merge: false untuk perbandingan hanya baca.

Panggil toolbar.unmount() dan comparison.unmount() saat melepas tampilan. Untuk menyertakan versi awal pengeditan dan otomatis menggabungkan kedua sisi, gunakan Penggabungan.