redherring917
Posts: 26
Joined: Tue Sep 10, 2024 8:32 pm

HTML component - edit mode (saving as textarea)

Hi there. I have an HTML type component and in edit mode I'd like to allow just that component's title and the contents of a text element to be saved. What I have now is properly saving any changes to the title, but it's not saving changes made to the text element.

I'm still hacking my way through becoming familiar with Highcharts, so apologies in advance if I'm trying to do something silly.

Please find attached a snapshot of the UI implementation and of the associated code.

Thanks!
Attachments
2024-09-17_13-26-19.png
2024-09-17_13-26-19.png (64.44 KiB) Viewed 1853 times
2024-09-17_13-27-31.png
2024-09-17_13-27-31.png (29.79 KiB) Viewed 1853 times
User avatar
dawid.d
Site Moderator
Posts: 1162
Joined: Thu Oct 06, 2022 11:31 am

Re: HTML component - edit mode (saving as textarea)

Hello,

Thanks for the question!

Don't worry, that's what we're here for. :D The correct path should also include array indexes. See the demo below.

Demo: https://jsfiddle.net/BlackLabel/3ye04bhv/

Your input, however, caused me to observe a bug that that the initial value is not taken, so the textarea is initially empty, which is also associated with the canceling error. We did not test paths with arrays before, hence it may result from.

I reported it here: https://github.com/highcharts/highcharts/issues/21862

As a workaround, you can use this: https://jsfiddle.net/BlackLabel/jko8wqx7/

In case of any other questions, don't hesitate to ask!
Best regards
Dawid Draguła
Highcharts Developer
redherring917
Posts: 26
Joined: Tue Sep 10, 2024 8:32 pm

Re: HTML component - edit mode (saving as textarea)

Hi there!

It appears that the "workaround" solution offered by the following fiddle you provided causes the component edit "confirm" and "cancel" buttons to disappear.

https://jsfiddle.net/BlackLabel/jko8wqx7/

Unfortunately I didn't notice that at the time or else I would have mentioned it earlier. It only recently came to light and since I didn't at first make the connection to this workaround code I blamed my CSS guy instead :)

Can you please advise as to the changes necessary to retain a version of this workaround code but bring back those buttons?

Please note that I've also submitted this as ticket #26035 which I'll gladly close if the answer comes here first.

Thanks!
User avatar
dawid.d
Site Moderator
Posts: 1162
Joined: Thu Oct 06, 2022 11:31 am

Re: HTML component - edit mode (saving as textarea)

Hi!

Sorry about that - the workaround indeed isn't working correctly (one, missing argument in the wrap function). The good news is that I've recently worked on a bug fix for this issue, and it’s now resolved. It should be available in the upcoming release soon.

In the meantime, you can use this, upgraded workaround: https://jsfiddle.net/BlackLabel/vbyq4mrg/

In this workaround, I used structuredClone to copy the options, which doesn’t work for components that have non-serializable options. The actual bug fix is a bit more comprehensive and covers more cases (e.g., option caching for other types of components, which isn’t included in this workaround - let me know if you need it). This will be available in the new version, which should likely come out next week.

Best regards,
Dawid Draguła
Highcharts Developer
redherring917
Posts: 26
Joined: Tue Sep 10, 2024 8:32 pm

Re: HTML component - edit mode (saving as textarea)

Hi Dawid. No worries at all, and thanks for the reply and the workaround. At first glance this seems to work for our implementation. Will this latest workaround you've provided function after the imminent release, or will we need to make further adjustments then?

Thanks again!
User avatar
dawid.d
Site Moderator
Posts: 1162
Joined: Thu Oct 06, 2022 11:31 am

Re: HTML component - edit mode (saving as textarea)

Hi,

This workaround should work now and will no longer be necessary after the next release when can be removed in favor of stable Components Editing with editableOptions containing paths through arrays. :)

You can find more details about the bugfix here: https://github.com/highcharts/highcharts/pull/22092

Kind regards,
Dawid Draguła
Highcharts Developer

Return to “Highcharts Dashboards”