switch to codemirror (sveltejs#252)

* switch to codemirror

* style tweaks

* focus management

* tweak styles

* server-render initially selected file

* fix

* fix

* fix most tests

* get tests passing

---------

Co-authored-by: Rich Harris <[email protected]>

Author: Rich-Harris

.github/workflows/node.js.yml

@@ -11,7 +11,7 @@ env:
   PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: '1'
 
 jobs:
-  build:
+  test:
     runs-on: ubuntu-latest
 
     strategy:
@@ -29,5 +29,4 @@ jobs:
           cache: 'pnpm'
       - run: pnpm install --frozen-lockfile
       - run: pnpm playwright install chromium
-      - run: pnpm build
       - run: pnpm test

.gitignore

@@ -10,4 +10,5 @@
 .apps
 .vercel
 /content/tutorial/common/.svelte-kit
-/content/tutorial/common/node_modules
+/content/tutorial/common/node_modules
+/test-results

package.json

@@ -5,7 +5,7 @@
 		"dev": "vite dev",
 		"build": "node scripts/create-common-bundle && vite build",
 		"preview": "vite preview",
-		"test": "playwright test",
+		"test": "npm run build && playwright test",
 		"check": "svelte-check --tsconfig ./jsconfig.json",
 		"check:watch": "svelte-check --tsconfig ./jsconfig.json --watch",
 		"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. .",
@@ -32,14 +32,27 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@codemirror/autocomplete": "^6.4.2",
+		"@codemirror/commands": "^6.2.2",
+		"@codemirror/lang-css": "^6.1.1",
+		"@codemirror/lang-html": "^6.4.2",
+		"@codemirror/lang-javascript": "^6.1.4",
+		"@codemirror/language": "^6.6.0",
+		"@codemirror/state": "^6.2.0",
+		"@codemirror/view": "^6.9.2",
 		"@fontsource/roboto-mono": "^4.5.10",
+		"@lezer/common": "^1.0.2",
+		"@lezer/highlight": "^1.1.3",
+		"@lezer/javascript": "^1.4.1",
+		"@lezer/lr": "^1.3.3",
+		"@replit/codemirror-lang-svelte": "^6.0.0",
 		"@rich_harris/svelte-split-pane": "^1.0.0",
 		"@webcontainer/api": "^1.0.2",
 		"adm-zip": "^0.5.10",
 		"ansi-to-html": "^0.7.2",
 		"base64-js": "^1.5.1",
+		"codemirror": "^6.0.1",
 		"marked": "^4.2.12",
-		"monaco-editor": "^0.36.1",
 		"port-authority": "^2.0.1",
 		"prism-svelte": "^0.5.0",
 		"prismjs": "^1.29.0",

playwright.config.ts

@@ -5,7 +5,12 @@ const config: PlaywrightTestConfig = {
 		command: 'pnpm preview',
 		port: 4173
 	},
-	timeout: 60000
+	timeout: 60000,
+	use: {
+		trace: {
+			mode: 'retain-on-failure'
+		}
+	}
 };
 
 export default config;