fix: Undo / redo behavior on LG resources

[lei9444]

Description

wrap the updatelg function as undoable

Task Item

closes #1212

Type of change

Please delete options that are not relevant.

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Code refactor (non-breaking change which improve code quality, clean up, add tests, etc)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Doc update (document update)

Checklist

• I have added tests that prove my fix is effective or that my feature works
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have functionally tested my change

Screenshots

[boydc2014]

@cwhitten @a-b-r-o-w-n this one looks good to me now.

The root cause of LG undo\redo behavior not reflected in Form is that form use local data which only init once when first render, after first render the data flow is single-direction (local => global). So, when a global redo/undo updated the store, the local data is not synced.

The reason we choose a single-direction data flow is for consistency and efficiency, which is good. So the fix here @lei9444 did is to track the state is updated by other data source other than Form (so far it's only undo/redo, if i understand correctly), then Form will decide to re-init local data once it knows this piece of data is updated externally.

[github-actions]

Coverage increased (+0.04%) to 42.702% when pulling f8cd251 on lei9444:undolg into c58666e on microsoft:master.

[lei9444]

@a-b-r-o-w-n @boydc2014 @zhixzhan I have added a key to force update the extension if the update is from the shell. Maybe we can add the status to the props in the future, and editors can get the status and judge for themself.

[a-b-r-o-w-n]

I'm still not sure about this approach.

What if we attempted to sync the shell and extension data? I haven't given much thought to this but I'm curious if something like this would work?

// in form
const sync = debounce((shellData, localData) => {
  if (!isEqual(shellData, localData)) {
    setLocalData(shellData)
  }
}, 750);

useEffect(() => {
  const sync = debounce((shellData, localData) => {
    if (!isEqual(shellData, localData)) {
      setLocalData(shellData)
    }
  }, 750);

  sync(shellData, localData);

 return () => {
  sync.cancel(); // not sure what this api is
}
}, [shellData]);

This way, the shellData remains the single source of truth, but we allow changes from the extension to propagate through the shell before attempting to sync. I'm not sure if this will work, but it feels a little better than force re-rendering. I could also see this living in the extension container as well which has more knowledge about the shell operations.

[lei9444]

@a-b-r-o-w-n @boydc2014 @zhixzhan. I have tried the approach @a-b-r-o-w-n gave and It works well.
This way can avoid the text input swallow characters and we don't need to add the update external API.