Convert all demos to Stackblitz to prevent the auto-scrolling glitch (#…

…1415)

* Convert basic operations demo to Stackblitz

* Convert all the demos in the guides to Stackblitz

* Set iframe height to 590px for all stackblitz demos

docs/guide/advanced-usage.md

@@ -122,9 +122,6 @@ console.log(winningTeam)
 ## Demo
 
 <iframe
-  :src="`https://codesandbox.io/embed/github/handsontable/hyperformula-demos/tree/2.7.x/advanced-usage?autoresize=1&fontsize=11&hidenavigation=1&theme=light&view=preview&v=${$page.buildDateURIEncoded}`"
-  style="width:100%; height:1070px; border:0; border-radius: 4px; overflow:hidden;"
-  title="handsontable/hyperformula-demos: advanced-usage"
-  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts">
+  :src="`https://stackblitz.com/github/handsontable/hyperformula-demos/tree/2.7.x/advanced-usage?embed=1&file=src/hyperformulaConfig.js&hideNavigation=1&view=preview&v=${$page.buildDateURIEncoded}`"
+  style="width:100%; height:590px; border:0; border-radius: 4px; overflow:hidden;">
 </iframe>

docs/guide/basic-operations.md

@@ -407,9 +407,6 @@ This demo presents several basic operations integrated with a
 sample UI.
 
 <iframe
-  :src="`https://codesandbox.io/embed/github/handsontable/hyperformula-demos/tree/2.7.x/basic-operations?autoresize=1&fontsize=11&hidenavigation=1&theme=light&view=preview&v=${$page.buildDateURIEncoded}`"
-  style="width:100%; height:1070px; border:0; border-radius: 4px; overflow:hidden;"
-  title="handsontable/hyperformula-demos: basic-operations"
-  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts">
+  :src="`https://stackblitz.com/github/handsontable/hyperformula-demos/tree/2.7.x/basic-operations?embed=1&file=src/hyperformulaConfig.js&hideNavigation=1&view=preview&v=${$page.buildDateURIEncoded}`"
+  style="width:100%; height:590px; border:0; border-radius: 4px; overflow:hidden;">
 </iframe>

docs/guide/basic-usage.md

@@ -65,9 +65,6 @@ works. It's time to move on to a more
 ## Demo
 
 <iframe
-  :src="`https://codesandbox.io/embed/github/handsontable/hyperformula-demos/tree/2.7.x/basic-usage?autoresize=1&fontsize=11&hidenavigation=1&theme=light&view=preview&v=${$page.buildDateURIEncoded}`"
-  style="width:100%; height:1070px; border:0; border-radius: 4px; overflow:hidden;"
-  title="handsontable/hyperformula-demos: basic-usage"
-  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts">
+  :src="`https://stackblitz.com/github/handsontable/hyperformula-demos/tree/2.7.x/basic-usage?embed=1&file=src/hyperformulaConfig.js&hideNavigation=1&view=preview&v=${$page.buildDateURIEncoded}`"
+  style="width:100%; height:590px; border:0; border-radius: 4px; overflow:hidden;">
 </iframe>

docs/guide/batch-operations.md

@@ -124,9 +124,6 @@ The [paste](../api/classes/hyperformula.md#paste) method also can't be called wh
 ## Demo
 
 <iframe
-  :src="`https://codesandbox.io/embed/github/handsontable/hyperformula-demos/tree/2.7.x/batch-operations?autoresize=1&fontsize=11&hidenavigation=1&theme=light&view=preview&v=${$page.buildDateURIEncoded}`"
-  style="width:100%; height:1070px; border:0; border-radius: 4px; overflow:hidden;"
-  title="handsontable/hyperformula-demos: batch-operations"
-  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts">
+  :src="`https://stackblitz.com/github/handsontable/hyperformula-demos/tree/2.7.x/batch-operations?embed=1&file=src/hyperformulaConfig.js&hideNavigation=1&view=preview&v=${$page.buildDateURIEncoded}`"
+  style="width:100%; height:590px; border:0; border-radius: 4px; overflow:hidden;">
 </iframe>

docs/guide/clipboard-operations.md

@@ -113,9 +113,6 @@ Depending on what was cut, the data is stored as:
 ## Demo
 
 <iframe
-  :src="`https://codesandbox.io/embed/github/handsontable/hyperformula-demos/tree/2.7.x/clipboard-operations?autoresize=1&fontsize=11&hidenavigation=1&theme=light&view=preview&v=${$page.buildDateURIEncoded}`"
-  style="width:100%; height:1070px; border:0; border-radius: 4px; overflow:hidden;"
-  title="handsontable/hyperformula-demos: clipboard-operations"
-  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts">
-</iframe>
+  :src="`https://stackblitz.com/github/handsontable/hyperformula-demos/tree/2.7.x/clipboard-operations?embed=1&file=src/hyperformulaConfig.js&hideNavigation=1&view=preview&v=${$page.buildDateURIEncoded}`"
+  style="width:100%; height:590px; border:0; border-radius: 4px; overflow:hidden;">
+</iframe>

docs/guide/custom-functions.md

@@ -363,11 +363,8 @@ This demo contains the implementation of both the
 [`DOUBLE_RANGE`](#advanced-custom-function-example) custom functions.
 
 <iframe
-  :src="`https://codesandbox.io/embed/github/handsontable/hyperformula-demos/tree/2.7.x/custom-functions?autoresize=1&fontsize=11&hidenavigation=1&theme=light&view=preview&v=${$page.buildDateURIEncoded}`"
-  style="width:100%; height:1070px; border:0; border-radius: 4px; overflow:hidden;"
-  title="handsontable/hyperformula-demos: custom-functions"
-  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts">
+  :src="`https://stackblitz.com/github/handsontable/hyperformula-demos/tree/2.7.x/custom-functions?embed=1&file=src/hyperformulaConfig.js&hideNavigation=1&view=preview&v=${$page.buildDateURIEncoded}`"
+  style="width:100%; height:590px; border:0; border-radius: 4px; overflow:hidden;">
 </iframe>
 
 ## Function options

docs/guide/date-and-time-handling.md

@@ -99,9 +99,6 @@ And now, HyperFormula recognizes these values as valid dates and can operate on
 ## Demo
 
 <iframe
-  :src="`https://codesandbox.io/embed/github/handsontable/hyperformula-demos/tree/2.7.x/date-time?autoresize=1&fontsize=11&hidenavigation=1&theme=light&view=preview&v=${$page.buildDateURIEncoded}`"
-  style="width:100%; height:1070px; border:0; border-radius: 4px; overflow:hidden;"
-  title="handsontable/hyperformula-demos: date-time"
-  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts">
+  :src="`https://stackblitz.com/github/handsontable/hyperformula-demos/tree/2.7.x/date-time?embed=1&file=src/hyperformulaConfig.js&hideNavigation=1&view=preview&v=${$page.buildDateURIEncoded}`"
+  style="width:100%; height:590px; border:0; border-radius: 4px; overflow:hidden;">
 </iframe>

docs/guide/demo.md

@@ -1,11 +1,8 @@
 # Demo
 
 <iframe
-  :src="`https://codesandbox.io/embed/github/handsontable/hyperformula-demos/tree/2.7.x/vanillajs-demo?autoresize=1&fontsize=11&hidenavigation=1&theme=light&view=preview&v=${$page.buildDateURIEncoded}`"
-  style="width:100%; height:1070px; margin-bottom: 50px; border:0; border-radius: 4px; overflow:hidden;"
-  title="handsontable/hyperformula-demos: vanillajs-demo"
-  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts">
+  :src="`https://stackblitz.com/github/handsontable/hyperformula-demos/tree/2.7.x/vanillajs-demo?embed=1&file=src/hyperformulaConfig.js&hideNavigation=1&view=preview&v=${$page.buildDateURIEncoded}`"
+  style="width:100%; height:590px; border:0; border-radius: 4px; overflow:hidden;">
 </iframe>
 
 In this demo, you can see how HyperFormula handles basic operations by using API methods, such as:

docs/guide/i18n-features.md

@@ -106,9 +106,6 @@ localeLang: 'en-US',
 This demo shows HyperFormula configured for the `en-US` locale.
 
 <iframe
-  :src="`https://codesandbox.io/embed/github/handsontable/hyperformula-demos/tree/2.7.x/i18n?autoresize=1&fontsize=11&hidenavigation=1&theme=light&view=preview&v=${$page.buildDateURIEncoded}`"
-  style="width:100%; height:1070px; border:0; border-radius: 4px; overflow:hidden;"
-  title="handsontable/hyperformula-demos: basic-operations"
-  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts">
+  :src="`https://stackblitz.com/github/handsontable/hyperformula-demos/tree/2.7.x/i18n?embed=1&file=src/hyperformulaConfig.js&hideNavigation=1&view=preview&v=${$page.buildDateURIEncoded}`"
+  style="width:100%; height:590px; border:0; border-radius: 4px; overflow:hidden;">
 </iframe>

docs/guide/integration-with-angular.md

@@ -8,5 +8,5 @@ For more details, see the [client-side installation](client-side-installation.md
 
 <iframe
   :src="`https://stackblitz.com/github/handsontable/hyperformula-demos/tree/2.7.x/angular-demo?embed=1&file=src/app/employees/employees.helper.ts&hideNavigation=1&view=preview&v=${$page.buildDateURIEncoded}`"
-  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;">
+  style="width:100%; height:590px; border:0; border-radius: 4px; overflow:hidden;">
 </iframe>

docs/guide/integration-with-react.md

@@ -7,9 +7,6 @@ For more details, see the [client-side installation](client-side-installation.md
 ## Demo
 
 <iframe
-  :src="`https://codesandbox.io/embed/github/handsontable/hyperformula-demos/tree/2.7.x/react-demo?autoresize=1&fontsize=11&hidenavigation=1&theme=light&view=preview&v=${$page.buildDateURIEncoded}`"
-  style="width:100%; height:1070px; border:0; border-radius: 4px; overflow:hidden;"
-  title="handsontable/hyperformula-demos: react-demo"
-  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts">
+  :src="`https://stackblitz.com/github/handsontable/hyperformula-demos/tree/2.7.x/react-demo?embed=1&file=src/lib/employee/employee.hf.ts&hideNavigation=1&view=preview&v=${$page.buildDateURIEncoded}`"
+  style="width:100%; height:590px; border:0; border-radius: 4px; overflow:hidden;">
 </iframe>

docs/guide/integration-with-svelte.md

@@ -7,9 +7,6 @@ For more details, see the [client-side installation](client-side-installation.md
 ## Demo
 
 <iframe
-  :src="`https://codesandbox.io/p/devbox/github/handsontable/hyperformula-demos/tree/2.7.x/svelte-demo?v=${$page.buildDateURIEncoded}`"
-  style="width:100%; height:900px; border:0; border-radius: 4px; overflow:hidden;"
-  title="handsontable/hyperformula-demos: react-demo"
-  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts">
+  :src="`https://stackblitz.com/github/handsontable/hyperformula-demos/tree/2.7.x/svelte-demo?embed=1&file=src/routes/Hyperformula.svelte&hideNavigation=1&view=preview&v=${$page.buildDateURIEncoded}`"
+  style="width:100%; height:590px; border:0; border-radius: 4px; overflow:hidden;">
 </iframe>

docs/guide/integration-with-vue.md

@@ -11,9 +11,6 @@ This demo uses the [Vue 3](https://v3.vuejs.org/) framework. If you are looking
 :::
 
 <iframe
-  :src="`https://codesandbox.io/p/devbox/github/handsontable/hyperformula-demos/tree/2.7.x/vue-3-demo?v=${$page.buildDateURIEncoded}`"
-  style="width:100%; height:1070px; border:0; border-radius: 4px; overflow:hidden;"
-  title="handsontable/hyperformula-demos: vue-demo"
-  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts">
-</iframe>
+  :src="`https://stackblitz.com/github/handsontable/hyperformula-demos/tree/2.7.x/vue-3-demo?embed=1&file=src/lib/employees-data-provider.ts&hideNavigation=1&view=preview&v=${$page.buildDateURIEncoded}`"
+  style="width:100%; height:590px; border:0; border-radius: 4px; overflow:hidden;">
+</iframe>

docs/guide/localizing-functions.md

@@ -97,9 +97,6 @@ You can localize your custom functions as well. For details, see the [Custom fun
 ## Demo
 
 <iframe
-  :src="`https://codesandbox.io/embed/github/handsontable/hyperformula-demos/tree/2.7.x/localizing-functions?autoresize=1&fontsize=11&hidenavigation=1&theme=light&view=preview&v=${$page.buildDateURIEncoded}`"
-  style="width:100%; height:1070px; border:0; border-radius: 4px; overflow:hidden;"
-  title="handsontable/hyperformula-demos: localizing-functions"
-  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts">
+  :src="`https://stackblitz.com/github/handsontable/hyperformula-demos/tree/2.7.x/localizing-functions?embed=1&file=src/hyperformulaConfig.js&hideNavigation=1&view=preview&v=${$page.buildDateURIEncoded}`"
+  style="width:100%; height:590px; border:0; border-radius: 4px; overflow:hidden;">
 </iframe>

docs/guide/named-expressions.md

@@ -150,9 +150,6 @@ described in [that section](basic-operations.md#isitpossibleto-methods).
 ## Demo
 
 <iframe
-  :src="`https://codesandbox.io/embed/github/handsontable/hyperformula-demos/tree/2.7.x/named-expressions?autoresize=1&fontsize=11&hidenavigation=1&theme=light&view=preview&v=${$page.buildDateURIEncoded}`"
-  style="width:100%; height:1070px; border:0; border-radius: 4px; overflow:hidden;"
-  title="handsontable/hyperformula-demos: named-expressions"
-  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts">
+  :src="`https://stackblitz.com/github/handsontable/hyperformula-demos/tree/2.7.x/named-expressions?embed=1&file=src/hyperformulaConfig.js&hideNavigation=1&view=preview&v=${$page.buildDateURIEncoded}`"
+  style="width:100%; height:590px; border:0; border-radius: 4px; overflow:hidden;">
 </iframe>

docs/guide/sorting-data.md

@@ -195,12 +195,7 @@ if (!isColumnOrderOk) {
 
 The demo below shows how to sort rows in ascending and descending order, based on the results (calculated values) of the cells in the second column.
 
-To see the code, select "Open Sandbox" in the frame's bottom right corner.
-
 <iframe
-  :src="`https://codesandbox.io/embed/github/handsontable/hyperformula-demos/tree/2.7.x/sorting?autoresize=1&fontsize=11&hidenavigation=1&theme=light&view=preview&v=${$page.buildDateURIEncoded}`"
-  style="width:100%; height:1070px; border:0; border-radius: 4px; overflow:hidden;"
-  title="handsontable/hyperformula-demos: sorting"
-  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts">
+  :src="`https://stackblitz.com/github/handsontable/hyperformula-demos/tree/2.7.x/sorting?embed=1&file=src/hyperformulaConfig.js&hideNavigation=1&view=preview&v=${$page.buildDateURIEncoded}`"
+  style="width:100%; height:590px; border:0; border-radius: 4px; overflow:hidden;">
 </iframe>

docs/guide/undo-redo.md

@@ -26,9 +26,6 @@ that undo-redo will recognize them as a single cumulative operation.
 ## Demo
 
 <iframe
-  :src="`https://codesandbox.io/embed/github/handsontable/hyperformula-demos/tree/2.7.x/undo-redo?autoresize=1&fontsize=11&hidenavigation=1&theme=light&view=preview&v=${$page.buildDateURIEncoded}`"
-  style="width:100%; height:1070px; border:0; border-radius: 4px; overflow:hidden;"
-  title="handsontable/hyperformula-demos: undo-redo"
-  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts">
+  :src="`https://stackblitz.com/github/handsontable/hyperformula-demos/tree/2.7.x/undo-redo?embed=1&file=src/hyperformulaConfig.js&hideNavigation=1&view=preview&v=${$page.buildDateURIEncoded}`"
+  style="width:100%; height:590px; border:0; border-radius: 4px; overflow:hidden;">
 </iframe>