demo.html

<!doctype html>
<html>
  <head>
    <title>Core Demo</title>
    <link rel="stylesheet" href="./view/editor-style.css" />
    <link rel="stylesheet" href="./sandblocks/style.css" />
  </head>
  <body>
    <scm-editor
      id="scm-editor"
      text="  a
  b
  c
"
    ></scm-editor>
    <script type="module">
      import {} from "./sandblocks/editor/editor.js";
      import {} from "./codemirror6/editor.js";
      import {} from "./test.js";
      import { Extension } from "./core/extension.js";
      import { SBMatcher } from "./core/model.js";
      import { languageFor } from "./core/languages.js";
      import { h } from "./external/preact.js";

      const ext = new Extension().registerReplacement({
        name: "test-hiding-replacement",
        query: new SBMatcher(languageFor("javascript"), [
          (x) => x.type === "number",
        ]),
        rerender: () => true,
        component: ({ node }) =>
          h("span", { style: { "background-color": "red" } }, node.text),
      });

      if (document.querySelector("#scm-editor"))
        document.querySelector("#scm-editor").extensions = [ext];
    </script>
  </body>
</html>