storyblok / field-plugin

Create and deploy Storyblok Field Plugin
https://www.storyblok.com/docs/plugins/field-plugins/introduction
25 stars 3 forks source link

Visual Editor does not detect changes in custom field plugin #336

Open RoettingerJ opened 7 months ago

RoettingerJ commented 7 months ago

Describe the bug I have following behavior with my custom field plugin: The Visual Editor does not detect changes if the content of the field plugin changes

Created a react field plugin that returns an object like {A:stringA, b:stringB}.

In the plugin the state will be stored with useState

const [value, setValue] = useState<>({A: '',B: ''})

every time the value changes the setContent function will be called via an useEffect

  useEffect(() => {
    actions?.setContent(value)
  }, [value])

To Reproduce Steps to reproduce the behavior:

  1. Create a blok with a custom field plugin
  2. Add the blok to a story
  3. Change a value in the field plugin
  4. "Save" button keeps state - signaling that there is no change

Expected behavior "Save" button of Visual Editor should change to a different state - signaling that there are changes in the story

demetriusfeijoo commented 7 months ago

Hi @RoettingerJ 🙌 , thanks for reaching out to us 🤩

I think I was able to reproduce it on my side, but to make sure I understood you correctly, the issue is regarding the content being changed but the save button staying in the same state, right? 🤔

If so, yeah, I could check this is happening and for that I'm going to report it to the relevant team.

Otherwise, if there is any other issue, just let me know.

Thanks again for reaching out to us.

RoettingerJ commented 7 months ago

Yes, please find attached video. The save button "detects" changes in the field "Old Link" which is is a Storyblok default link field. But if I change something in our plugin (field name "Link") the save button does NOT change state.

https://github.com/storyblok/field-plugin/assets/83758340/f1ac68e9-1503-4ee4-9b4b-bba60f814f89

demetriusfeijoo commented 7 months ago

Hey @RoettingerJ, thanks for the video, really helpful. 🙌

I may had a slightly different result but I think it was because in my test I used a field plugin with no useEffect for changing its content. In my tests, I was able to have the save button change its state at least once, but as soon as a new change occurred it behaved as in your video.

So, overall, the video was enough to make this issue clear to me. 💯 I'm going to report it to the relevant team and let you know when it gets solved.

Let me ask you just one more thing 🤣 : even if the state of the save button doesn't change, after you click on it, the value (in your example http) is saved in the Story, right?

I mean, if you hit http and click the save button, and after checking the draft JSON, the http value will be there, right?

Screenshot 2024-01-18 at 14 22 59

Just to be sure it's only the button state not changing and not also an issue regarding persisting the content. 🤣

Thanks again for all the kindness in reporting this issue 🤩

RoettingerJ commented 7 months ago

Yes, the value is in the JSON after hitting the save button

demetriusfeijoo commented 7 months ago

Perfect, thanks for confirming it, @RoettingerJ. 💯

About the Save button state not being changed, I've already opened an internal ticket for that and as soon as it gets done, I come back to you. 🙌

maximilian-schwarz commented 6 months ago

Have currently exact the same issue like @RoettingerJ