Convert all demos to Stackblitz to prevent the auto-scrolling glitch

[sequba]

Context

After analyzing the issue, I found that it's caused by Codesandbox, which, when embedded in an iframe, calls Element.scrollIntoView() or some similar API method to cause the entire page to scroll to the demo.

In my opinion, the best solution is to convert all demos to Stackblitz, which doesn't do that and is, moreover, generally more reliable. @evanSe approved that solution.

Alternative solutions:

1. Temporary position the demo on top of the page and then bring it back to its original position after a delay:

<iframe onload="console.log('absolute'); this.style.position='absolute'; this.style.top='-9999em'; setTimeout(() => { console.log('static'); this.style.position='static'; }, 800);">

Work less reliably, delay must be pretty long, if a user scrolls to the demo before the timeout they won't see the iframe.

2. Delay initialization of an iframe until a user scrolls to its vicinity.

<iframe loading="lazy">

Auto-scrolling still happens, but only when the user scrolls the guide to a section close to the demo. For short guides (e.g., https://hyperformula.handsontable.com/guide/integration-with-vue.html), lazy-loading will work the same as the default loading.

How did you test your changes?

Tested locally. Verified that all demos in the guides:

• work correctly in Stackblitz
• are displayed correctly in iframes in the guides
• don't cause the auto-scrolling glitch

Types of changes

• Breaking change (a fix or a feature because of which an existing functionality doesn't work as expected anymore)
• New feature or improvement (a non-breaking change that adds functionality)
• Bug fix (a non-breaking change that fixes an issue)
• Additional language file, or a change to an existing language file (translations)
• Change to the documentation

Related issues:

1. Fixes [Bug]: Docs scrolls automatically to #demo on refresh #1412

Checklist:

• I have reviewed the guidelines about Contributing to HyperFormula and I confirm that my code follows the code style of this project.
• I have signed the Contributor License Agreement.
• My change is compliant with the OpenDocument standard.
• My change is compatible with Microsoft Excel.
• My change is compatible with Google Sheets.
• I described my changes in the CHANGELOG.md file.
• My changes require a documentation update.
• My changes require a migration guide.

[github-actions]

Performance comparison of head (4762263) vs base (b18f616)

                                     testName |   base |   head | change
------------------------------------------------------------------------
                                      Sheet A |    531 | 534.97 | +0.75%
                                      Sheet B | 173.27 | 172.48 | -0.46%
                                      Sheet T | 151.14 | 150.26 | -0.58%
                                Column ranges | 553.14 | 560.64 | +1.36%
Sheet A:  change value, add/remove row/column |  14.55 |  14.15 | -2.75%
 Sheet B: change value, add/remove row/column | 141.69 | 132.16 | -6.73%
                   Column ranges - add column | 156.92 | 154.51 | -1.54%
                Column ranges - without batch | 458.31 | 465.38 | +1.54%
                        Column ranges - batch |  123.7 | 122.36 | -1.08%

[evanSe]

Could you check if this resolves the issue eg vertical-scroll 'none' <iframe src="..." allow="vertical-scroll 'none'"></iframe>

[evanSe]

@magierg could you verify everything is good from a docs perspective, thanks!

[sequba]

Could you check if this resolves the issue eg vertical-scroll 'none' <iframe src="..." allow="vertical-scroll 'none'"></iframe>

I checked this. It doesn't work

[sequba]

@evanSe @magierg it's ready for CR and testing.

[magierg]

this has been verified both locally - all the demos work, but most of them (those build on parcel) have long loading time and throw console errors - fixing it will require updating these demos to newer version of parcel or (even better) to vite - this has been discussed with @evanSe as well