Confronto
Affianca due documenti salvati per vedere le modifiche. Il confronto può aprirsi senza editor; collega un callback per applicare il contenuto precedente selezionato al documento attuale.
Applicare contenuto precedente selezionato
I confronti autonomi sono di sola lettura per impostazione predefinita e non mostrano i pulsanti >> per applicare le modifiche. Collega un callback onMerge per visualizzarli.
A sinistra c’è il documento precedente, a destra quello attuale. >> accanto a una modifica applica il contenuto precedente del relativo paragrafo o gruppo di righe. La selezione non avviene carattere per carattere. Puoi anche ripristinare contenuto eliminato o rimuovere quello appena aggiunto.
L’esempio seguente è di sola lettura. Controlla come sono cambiati l’orario dell’incontro e gli oggetti da portare. Ricomincia ripristina l’esempio originale.
Caricamento...
Confronto indipendente
Importa da nabi-note/diff. Passa NABI TREE JSON salvato o stringhe HTML in before e after. Costruisci il registry con le stesse wing dell’editor originale per leggere e mostrare integralmente tabelle, elenchi, immagini e altri contenuti.
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: 'it',
})
diff.update(nextPreviousDocument, nextCurrentDocument)
diff.unmount()Per impostazione predefinita appaiono solo modifiche e contesto. Il pulsante di compressione espande i documenti completi; precedente/successivo scorrono le modifiche. Senza modifiche appare tutto il documento. Omettendo onMerge il confronto è in sola lettura.
Collegare l’unione tramite clic a un callback
Il clic passa una proposta di risultato a onMerge. Collegare il callback non salva automaticamente il documento. Il servizio deve accettare la proposta e chiamare update() per aggiornare il confronto.
const diff = mountDiff({
root,
before: previousDocument,
after: currentDocument,
registry,
locale: 'it',
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 è NABI TREE JSON con la sola modifica selezionata. before e after sono i documenti al momento del clic; changeId identifica la modifica, revision lo stato del confronto. Passa questa revision come terzo argomento di update(): se il confronto è già cambiato, restituisce false senza applicare la proposta.
I clic duplicati sono bloccati durante il callback asincrono. Aggiornare con altri documenti o smontare la vista annulla signal. Per salvare sul server, controlla sia il segnale sia la versione del documento, evitando di sovrascrivere contenuti nuovi con risultati obsoleti.
Aprire il confronto dall’editor
Collega la wing diff e mountDiffWing() per aprire il confronto dalla barra. Il riferimento è l’ultimo documento caricato. Modifiche ordinarie e annullamento non cambiano il riferimento.
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: 'it',
})
const toolbar = mountToolbar({
nabi,
registry,
root: toolbarRoot,
surface: content,
onHost(wing) {
if (wing === 'diff') comparison.open()
},
})merge è true per impostazione predefinita, quindi il contenuto precedente scelto può essere applicato all’editor. L’operazione è annullabile e conserva il riferimento. Se l’editor originale cambia a vista aperta, il confronto viene ricalcolato. Imposta merge: false per un confronto di sola lettura.
Quando rimuovi la vista, chiama toolbar.unmount() e comparison.unmount(). Per includere la versione iniziale e combinare automaticamente le modifiche di entrambe le parti, usa Unione.