CodeMirror手習い

npm create vite@latest

npm i codemirror

 <script lang="ts">
-  import svelteLogo from './assets/svelte.svg'
-  import viteLogo from '/vite.svg'
-  import Counter from './lib/Counter.svelte'
+  import Counter from './lib/Editor.svelte'
 </script>

 <main>
-  <div>
-    <a href="https://vite.dev" target="_blank" rel="noreferrer">
-      <img src={viteLogo} class="logo" alt="Vite Logo" />
-    </a>
-    <a href="https://svelte.dev" target="_blank" rel="noreferrer">
-      <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
-    </a>
-  </div>
-  <h1>Vite + Svelte</h1>
-
  <div class="card">
-    <Counter />
+    <Editor />
  </div>

-  <p>
-    Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank" rel="noreferrer">SvelteKit</a>, the official Svelte app framework powered by Vite!
-  </p>
-
-  <p class="read-the-docs">
-    Click on the Vite and Svelte logos to learn more
-  </p>
 </main>

-<style>
-  .logo {
-    height: 6em;
-    padding: 1.5em;
-    will-change: filter;
-    transition: filter 300ms;
-  }
-  .logo:hover {
-    filter: drop-shadow(0 0 2em #646cffaa);
-  }
-  .logo.svelte:hover {
-    filter: drop-shadow(0 0 2em #ff3e00aa);
-  }
-  .read-the-docs {
-    color: #888;
-  }
-</style>

 <script lang="ts">
+  import { EditorState } from '@codemirror/state'
+  import { EditorView } from '@codemirror/view'
+
-  let count: number = $state(0)
-  const increment = () => {
-    count += 1
-  }
+  let editor: HTMLDivElement;
+
+  $effect(() => {  
+    const startState = EditorState.create({
+      doc: 'Hello World !',
+      extensions: [],
+    });
+    const view = new EditorView({
+      state: startState,
+      parent: editor,
+    });
+  });
 </script>

-<button onclick={increment}>
-  count is {count}
-</button>
+<div bind:this={editor} />

Avoid 'new class' — instead, declare the class at the top level scope