Add data-attribute for modifications tracking

[Anoerak]

Hi,

First off, thank s for the hard work. Really appreciate it on a daily basis.
I wonder if it is possible to add a data-attribute with the original key/value/path of an entry.

I am finishing a modification tracker and it would be easier if the original key/value/path were accessible (if possible) like the data-path attribute already available in the jse-json-node.

Screen.Recording.2024-12-11.at.4.30.07.PM.mov

[josdejong]

Thanks, you're welcome.

The data-path indeed contains the original path of the current node. However, it is encode so it can be put in a string in HTML. Therefore it looks like "%2Fstatistics%2FactiveUsers". You can look into the function decodeDataPath to see how you can decode it yourself into a JSON Pointer like "/statistics/activeUsers" and next into JSON like ["statistics", "activeUsers"].

Alternatively, you can use onRenderValue to add your own extra renderer. This renderer can be a hidden div which contains a data attribute the way you need it.

[Anoerak]

Thanks for your answer.

I'm already using the data-path to keep track of some modifications but in some cases, i.e. renaming a key, it would be useful to also have the original data-path since it is based on the key. So renaming the key means you lose the track of the original key name :(

I'm using the onRenderValue to deal with some enum, maybe I can try to add more logic into it..

[josdejong]

Ah, now I understand what you mean with original key.

To keep track of changes, I think the changeStatus.patchResult argument of the onChange callback can be very useful (tree and table mode only). You can log what it contains whilst making some edits in the editor to get an idea:

const props = {
  onChange: (content, previousContent, changeStatus) => {
    console.log('onChange', changeStatus.patchResult)
  }
}

It contains an .undo and .redo array which contains the JSON Patch actions needed to undo/redo the action.