(null);\n\n useEffect(() => {\n const hot = hotRef.current?.hotInstance;\n\n hot?.updateSettings({\n cells(row) {\n return row === 1 ? { readOnly: true } : {};\n },\n });\n });\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/read-only-cells/react/example5.tsx","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example5","exampleTitle":"Make a row read-only","docPermalink":"/read-only-cells","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__react__exampleReadOnlyGrid.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__react__exampleReadOnlyGrid.tsx.json
new file mode 100644
index 00000000..1126e89c
--- /dev/null
+++ b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__react__exampleReadOnlyGrid.tsx.json
@@ -0,0 +1 @@
+{"framework":"react","displayName":"Cell Features ▸ Read-only cells · Make the grid read-only · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleReadOnlyGrid\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/read-only-cells/react/exampleReadOnlyGrid.tsx","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"exampleReadOnlyGrid","exampleTitle":"Make the grid read-only","docPermalink":"/read-only-cells","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__example1.vue.json
new file mode 100644
index 00000000..31b69317
--- /dev/null
+++ b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__example1.vue.json
@@ -0,0 +1 @@
+{"framework":"vue","displayName":"Cell Features ▸ Read-only cells · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n \n
\n"},"docsPath":"guides/cell-features/read-only-cells/vue/example1.vue","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/read-only-cells","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__example2.vue.json
new file mode 100644
index 00000000..ed7c6f45
--- /dev/null
+++ b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__example2.vue.json
@@ -0,0 +1 @@
+{"framework":"vue","displayName":"Cell Features ▸ Read-only cells · Make specific cells read-only · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n\n \n \n
\n"},"docsPath":"guides/cell-features/read-only-cells/vue/example2.vue","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example2","exampleTitle":"Make specific cells read-only","docPermalink":"/read-only-cells","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__example3.vue.json
new file mode 100644
index 00000000..1e92c811
--- /dev/null
+++ b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__example3.vue.json
@@ -0,0 +1 @@
+{"framework":"vue","displayName":"Cell Features ▸ Read-only cells · Make a column non-editable · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n\n \n \n
\n"},"docsPath":"guides/cell-features/read-only-cells/vue/example3.vue","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example3","exampleTitle":"Make a column non-editable","docPermalink":"/read-only-cells","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__example4.vue.json
new file mode 100644
index 00000000..7998aad4
--- /dev/null
+++ b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__example4.vue.json
@@ -0,0 +1 @@
+{"framework":"vue","displayName":"Cell Features ▸ Read-only cells · Make specific cells non-editable · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n\n \n \n
\n"},"docsPath":"guides/cell-features/read-only-cells/vue/example4.vue","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example4","exampleTitle":"Make specific cells non-editable","docPermalink":"/read-only-cells","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__example5.vue.json
new file mode 100644
index 00000000..34f481fd
--- /dev/null
+++ b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__example5.vue.json
@@ -0,0 +1 @@
+{"framework":"vue","displayName":"Cell Features ▸ Read-only cells · Make a row read-only · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"\n\n\n \n \n
\n"},"docsPath":"guides/cell-features/read-only-cells/vue/example5.vue","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example5","exampleTitle":"Make a row read-only","docPermalink":"/read-only-cells","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__exampleReadOnlyGrid.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__exampleReadOnlyGrid.vue.json
new file mode 100644
index 00000000..73382b77
--- /dev/null
+++ b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__exampleReadOnlyGrid.vue.json
@@ -0,0 +1 @@
+{"framework":"vue","displayName":"Cell Features ▸ Read-only cells · Make the grid read-only · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleReadOnlyGrid\");","/src/App.vue":"\n\n\n \n \n
\n"},"docsPath":"guides/cell-features/read-only-cells/vue/exampleReadOnlyGrid.vue","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"exampleReadOnlyGrid","exampleTitle":"Make the grid read-only","docPermalink":"/read-only-cells","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example1.ts.json
index 836362ee..c114be98 100644
--- a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Selection · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"npm run start -- --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"npm install --legacy-peer-deps","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import {Component, ViewChild, ViewEncapsulation, HostListener, ElementRef, inject} from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example1-selection',\n standalone: true,\n imports: [HotTableModule],\n template: ` \n
\n
\n
\n {{ selectedLabel }}\n \n \n @if (isOpen) {\n \n }\n \n
\n
\n \n
`,\n encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n isOpen = false;\n selected = 'multiple';\n\n readonly options = [\n { value: 'single', label: 'Single selection' },\n { value: 'range', label: 'Range selection' },\n { value: 'multiple', label: 'Multiple ranges selection' },\n ];\n\n readonly data = [\n ['Ana García', 'Engineering', 'Senior Engineer', 95000, 'Madrid', 'Spain', 'F', 12, '2026-03-14'],\n ['James Okafor', 'Marketing', 'Product Manager', 88000, 'Lagos', 'Nigeria', 'M', 8, '2026-07-01'],\n ['Li Wei', 'Engineering', 'Frontend Dev', 82000, 'Shanghai', 'China', 'M', 5, '2026-01-10'],\n ['Maria Santos', 'HR', 'HR Specialist', 71000, 'Lisbon', 'Portugal','F', 3, '2026-11-20'],\n ['David Kim', 'Engineering', 'Backend Dev', 85000, 'Seoul', 'Korea', 'M', 7, '2026-08-05'],\n ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, 'London', 'UK', 'F', 2, '2026-02-14'],\n ['Ahmed Hassan', 'Finance', 'Controller', 92000, 'Cairo', 'Egypt', 'M', 10, '2026-06-30'],\n ['Sara Johansson', 'Engineering', 'QA Engineer', 78000, 'Stockholm', 'Sweden', 'F', 6, '2026-09-12'],\n ['Carlos Mendez', 'Sales', 'Account Manager', 74000, 'Mexico City', 'Mexico', 'M', 4, '2026-04-25'],\n ];\n\n readonly gridSettings: GridSettings = {\n width: 'auto',\n height: 'auto',\n colWidths: 100,\n rowHeaders: true,\n colHeaders: true,\n selectionMode: 'multiple', // 'single', 'range' or 'multiple',\n autoWrapRow: true,\n autoWrapCol: true\n };\n\n get selectedLabel(): string {\n return this.options.find((o) => o.value === this.selected)?.label || '';\n }\n\n private elementRef = inject(ElementRef);\n\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n }\n\n selectOption(value: string): void {\n this.selected = value;\n this.isOpen = false;\n type selection = 'multiple' | 'single' | 'range' | undefined;\n\n this.hotTable?.hotInstance?.updateSettings({ selectionMode: value as selection });\n }\n\n @HostListener('document:click', ['$event'])\n onDocumentClick(event: MouseEvent): void {\n if (!this.elementRef.nativeElement.querySelector('.theme-dropdown')?.contains(event.target)) {\n this.isOpen = false;\n }\n }\n\n @HostListener('document:keydown', ['$event'])\n onKeydown(event: KeyboardEvent): void {\n if (event.key === 'Escape') {\n this.isOpen = false;\n }\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/selection/angular/example1.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/selection","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Selection · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import {Component, ViewChild, ViewEncapsulation, HostListener, ElementRef, inject} from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example1-selection',\n standalone: true,\n imports: [HotTableModule],\n template: ` \n
\n
\n
\n {{ selectedLabel }}\n \n \n @if (isOpen) {\n \n }\n \n
\n
\n \n
`,\n encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n isOpen = false;\n selected = 'multiple';\n\n readonly options = [\n { value: 'single', label: 'Single selection' },\n { value: 'range', label: 'Range selection' },\n { value: 'multiple', label: 'Multiple ranges selection' },\n ];\n\n readonly data = [\n ['Ana García', 'Engineering', 'Senior Engineer', 95000, 'Madrid', 'Spain', 'F', 12, '2026-03-14'],\n ['James Okafor', 'Marketing', 'Product Manager', 88000, 'Lagos', 'Nigeria', 'M', 8, '2026-07-01'],\n ['Li Wei', 'Engineering', 'Frontend Dev', 82000, 'Shanghai', 'China', 'M', 5, '2026-01-10'],\n ['Maria Santos', 'HR', 'HR Specialist', 71000, 'Lisbon', 'Portugal','F', 3, '2026-11-20'],\n ['David Kim', 'Engineering', 'Backend Dev', 85000, 'Seoul', 'Korea', 'M', 7, '2026-08-05'],\n ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, 'London', 'UK', 'F', 2, '2026-02-14'],\n ['Ahmed Hassan', 'Finance', 'Controller', 92000, 'Cairo', 'Egypt', 'M', 10, '2026-06-30'],\n ['Sara Johansson', 'Engineering', 'QA Engineer', 78000, 'Stockholm', 'Sweden', 'F', 6, '2026-09-12'],\n ['Carlos Mendez', 'Sales', 'Account Manager', 74000, 'Mexico City', 'Mexico', 'M', 4, '2026-04-25'],\n ];\n\n readonly gridSettings: GridSettings = {\n width: 'auto',\n height: 'auto',\n colWidths: 100,\n rowHeaders: true,\n colHeaders: true,\n selectionMode: 'multiple', // 'single', 'range' or 'multiple',\n autoWrapRow: true,\n autoWrapCol: true\n };\n\n get selectedLabel(): string {\n return this.options.find((o) => o.value === this.selected)?.label || '';\n }\n\n private elementRef = inject(ElementRef);\n\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n }\n\n selectOption(value: string): void {\n this.selected = value;\n this.isOpen = false;\n type selection = 'multiple' | 'single' | 'range' | undefined;\n\n this.hotTable?.hotInstance?.updateSettings({ selectionMode: value as selection });\n }\n\n @HostListener('document:click', ['$event'])\n onDocumentClick(event: MouseEvent): void {\n if (!this.elementRef.nativeElement.querySelector('.theme-dropdown')?.contains(event.target)) {\n this.isOpen = false;\n }\n }\n\n @HostListener('document:keydown', ['$event'])\n onKeydown(event: KeyboardEvent): void {\n if (event.key === 'Escape') {\n this.isOpen = false;\n }\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/selection/angular/example1.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/selection","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example2.ts.json
index 8201eb39..81dcefd8 100644
--- a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Selection · Get data from the selected ranges · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"npm run start -- --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"npm install --legacy-peer-deps","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import {Component, ViewChild, ViewEncapsulation} from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\n@Component({\n selector: 'example2-selection',\n standalone: true,\n imports: [HotTableModule],\n template: ` \n
\n \n
\n @if (output) {\n
\n }\n
\n \n
`,\n encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n readonly data = [\n ['Ana García', 'Engineering', 'Senior Engineer', 95000, 'Madrid', 'Spain', 'F', 12, '2026-03-14'],\n ['James Okafor', 'Marketing', 'Product Manager', 88000, 'Lagos', 'Nigeria', 'M', 8, '2026-07-01'],\n ['Li Wei', 'Engineering', 'Frontend Dev', 82000, 'Shanghai', 'China', 'M', 5, '2026-01-10'],\n ['Maria Santos', 'HR', 'HR Specialist', 71000, 'Lisbon', 'Portugal','F', 3, '2026-11-20'],\n ['David Kim', 'Engineering', 'Backend Dev', 85000, 'Seoul', 'Korea', 'M', 7, '2026-08-05'],\n ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, 'London', 'UK', 'F', 2, '2026-02-14'],\n ['Ahmed Hassan', 'Finance', 'Controller', 92000, 'Cairo', 'Egypt', 'M', 10, '2026-06-30'],\n ['Sara Johansson', 'Engineering', 'QA Engineer', 78000, 'Stockholm', 'Sweden', 'F', 6, '2026-09-12'],\n ['Carlos Mendez', 'Sales', 'Account Manager', 74000, 'Mexico City', 'Mexico', 'M', 4, '2026-04-25'],\n ];\n\n readonly gridSettings: GridSettings = {\n width: 'auto',\n height: 'auto',\n colWidths: 100,\n rowHeaders: true,\n colHeaders: true,\n outsideClickDeselects: false,\n selectionMode: 'multiple', // 'single', 'range' or 'multiple',\n autoWrapRow: true,\n autoWrapCol: true\n };\n\n output = '';\n\n getButtonClick(): void {\n const hot = this.hotTable?.hotInstance;\n const selected = hot?.getSelected() || [];\n let data: Handsontable.CellValue[] = [];\n\n if (selected.length === 1) {\n data = hot?.getData(...selected[0]!) || [];\n } else {\n for (let i = 0; i < selected.length; i += 1) {\n const item = selected[i];\n\n data.push(hot?.getData(...item));\n }\n }\n\n this.output = JSON.stringify(data);\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/selection/angular/example2.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example2","exampleTitle":"Get data from the selected ranges","docPermalink":"/selection","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Selection · Get data from the selected ranges · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import {Component, ViewChild, ViewEncapsulation} from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\n@Component({\n selector: 'example2-selection',\n standalone: true,\n imports: [HotTableModule],\n template: ` \n
\n \n
\n @if (output) {\n
\n }\n
\n \n
`,\n encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n readonly data = [\n ['Ana García', 'Engineering', 'Senior Engineer', 95000, 'Madrid', 'Spain', 'F', 12, '2026-03-14'],\n ['James Okafor', 'Marketing', 'Product Manager', 88000, 'Lagos', 'Nigeria', 'M', 8, '2026-07-01'],\n ['Li Wei', 'Engineering', 'Frontend Dev', 82000, 'Shanghai', 'China', 'M', 5, '2026-01-10'],\n ['Maria Santos', 'HR', 'HR Specialist', 71000, 'Lisbon', 'Portugal','F', 3, '2026-11-20'],\n ['David Kim', 'Engineering', 'Backend Dev', 85000, 'Seoul', 'Korea', 'M', 7, '2026-08-05'],\n ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, 'London', 'UK', 'F', 2, '2026-02-14'],\n ['Ahmed Hassan', 'Finance', 'Controller', 92000, 'Cairo', 'Egypt', 'M', 10, '2026-06-30'],\n ['Sara Johansson', 'Engineering', 'QA Engineer', 78000, 'Stockholm', 'Sweden', 'F', 6, '2026-09-12'],\n ['Carlos Mendez', 'Sales', 'Account Manager', 74000, 'Mexico City', 'Mexico', 'M', 4, '2026-04-25'],\n ];\n\n readonly gridSettings: GridSettings = {\n width: 'auto',\n height: 'auto',\n colWidths: 100,\n rowHeaders: true,\n colHeaders: true,\n outsideClickDeselects: false,\n selectionMode: 'multiple', // 'single', 'range' or 'multiple',\n autoWrapRow: true,\n autoWrapCol: true\n };\n\n output = '';\n\n getButtonClick(): void {\n const hot = this.hotTable?.hotInstance;\n const selected = hot?.getSelected() || [];\n let data: Handsontable.CellValue[] = [];\n\n if (selected.length === 1) {\n data = hot?.getData(...selected[0]!) || [];\n } else {\n for (let i = 0; i < selected.length; i += 1) {\n const item = selected[i];\n\n data.push(hot?.getData(...item));\n }\n }\n\n this.output = JSON.stringify(data);\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/selection/angular/example2.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example2","exampleTitle":"Get data from the selected ranges","docPermalink":"/selection","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example3.ts.json
index 25a39d17..eb6cf033 100644
--- a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Selection · Modify the selected cells · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"npm run start -- --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"npm install --legacy-peer-deps","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import {Component, ViewChild, ViewEncapsulation} from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example3-selection',\n standalone: true,\n imports: [HotTableModule],\n template: ` \n
\n \n
\n
\n \n
`,\n encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n readonly data = [\n ['Ana García', 'Engineering', 'Senior Engineer', 95000, 'Madrid', 'Spain', 'F', 12, '2026-03-14'],\n ['James Okafor', 'Marketing', 'Product Manager', 88000, 'Lagos', 'Nigeria', 'M', 8, '2026-07-01'],\n ['Li Wei', 'Engineering', 'Frontend Dev', 82000, 'Shanghai', 'China', 'M', 5, '2026-01-10'],\n ['Maria Santos', 'HR', 'HR Specialist', 71000, 'Lisbon', 'Portugal', 'F', 3, '2026-11-20'],\n ['David Kim', 'Engineering', 'Backend Dev', 85000, 'Seoul', 'Korea', 'M', 7, '2026-08-05'],\n ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, 'London', 'UK', 'F', 2, '2026-02-14'],\n ['Ahmed Hassan', 'Finance', 'Controller', 92000, 'Cairo', 'Egypt', 'M', 10, '2026-06-30'],\n ['Sara Johansson', 'Engineering', 'QA Engineer', 78000, 'Stockholm', 'Sweden', 'F', 6, '2026-09-12'],\n ['Carlos Mendez', 'Sales', 'Account Manager', 74000, 'Mexico City', 'Mexico', 'M', 4, '2026-04-25'],\n ];\n\n readonly gridSettings: GridSettings = {\n width: 'auto',\n height: 'auto',\n colWidths: 100,\n rowHeaders: true,\n colHeaders: true,\n outsideClickDeselects: false,\n selectionMode: 'multiple', // 'single', 'range' or 'multiple',\n autoWrapRow: true,\n autoWrapCol: true\n };\n\n output = '';\n\n buttonClick(): void {\n const hot = this.hotTable?.hotInstance;\n const selected = hot?.getSelected() || [];\n\n hot?.suspendRender();\n\n for (let index = 0; index < selected.length; index += 1) {\n const [row1, column1, row2, column2] = selected[index];\n const startRow = Math.max(Math.min(row1, row2), 0);\n const endRow = Math.max(row1, row2);\n const startCol = Math.max(Math.min(column1, column2), 0);\n const endCol = Math.max(column1, column2);\n\n for (let rowIndex = startRow; rowIndex <= endRow; rowIndex += 1) {\n for (\n let columnIndex = startCol;\n columnIndex <= endCol;\n columnIndex += 1\n ) {\n hot?.setDataAtCell(rowIndex, columnIndex, 'data changed');\n hot?.setCellMeta(rowIndex, columnIndex, 'className', 'c-red');\n }\n }\n }\n\n hot?.render();\n hot?.resumeRender();\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/selection/angular/example3.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example3","exampleTitle":"Modify the selected cells","docPermalink":"/selection","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Selection · Modify the selected cells · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import {Component, ViewChild, ViewEncapsulation} from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example3-selection',\n standalone: true,\n imports: [HotTableModule],\n template: ` \n
\n \n
\n
\n \n
`,\n encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n readonly data = [\n ['Ana García', 'Engineering', 'Senior Engineer', 95000, 'Madrid', 'Spain', 'F', 12, '2026-03-14'],\n ['James Okafor', 'Marketing', 'Product Manager', 88000, 'Lagos', 'Nigeria', 'M', 8, '2026-07-01'],\n ['Li Wei', 'Engineering', 'Frontend Dev', 82000, 'Shanghai', 'China', 'M', 5, '2026-01-10'],\n ['Maria Santos', 'HR', 'HR Specialist', 71000, 'Lisbon', 'Portugal', 'F', 3, '2026-11-20'],\n ['David Kim', 'Engineering', 'Backend Dev', 85000, 'Seoul', 'Korea', 'M', 7, '2026-08-05'],\n ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, 'London', 'UK', 'F', 2, '2026-02-14'],\n ['Ahmed Hassan', 'Finance', 'Controller', 92000, 'Cairo', 'Egypt', 'M', 10, '2026-06-30'],\n ['Sara Johansson', 'Engineering', 'QA Engineer', 78000, 'Stockholm', 'Sweden', 'F', 6, '2026-09-12'],\n ['Carlos Mendez', 'Sales', 'Account Manager', 74000, 'Mexico City', 'Mexico', 'M', 4, '2026-04-25'],\n ];\n\n readonly gridSettings: GridSettings = {\n width: 'auto',\n height: 'auto',\n colWidths: 100,\n rowHeaders: true,\n colHeaders: true,\n outsideClickDeselects: false,\n selectionMode: 'multiple', // 'single', 'range' or 'multiple',\n autoWrapRow: true,\n autoWrapCol: true\n };\n\n output = '';\n\n buttonClick(): void {\n const hot = this.hotTable?.hotInstance;\n const selected = hot?.getSelected() || [];\n\n hot?.suspendRender();\n\n for (let index = 0; index < selected.length; index += 1) {\n const [row1, column1, row2, column2] = selected[index];\n const startRow = Math.max(Math.min(row1, row2), 0);\n const endRow = Math.max(row1, row2);\n const startCol = Math.max(Math.min(column1, column2), 0);\n const endCol = Math.max(column1, column2);\n\n for (let rowIndex = startRow; rowIndex <= endRow; rowIndex += 1) {\n for (\n let columnIndex = startCol;\n columnIndex <= endCol;\n columnIndex += 1\n ) {\n hot?.setDataAtCell(rowIndex, columnIndex, 'data changed');\n hot?.setCellMeta(rowIndex, columnIndex, 'className', 'c-red');\n }\n }\n }\n\n hot?.render();\n hot?.resumeRender();\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/selection/angular/example3.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example3","exampleTitle":"Modify the selected cells","docPermalink":"/selection","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example4.ts.json
index 4af6417f..865d4a11 100644
--- a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Selection · Style the selection area · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"npm run start -- --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"npm install --legacy-peer-deps","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example4-selection',\n standalone: true,\n imports: [HotTableModule],\n styles: [`\n #example4 td.area { background-color: rgba(75, 137, 255, 0.2); }\n #example4 td.area.area-1 { background-color: rgba(75, 137, 255, 0.4); }\n #example4 td.area.area-2 { background-color: rgba(75, 137, 255, 0.6); }\n `],\n template: `\n \n
`,\n encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n readonly data = [\n ['Ana García', 'Engineering', 'Senior Engineer', 95000, 'Madrid', 'Spain', 'F', 12, '2026-03-14'],\n ['James Okafor', 'Marketing', 'Product Manager', 88000, 'Lagos', 'Nigeria', 'M', 8, '2026-07-01'],\n ['Li Wei', 'Engineering', 'Frontend Dev', 82000, 'Shanghai', 'China', 'M', 5, '2026-01-10'],\n ['Maria Santos', 'HR', 'HR Specialist', 71000, 'Lisbon', 'Portugal', 'F', 3, '2026-11-20'],\n ['David Kim', 'Engineering', 'Backend Dev', 85000, 'Seoul', 'Korea', 'M', 7, '2026-08-05'],\n ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, 'London', 'UK', 'F', 2, '2026-02-14'],\n ];\n\n readonly gridSettings: GridSettings = {\n width: 'auto',\n height: 'auto',\n colWidths: 100,\n rowHeaders: true,\n colHeaders: true,\n outsideClickDeselects: false,\n selectionMode: 'multiple',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/selection/angular/example4.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example4","exampleTitle":"Style the selection area","docPermalink":"/selection","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Selection · Style the selection area · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example4-selection',\n standalone: true,\n imports: [HotTableModule],\n styles: [`\n #example4 td.area { background-color: rgba(75, 137, 255, 0.2); }\n #example4 td.area.area-1 { background-color: rgba(75, 137, 255, 0.4); }\n #example4 td.area.area-2 { background-color: rgba(75, 137, 255, 0.6); }\n `],\n template: `\n \n
`,\n encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n readonly data = [\n ['Ana García', 'Engineering', 'Senior Engineer', 95000, 'Madrid', 'Spain', 'F', 12, '2026-03-14'],\n ['James Okafor', 'Marketing', 'Product Manager', 88000, 'Lagos', 'Nigeria', 'M', 8, '2026-07-01'],\n ['Li Wei', 'Engineering', 'Frontend Dev', 82000, 'Shanghai', 'China', 'M', 5, '2026-01-10'],\n ['Maria Santos', 'HR', 'HR Specialist', 71000, 'Lisbon', 'Portugal', 'F', 3, '2026-11-20'],\n ['David Kim', 'Engineering', 'Backend Dev', 85000, 'Seoul', 'Korea', 'M', 7, '2026-08-05'],\n ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, 'London', 'UK', 'F', 2, '2026-02-14'],\n ];\n\n readonly gridSettings: GridSettings = {\n width: 'auto',\n height: 'auto',\n colWidths: 100,\n rowHeaders: true,\n colHeaders: true,\n outsideClickDeselects: false,\n selectionMode: 'multiple',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/selection/angular/example4.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example4","exampleTitle":"Style the selection area","docPermalink":"/selection","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example5.ts.json
index ffa7ee6e..8d8e658c 100644
--- a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example5.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Features ▸ Selection · Select cells programmatically · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"npm run start -- --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"npm install --legacy-peer-deps","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example5-selection',\n standalone: true,\n imports: [HotTableModule],\n template: `\n \n
\n \n \n \n
\n
\n \n
`,\n encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n readonly data = [\n ['Ana García', 'Engineering', 'Senior Engineer', 95000, 12, '2026-03-14'],\n ['James Okafor', 'Marketing', 'Product Manager', 88000, 8, '2026-07-01'],\n ['Li Wei', 'Engineering', 'Frontend Dev', 82000, 5, '2026-01-10'],\n ['Maria Santos', 'HR', 'HR Specialist', 71000, 3, '2026-11-20'],\n ['David Kim', 'Engineering', 'Backend Dev', 85000, 7, '2026-08-05'],\n ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, 2, '2026-02-14'],\n ];\n\n readonly gridSettings: GridSettings = {\n width: 'auto',\n height: 'auto',\n colWidths: 100,\n rowHeaders: true,\n colHeaders: true,\n outsideClickDeselects: false,\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n selectCell(): void {\n // Select a single cell: row 1, col 1 (B2)\n this.hotTable?.hotInstance?.selectCell(1, 1);\n }\n\n selectRange(): void {\n // Select a range: row 1, col 1 to row 3, col 3 (B2:D4)\n this.hotTable?.hotInstance?.selectCell(1, 1, 3, 3);\n }\n\n deselect(): void {\n this.hotTable?.hotInstance?.deselectCell();\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/selection/angular/example5.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example5","exampleTitle":"Select cells programmatically","docPermalink":"/selection","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Selection · Select cells programmatically · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example5-selection',\n standalone: true,\n imports: [HotTableModule],\n template: `\n \n
\n \n \n \n
\n
\n \n
`,\n encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n readonly data = [\n ['Ana García', 'Engineering', 'Senior Engineer', 95000, 12, '2026-03-14'],\n ['James Okafor', 'Marketing', 'Product Manager', 88000, 8, '2026-07-01'],\n ['Li Wei', 'Engineering', 'Frontend Dev', 82000, 5, '2026-01-10'],\n ['Maria Santos', 'HR', 'HR Specialist', 71000, 3, '2026-11-20'],\n ['David Kim', 'Engineering', 'Backend Dev', 85000, 7, '2026-08-05'],\n ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, 2, '2026-02-14'],\n ];\n\n readonly gridSettings: GridSettings = {\n width: 'auto',\n height: 'auto',\n colWidths: 100,\n rowHeaders: true,\n colHeaders: true,\n outsideClickDeselects: false,\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n selectCell(): void {\n // Select a single cell: row 1, col 1 (B2)\n this.hotTable?.hotInstance?.selectCell(1, 1);\n }\n\n selectRange(): void {\n // Select a range: row 1, col 1 to row 3, col 3 (B2:D4)\n this.hotTable?.hotInstance?.selectCell(1, 1, 3, 3);\n }\n\n deselect(): void {\n this.hotTable?.hotInstance?.deselectCell();\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/selection/angular/example5.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example5","exampleTitle":"Select cells programmatically","docPermalink":"/selection","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example6.ts.json
new file mode 100644
index 00000000..4c069e8c
--- /dev/null
+++ b/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example6.ts.json
@@ -0,0 +1 @@
+{"framework":"angular","displayName":"Cell Features ▸ Selection · Jump across horizontal edges · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example6-selection',\n standalone: true,\n imports: [HotTableModule],\n template: ` \n \n \n
`,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n readonly data = [\n ['SKU-4821', 'Harbor Goods', 'Electronics', 142],\n ['SKU-0093', 'Alpine Supply Co.', 'Apparel', 67],\n ['SKU-2210', 'Harbor Goods', 'Electronics', 0],\n ['SKU-7734', 'Nordic Traders', 'Home Goods', 58],\n ['SKU-1145', 'Alpine Supply Co.', 'Apparel', 213],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['SKU', 'Supplier', 'Category', 'Quantity'],\n width: 'auto',\n height: 'auto',\n rowHeaders: true,\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n toggleAutoWrapRow(event: Event): void {\n this.hotTable?.hotInstance?.updateSettings({ autoWrapRow: (event.target as HTMLInputElement).checked });\n }\n\n toggleAutoWrapCol(event: Event): void {\n this.hotTable?.hotInstance?.updateSettings({ autoWrapCol: (event.target as HTMLInputElement).checked });\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/selection/angular/example6.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example6","exampleTitle":"Jump across horizontal edges","docPermalink":"/selection","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__javascript__example1.js.json
index 8b289ec3..94d64fc8 100644
--- a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Selection · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"npm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n \n
\n
\n
\n \n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n \n
\n
\n
\n \n
\n
\n
\n \n
\n
\n
\n \n \n \n
\n
\n
\n \n \n \n
\n
\n
\n \n \n \n
\n
\n
\n \n \n \n
\n
\n
\n
\n
setIsOpen(!isOpen)}\n >\n {selectedLabel}\n \n \n {isOpen && (\n \n {options.map((opt) => (\n handleSelect(opt.value)}\n >\n {opt.label}\n \n ))}\n
\n )}\n \n
\n
\n
\n
\n
setIsOpen(!isOpen)}\n >\n {selectedLabel}\n \n \n {isOpen && (\n \n {options.map((opt) => (\n handleSelect(opt.value)}\n >\n {opt.label}\n \n ))}\n
\n )}\n \n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n \n
\n
\n
\n \n \n \n
\n
\n
\n \n \n \n
\n
\n
\n
\n
\n
\n {{ selectedLabel }}\n \n \n \n \n \n \n
\n
\n
\n
\n
\n
\n
\n
\n {{ selectedLabel }}\n \n \n \n \n \n \n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n\n\n"},"docsPath":"guides/cell-features/selection/vue/example4.vue","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example4","exampleTitle":"Style the selection area","docPermalink":"/selection","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Selection · Style the selection area · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n\n \n \n
\n\n\n"},"docsPath":"guides/cell-features/selection/vue/example4.vue","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example4","exampleTitle":"Style the selection area","docPermalink":"/selection","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__vue__example5.vue.json
index 00da1216..ba25c5da 100644
--- a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__vue__example5.vue.json
+++ b/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__vue__example5.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Selection · Select cells programmatically · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"npx --no-install vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"npm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"\n\n\n \n
\n
\n \n \n \n
\n
\n
\n
\n
\n
\n \n \n \n
\n
\n
\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example1-text-alignment',\n standalone: true,\n imports: [HotTableModule],\n template: ` \n \n
`,\n})\nexport class AppComponent {\n\n // generate an array of arrays with dummy data\n readonly data = new Array(100) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(18) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\n readonly gridSettings: GridSettings = {\n height: 320,\n colWidths: 100,\n rowHeaders: true,\n colHeaders: true,\n contextMenu: true,\n mergeCells: [\n { row: 1, col: 1, rowspan: 3, colspan: 3 },\n { row: 3, col: 4, rowspan: 2, colspan: 2 },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n className: 'htCenter',\n cell: [\n { row: 0, col: 0, className: 'htRight' },\n { row: 1, col: 1, className: 'htLeft htMiddle' },\n { row: 3, col: 4, className: 'htLeft htBottom' },\n ],\n afterSetCellMeta: (row: number, col: number, key: string, val: unknown) => {\n console.log('cell meta changed', row, col, key, val);\n }\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/text-alignment/angular/example1.ts","breadcrumb":["Cell Features","Text alignment"],"guide":"guides/cell-features/text-alignment/text-alignment.md","guideTitle":"Text alignment","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-alignment","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Features ▸ Text alignment · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example1-text-alignment',\n standalone: true,\n imports: [HotTableModule],\n template: ` \n \n
`,\n})\nexport class AppComponent {\n\n // generate an array of arrays with dummy data\n readonly data = new Array(100) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(18) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\n readonly gridSettings: GridSettings = {\n height: 320,\n colWidths: 100,\n rowHeaders: true,\n colHeaders: true,\n contextMenu: true,\n mergeCells: [\n { row: 1, col: 1, rowspan: 3, colspan: 3 },\n { row: 3, col: 4, rowspan: 2, colspan: 2 },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n className: 'htCenter',\n cell: [\n { row: 0, col: 0, className: 'htRight' },\n { row: 1, col: 1, className: 'htLeft htMiddle' },\n { row: 3, col: 4, className: 'htLeft htBottom' },\n ],\n afterSetCellMeta: (row: number, col: number, key: string, val: unknown) => {\n console.log('cell meta changed', row, col, key, val);\n }\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/text-alignment/angular/example1.ts","breadcrumb":["Cell Features","Text alignment"],"guide":"guides/cell-features/text-alignment/text-alignment.md","guideTitle":"Text alignment","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-alignment","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__text-alignment__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__text-alignment__javascript__example1.js.json
index 94aa2d13..1b8341d5 100644
--- a/runner/apps/authoring/public/docs-examples/guides__cell-features__text-alignment__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/guides__cell-features__text-alignment__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Features ▸ Text alignment · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"npm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(18) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n data,\n colWidths: 100,\n height: 320,\n rowHeaders: true,\n colHeaders: true,\n contextMenu: true,\n licenseKey: 'non-commercial-and-evaluation',\n mergeCells: [\n { row: 1, col: 1, rowspan: 3, colspan: 3 },\n { row: 3, col: 4, rowspan: 2, colspan: 2 },\n ],\n className: 'htCenter',\n cell: [\n { row: 0, col: 0, className: 'htRight' },\n { row: 1, col: 1, className: 'htLeft htMiddle' },\n { row: 3, col: 4, className: 'htLeft htBottom' },\n ],\n afterSetCellMeta(row, col, key, val) {\n console.log('cell meta changed', row, col, key, val);\n },\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/text-alignment/javascript/example1.js","breadcrumb":["Cell Features","Text alignment"],"guide":"guides/cell-features/text-alignment/text-alignment.md","guideTitle":"Text alignment","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-alignment","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Features ▸ Text alignment · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(18) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n data,\n colWidths: 100,\n height: 320,\n rowHeaders: true,\n colHeaders: true,\n contextMenu: true,\n licenseKey: 'non-commercial-and-evaluation',\n mergeCells: [\n { row: 1, col: 1, rowspan: 3, colspan: 3 },\n { row: 3, col: 4, rowspan: 2, colspan: 2 },\n ],\n className: 'htCenter',\n cell: [\n { row: 0, col: 0, className: 'htRight' },\n { row: 1, col: 1, className: 'htLeft htMiddle' },\n { row: 3, col: 4, className: 'htLeft htBottom' },\n ],\n afterSetCellMeta(row, col, key, val) {\n console.log('cell meta changed', row, col, key, val);\n },\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/text-alignment/javascript/example1.js","breadcrumb":["Cell Features","Text alignment"],"guide":"guides/cell-features/text-alignment/text-alignment.md","guideTitle":"Text alignment","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-alignment","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__text-alignment__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__text-alignment__javascript__example1.ts.json
index ee2d78cc..b094ffe2 100644
--- a/runner/apps/authoring/public/docs-examples/guides__cell-features__text-alignment__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/guides__cell-features__text-alignment__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Features ▸ Text alignment · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"npm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data: string[][] = new Array(100) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(18) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n data,\n colWidths: 100,\n height: 320,\n rowHeaders: true,\n colHeaders: true,\n contextMenu: true,\n licenseKey: 'non-commercial-and-evaluation',\n mergeCells: [\n { row: 1, col: 1, rowspan: 3, colspan: 3 },\n { row: 3, col: 4, rowspan: 2, colspan: 2 },\n ],\n className: 'htCenter',\n cell: [\n { row: 0, col: 0, className: 'htRight' },\n { row: 1, col: 1, className: 'htLeft htMiddle' },\n { row: 3, col: 4, className: 'htLeft htBottom' },\n ],\n afterSetCellMeta(row, col, key, val) {\n console.log('cell meta changed', row, col, key, val);\n },\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/text-alignment/javascript/example1.ts","breadcrumb":["Cell Features","Text alignment"],"guide":"guides/cell-features/text-alignment/text-alignment.md","guideTitle":"Text alignment","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-alignment","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Features ▸ Text alignment · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data: string[][] = new Array(100) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(18) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n data,\n colWidths: 100,\n height: 320,\n rowHeaders: true,\n colHeaders: true,\n contextMenu: true,\n licenseKey: 'non-commercial-and-evaluation',\n mergeCells: [\n { row: 1, col: 1, rowspan: 3, colspan: 3 },\n { row: 3, col: 4, rowspan: 2, colspan: 2 },\n ],\n className: 'htCenter',\n cell: [\n { row: 0, col: 0, className: 'htRight' },\n { row: 1, col: 1, className: 'htLeft htMiddle' },\n { row: 3, col: 4, className: 'htLeft htBottom' },\n ],\n afterSetCellMeta(row, col, key, val) {\n console.log('cell meta changed', row, col, key, val);\n },\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/text-alignment/javascript/example1.ts","breadcrumb":["Cell Features","Text alignment"],"guide":"guides/cell-features/text-alignment/text-alignment.md","guideTitle":"Text alignment","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-alignment","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__text-alignment__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__text-alignment__react__example1.tsx.json
index df69ecc0..625c2a67 100644
--- a/runner/apps/authoring/public/docs-examples/guides__cell-features__text-alignment__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/guides__cell-features__text-alignment__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Features ▸ Text alignment · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"npm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(18) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/text-alignment/react/example1.tsx","breadcrumb":["Cell Features","Text alignment"],"guide":"guides/cell-features/text-alignment/text-alignment.md","guideTitle":"Text alignment","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-alignment","lang":"React (TS)"}
+{"framework":"react","displayName":"Cell Features ▸ Text alignment · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(18) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/text-alignment/react/example1.tsx","breadcrumb":["Cell Features","Text alignment"],"guide":"guides/cell-features/text-alignment/text-alignment.md","guideTitle":"Text alignment","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-alignment","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__text-alignment__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__text-alignment__vue__example1.vue.json
index 2959a5a3..2a8a231b 100644
--- a/runner/apps/authoring/public/docs-examples/guides__cell-features__text-alignment__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/guides__cell-features__text-alignment__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Features ▸ Text alignment · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"npx --no-install vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"npm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n \n
\n"},"docsPath":"guides/cell-features/text-alignment/vue/example1.vue","breadcrumb":["Cell Features","Text alignment"],"guide":"guides/cell-features/text-alignment/text-alignment.md","guideTitle":"Text alignment","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-alignment","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Features ▸ Text alignment · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n \n
\n"},"docsPath":"guides/cell-features/text-alignment/vue/example1.vue","breadcrumb":["Cell Features","Text alignment"],"guide":"guides/cell-features/text-alignment/text-alignment.md","guideTitle":"Text alignment","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-alignment","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__angular__example1.ts.json
index 18c77ac6..f0cc5d0a 100644
--- a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Functions ▸ Cell editor · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"npm run start -- --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"npm install --legacy-peer-deps","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotCellEditorComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n standalone: true,\n imports: [],\n template: `\n `,\n})\nexport class EditorComponent extends HotCellEditorComponent {\n override onFocus(): void {}\n\n toUpperCase(): void {\n this.setValue((this.getValue() ?? '').toUpperCase());\n this.finishEdit.emit();\n }\n\n toLowerCase(): void {\n this.setValue((this.getValue() ?? '').toLowerCase());\n this.finishEdit.emit();\n }\n}\n\n@Component({\n selector: 'example1-cell-editor',\n standalone: true,\n imports: [HotTableModule],\n template: ` \n \n
`,\n})\nexport class AppComponent {\n\n readonly data = [\n ['Obrien Fischer'],\n ['Alexandria Gordon'],\n ['John Stafford'],\n ['Regina Waters'],\n ['Kay Bentley'],\n ['Emerson Drake'],\n ['Dean Stapleton'],\n ];\n\n readonly gridSettings: GridSettings = {\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n width: 250,\n editor: EditorComponent,\n },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-editor/angular/example1.ts","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-editor","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Functions ▸ Cell editor · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotCellEditorComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n standalone: true,\n imports: [],\n template: `\n `,\n})\nexport class EditorComponent extends HotCellEditorComponent {\n override onFocus(): void {}\n\n toUpperCase(): void {\n this.setValue((this.getValue() ?? '').toUpperCase());\n this.finishEdit.emit();\n }\n\n toLowerCase(): void {\n this.setValue((this.getValue() ?? '').toLowerCase());\n this.finishEdit.emit();\n }\n}\n\n@Component({\n selector: 'example1-cell-editor',\n standalone: true,\n imports: [HotTableModule],\n template: ` \n \n
`,\n})\nexport class AppComponent {\n\n readonly data = [\n ['Obrien Fischer'],\n ['Alexandria Gordon'],\n ['John Stafford'],\n ['Regina Waters'],\n ['Kay Bentley'],\n ['Emerson Drake'],\n ['Dean Stapleton'],\n ];\n\n readonly gridSettings: GridSettings = {\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n width: 250,\n editor: EditorComponent,\n },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-editor/angular/example1.ts","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-editor","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__angular__example2.ts.json
index 5178ac21..56350742 100644
--- a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Functions ▸ Cell editor · Class-based editors · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"npm run start -- --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"npm install --legacy-peer-deps","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport { TextEditor } from 'handsontable/editors';\n\nclass CustomEditor extends TextEditor {\n override createElements() {\n super.createElements();\n\n this.TEXTAREA = document.createElement('input');\n this.TEXTAREA.setAttribute('placeholder', 'Custom placeholder');\n this.TEXTAREA.setAttribute('data-hot-input', 'true');\n this.textareaStyle = this.TEXTAREA.style;\n this.TEXTAREA_PARENT.innerText = '';\n this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n }\n}\n\n@Component({\n selector: 'example2-cell-editor',\n standalone: true,\n imports: [HotTableModule],\n template: ` \n \n
`,\n})\nexport class AppComponent {\n\n readonly gridSettings: GridSettings = {\n colHeaders: true,\n startRows: 5,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n colWidths: 200,\n columns: [\n {\n editor: CustomEditor,\n },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-editor/angular/example2.ts","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example2","exampleTitle":"Class-based editors","docPermalink":"/cell-editor","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Functions ▸ Cell editor · Class-based editors · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport { TextEditor } from 'handsontable/editors';\n\nclass CustomEditor extends TextEditor {\n override createElements() {\n super.createElements();\n\n this.TEXTAREA = document.createElement('input');\n this.TEXTAREA.setAttribute('placeholder', 'Custom placeholder');\n this.TEXTAREA.setAttribute('data-hot-input', 'true');\n this.textareaStyle = this.TEXTAREA.style;\n this.TEXTAREA_PARENT.innerText = '';\n this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n }\n}\n\n@Component({\n selector: 'example2-cell-editor',\n standalone: true,\n imports: [HotTableModule],\n template: ` \n \n
`,\n})\nexport class AppComponent {\n\n readonly gridSettings: GridSettings = {\n colHeaders: true,\n startRows: 5,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n colWidths: 200,\n columns: [\n {\n editor: CustomEditor,\n },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-editor/angular/example2.ts","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example2","exampleTitle":"Class-based editors","docPermalink":"/cell-editor","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__angular__example3.ts.json
new file mode 100644
index 00000000..7fc675f6
--- /dev/null
+++ b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__angular__example3.ts.json
@@ -0,0 +1 @@
+{"framework":"angular","displayName":"Cell Functions ▸ Cell editor · Extending an existing editor · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport { TextEditor } from 'handsontable/editors';\nimport Handsontable from 'handsontable/base';\n\nclass PasswordEditor extends TextEditor {\n override createElements(): void {\n super.createElements();\n\n this.TEXTAREA = this.hot.rootDocument.createElement('input') as HTMLInputElement;\n this.TEXTAREA.setAttribute('type', 'password');\n this.TEXTAREA.setAttribute('data-hot-input', 'true');\n this.textareaStyle = this.TEXTAREA.style;\n this.textareaStyle.width = '0';\n this.textareaStyle.height = '0';\n this.TEXTAREA_PARENT.innerText = '';\n this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n }\n}\n\nfunction maskedRenderer(\n _instance: Handsontable.Core,\n td: HTMLTableCellElement,\n _row: number,\n _col: number,\n _prop: string | number,\n value: Handsontable.CellValue\n): HTMLTableCellElement {\n td.innerText = value ? '●●●●●●●●' : '—';\n td.style.letterSpacing = value ? '2px' : 'normal';\n\n return td;\n}\n\n@Component({\n selector: 'example3-cell-editor',\n standalone: true,\n imports: [HotTableModule],\n template: ` \n \n
`,\n})\nexport class AppComponent {\n\n readonly gridSettings: GridSettings = {\n data: [\n ['Alice Chen', 'alice@example.com', 'Admin', 'Wh1stl3!2024'],\n ['Bob Garcia', 'bob@example.com', 'Editor', 'P@ssw0rd42'],\n ['Carol Smith', 'carol@example.com', 'Viewer', 'Tr0ub4dor&3'],\n ['Dave Kim', 'dave@example.com', 'Editor', 'c0rrectH0rs3'],\n ['Eve Johnson', 'eve@example.com', 'Admin', 'Sup3rS3cr3t!'],\n ],\n colHeaders: ['Name', 'Email', 'Role', 'Password'],\n columns: [\n { type: 'text' },\n { type: 'text' },\n { type: 'text' },\n { editor: PasswordEditor as typeof TextEditor, renderer: maskedRenderer },\n ],\n colWidths: [130, 190, 70, 130],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-editor/angular/example3.ts","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example3","exampleTitle":"Extending an existing editor","docPermalink":"/cell-editor","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__javascript__example1.js.json
index e29fb44b..f113a9ff 100644
--- a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Functions ▸ Cell editor · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"npm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { TextEditor } from 'handsontable/editors/textEditor';\n\nregisterAllModules();\n\nclass PasswordEditor extends TextEditor {\n createElements() {\n super.createElements();\n this.TEXTAREA = this.hot.rootDocument.createElement('input');\n this.TEXTAREA.setAttribute('type', 'password');\n this.TEXTAREA.setAttribute('data-hot-input', 'true');\n this.textareaStyle = this.TEXTAREA.style;\n this.textareaStyle.width = '0';\n this.textareaStyle.height = '0';\n this.TEXTAREA_PARENT.innerText = '';\n this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n }\n}\n\nfunction maskedRenderer(hotInstance, td, row, col, prop, value) {\n td.innerText = value ? '●●●●●●●●' : '—';\n td.style.letterSpacing = value ? '2px' : 'normal';\n\n return td;\n}\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n data: [\n ['Alice Chen', 'alice@example.com', 'Admin', 'Wh1stl3!2024'],\n ['Bob Garcia', 'bob@example.com', 'Editor', 'P@ssw0rd42'],\n ['Carol Smith', 'carol@example.com', 'Viewer', 'Tr0ub4dor&3'],\n ['Dave Kim', 'dave@example.com', 'Editor', 'c0rrectH0rs3'],\n ['Eve Johnson', 'eve@example.com', 'Admin', 'Sup3rS3cr3t!'],\n ],\n colHeaders: ['Name', 'Email', 'Role', 'Password'],\n columns: [{ type: 'text' }, { type: 'text' }, { type: 'text' }, { editor: PasswordEditor, renderer: maskedRenderer }],\n colWidths: [130, 190, 70, 130],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-functions/cell-editor/javascript/example1.js","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-editor","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Functions ▸ Cell editor · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { TextEditor } from 'handsontable/editors/textEditor';\n\nregisterAllModules();\n\nclass PasswordEditor extends TextEditor {\n createElements() {\n super.createElements();\n this.TEXTAREA = this.hot.rootDocument.createElement('input');\n this.TEXTAREA.setAttribute('type', 'password');\n this.TEXTAREA.setAttribute('data-hot-input', 'true');\n this.textareaStyle = this.TEXTAREA.style;\n this.textareaStyle.width = '0';\n this.textareaStyle.height = '0';\n this.TEXTAREA_PARENT.innerText = '';\n this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n }\n}\n\nfunction maskedRenderer(hotInstance, td, row, col, prop, value) {\n td.innerText = value ? '●●●●●●●●' : '—';\n td.style.letterSpacing = value ? '2px' : 'normal';\n\n return td;\n}\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n data: [\n ['Alice Chen', 'alice@example.com', 'Admin', 'Wh1stl3!2024'],\n ['Bob Garcia', 'bob@example.com', 'Editor', 'P@ssw0rd42'],\n ['Carol Smith', 'carol@example.com', 'Viewer', 'Tr0ub4dor&3'],\n ['Dave Kim', 'dave@example.com', 'Editor', 'c0rrectH0rs3'],\n ['Eve Johnson', 'eve@example.com', 'Admin', 'Sup3rS3cr3t!'],\n ],\n colHeaders: ['Name', 'Email', 'Role', 'Password'],\n columns: [{ type: 'text' }, { type: 'text' }, { type: 'text' }, { editor: PasswordEditor, renderer: maskedRenderer }],\n colWidths: [130, 190, 70, 130],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-functions/cell-editor/javascript/example1.js","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-editor","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__javascript__example1.ts.json
index a05fa486..763eb734 100644
--- a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Functions ▸ Cell editor · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"npm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { TextEditor } from 'handsontable/editors/textEditor';\n\nregisterAllModules();\n\nclass PasswordEditor extends TextEditor {\n override createElements(): void {\n super.createElements();\n this.TEXTAREA = this.hot.rootDocument.createElement('input') as HTMLInputElement;\n this.TEXTAREA.setAttribute('type', 'password');\n this.TEXTAREA.setAttribute('data-hot-input', 'true');\n this.textareaStyle = this.TEXTAREA.style;\n this.textareaStyle.width = '0';\n this.textareaStyle.height = '0';\n this.TEXTAREA_PARENT.innerText = '';\n this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n }\n}\n\nfunction maskedRenderer(\n hotInstance: Handsontable.Core,\n td: HTMLTableCellElement,\n row: number,\n col: number,\n prop: string | number,\n value: any\n): HTMLTableCellElement {\n td.innerText = value ? '●●●●●●●●' : '—';\n td.style.letterSpacing = value ? '2px' : 'normal';\n\n return td;\n}\n\nconst container = document.querySelector('#example1') as HTMLElement;\n\nnew Handsontable(container, {\n data: [\n ['Alice Chen', 'alice@example.com', 'Admin', 'Wh1stl3!2024'],\n ['Bob Garcia', 'bob@example.com', 'Editor', 'P@ssw0rd42'],\n ['Carol Smith', 'carol@example.com', 'Viewer', 'Tr0ub4dor&3'],\n ['Dave Kim', 'dave@example.com', 'Editor', 'c0rrectH0rs3'],\n ['Eve Johnson', 'eve@example.com', 'Admin', 'Sup3rS3cr3t!'],\n ],\n colHeaders: ['Name', 'Email', 'Role', 'Password'],\n columns: [\n { type: 'text' },\n { type: 'text' },\n { type: 'text' },\n { editor: PasswordEditor as typeof TextEditor, renderer: maskedRenderer },\n ],\n colWidths: [130, 190, 70, 130],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-functions/cell-editor/javascript/example1.ts","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-editor","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Functions ▸ Cell editor · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { TextEditor } from 'handsontable/editors/textEditor';\n\nregisterAllModules();\n\nclass PasswordEditor extends TextEditor {\n override createElements(): void {\n super.createElements();\n this.TEXTAREA = this.hot.rootDocument.createElement('input') as HTMLInputElement;\n this.TEXTAREA.setAttribute('type', 'password');\n this.TEXTAREA.setAttribute('data-hot-input', 'true');\n this.textareaStyle = this.TEXTAREA.style;\n this.textareaStyle.width = '0';\n this.textareaStyle.height = '0';\n this.TEXTAREA_PARENT.innerText = '';\n this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n }\n}\n\nfunction maskedRenderer(\n hotInstance: Handsontable.Core,\n td: HTMLTableCellElement,\n row: number,\n col: number,\n prop: string | number,\n value: any\n): HTMLTableCellElement {\n td.innerText = value ? '●●●●●●●●' : '—';\n td.style.letterSpacing = value ? '2px' : 'normal';\n\n return td;\n}\n\nconst container = document.querySelector('#example1') as HTMLElement;\n\nnew Handsontable(container, {\n data: [\n ['Alice Chen', 'alice@example.com', 'Admin', 'Wh1stl3!2024'],\n ['Bob Garcia', 'bob@example.com', 'Editor', 'P@ssw0rd42'],\n ['Carol Smith', 'carol@example.com', 'Viewer', 'Tr0ub4dor&3'],\n ['Dave Kim', 'dave@example.com', 'Editor', 'c0rrectH0rs3'],\n ['Eve Johnson', 'eve@example.com', 'Admin', 'Sup3rS3cr3t!'],\n ],\n colHeaders: ['Name', 'Email', 'Role', 'Password'],\n columns: [\n { type: 'text' },\n { type: 'text' },\n { type: 'text' },\n { editor: PasswordEditor as typeof TextEditor, renderer: maskedRenderer },\n ],\n colWidths: [130, 190, 70, 130],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-functions/cell-editor/javascript/example1.ts","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-editor","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__javascript__example2.js.json
index 66cada45..c901d179 100644
--- a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Functions ▸ Cell editor · Class-based editors · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"npm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseEditor } from 'handsontable/editors/baseEditor';\nimport { stopImmediatePropagation } from 'handsontable/helpers/dom/event';\nregisterAllModules();\nclass SelectEditor extends BaseEditor {\n init() {\n this.select = this.hot.rootDocument.createElement('SELECT');\n this.select.setAttribute('data-hot-input', 'true');\n this.select.classList.add('htSelectEditor');\n this.select.style.display = 'none';\n this.hot.rootElement.appendChild(this.select);\n }\n prepare(row, col, prop, td, originalValue, cellProperties) {\n super.prepare(row, col, prop, td, originalValue, cellProperties);\n const rawOptions = this.cellProperties.selectOptions ?? [];\n const options = Array.isArray(rawOptions)\n ? Object.fromEntries(rawOptions.map((v) => [v, v]))\n : rawOptions;\n this.select.innerText = '';\n Object.keys(options).forEach((key) => {\n const option = this.hot.rootDocument.createElement('OPTION');\n option.value = key;\n option.innerText = options[key];\n this.select.appendChild(option);\n });\n }\n getValue() {\n return this.select.value;\n }\n setValue(value) {\n this.select.value = value;\n }\n open() {\n const { top, start, width, height } = this.getEditedCellRect();\n const s = this.select.style;\n s.height = `${height}px`;\n s.minWidth = `${width}px`;\n s.top = `${top}px`;\n s[this.hot.isRtl() ? 'right' : 'left'] = `${start}px`;\n s.margin = '0px';\n s.display = '';\n this.addHook('beforeKeyDown', (event) => {\n const { selectedIndex, length } = this.select;\n if (event.keyCode === 38 && selectedIndex > 0) {\n this.select[selectedIndex - 1].selected = true;\n stopImmediatePropagation(event);\n event.preventDefault();\n }\n else if (event.keyCode === 40 && selectedIndex < length - 1) {\n this.select[selectedIndex + 1].selected = true;\n stopImmediatePropagation(event);\n event.preventDefault();\n }\n });\n }\n close() {\n this.select.style.display = 'none';\n this.clearHooks();\n }\n focus() {\n this.select.focus();\n }\n}\nconst PRIORITY_COLORS = {\n Low: '#22c55e',\n Medium: '#f59e0b',\n High: '#ef4444',\n Critical: '#7c3aed',\n};\nconst STATUS_COLORS = {\n 'To Do': '#6b7280',\n 'In Progress': '#3b82f6',\n Review: '#f59e0b',\n Done: '#22c55e',\n};\nfunction badgeRenderer(colorMap) {\n return (hotInstance, td, row, col, prop, value) => {\n td.innerText = '';\n if (value) {\n const badge = hotInstance.rootDocument.createElement('span');\n badge.className = 'htSelectBadge';\n badge.style.background = colorMap[value] ?? '#6b7280';\n badge.innerText = value;\n td.appendChild(badge);\n }\n return td;\n };\n}\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n data: [\n ['Migrate database schema', 'High', 'In Progress'],\n ['Update API documentation', 'Medium', 'To Do'],\n ['Fix authentication bug', 'Critical', 'Review'],\n ['Add dark mode support', 'Low', 'Done'],\n ['Improve test coverage', 'Medium', 'In Progress'],\n ['Deploy to staging server', 'High', 'To Do'],\n ['Refactor billing module', 'Medium', 'Done'],\n ],\n colHeaders: ['Task', 'Priority', 'Status'],\n columns: [\n { type: 'text' },\n {\n editor: SelectEditor,\n renderer: badgeRenderer(PRIORITY_COLORS),\n selectOptions: ['Low', 'Medium', 'High', 'Critical'],\n },\n {\n editor: SelectEditor,\n renderer: badgeRenderer(STATUS_COLORS),\n selectOptions: ['To Do', 'In Progress', 'Review', 'Done'],\n },\n ],\n colWidths: [220, 110, 130],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".htSelectEditor {\n /* Enables dimension changes for