fix(kcodeblock): improve matching perf (#2562)

.vscode/settings.json

@@ -44,5 +44,6 @@
   "scss.scannerExclude": [
     "**/.git",
     "**/bower_components"
-  ]
+  ],
+  "eslint.useFlatConfig": true
 }

package.json

@@ -61,10 +61,12 @@
     "date-fns-tz": "^2.0.1",
     "focus-trap": "^7.6.0",
     "focus-trap-vue": "^4.0.3",
+    "lodash-es": "^4.17.21",
     "nanoid": "^5.0.9",
     "sortablejs": "^1.15.3",
     "swrv": "^1.0.4",
     "v-calendar": "^3.1.2",
+    "virtua": "^0.39.3",
     "vue-draggable-next": "^2.2.1"
   },
   "peerDependencies": {
@@ -86,6 +88,7 @@
     "@semantic-release/git": "^10.0.1",
     "@stylistic/stylelint-plugin": "^3.1.1",
     "@types/inquirer": "^9.0.7",
+    "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.17.1",
     "@types/sortablejs": "^1.15.8",
     "@vitejs/plugin-vue": "^5.1.4",

sandbox/pages/SandboxCodeBlock.vue

@@ -70,7 +70,7 @@
         <KCodeBlock
           v-if="highlighter"
           id="syntax-highlighted-codeblock"
-          :code="code"
+          :code="`${code}\n`.repeat(100)"
           :highlighted-line-numbers="highlightedLines"
           language="json"
           max-height="500"
@@ -122,7 +122,7 @@
       >
         <KCodeBlock
           id="max-height-prop"
-          :code="code"
+          :code="`${code}\n`.repeat(100)"
           language="json"
           max-height="200"
           searchable