N'importe quelle méthode/algorithme intelligent pour trouver ce qui a changé dans la structure html? (React.js microsoft OneNote api)

Question

J'écris une application web qui aura des fonctionnalités OneNote. Mais j'ai rencontré un problème. Pour Updata une page, API OneNote nécessite d'envoyer ensemble de changements au format comme celui-ci:

[ 
{ 
    'target':'#div1', 
    'action':'append', 
    'position':'before', 
    'content':'<img data-id="first-child" src="image-url-or-part-name" />' 
}, 
{ 
    'target':'#div1', 
    'action':'append', 
    'content':'<p data-id="last-child">New paragraph appended to the div</p>' 
} 
] 

https://msdn.microsoft.com/en-us/office/office365/howto/onenote-update-page

Donc, si vous utilisez un éditeur de texte, par exemple réagir-rte (bibliothèque NPM) comment suis-je censé trouver mes changements dans un format comme ça? Dois-je créer moi-même un algorithme et comparer le contenu initial et final pour savoir ce qui a changé?

Answer 1

Une solution Naive pourrait être pour vous mettre à jour la page entière à l'aide cible "corps" - essentiellement:

https://msdn.microsoft.com/en-us/office/office365/howto/onenote-update-page

[ 
{ 
    'target':'body', 
    'action':'replace' 
    'content':'...' 
} 
]