Editor with linter

WolvenKit · Jan 10, 2025 · ca1fbff · ca1fbff
1 parent b8fb28b
commit ca1fbff
Show file tree

Hide file tree

Showing 17 changed files with 427 additions and 153 deletions.
diff --git a/web/index.html b/web/index.html
@@ -8,6 +8,7 @@
   </head>
   <body>
     <div id="root"></div>
+    <noscript>DebugGuide requires JavaScript enabled to work!</noscript>
     <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/web/package.json b/web/package.json
@@ -9,14 +9,22 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "devalue": "^5.1.1",
-    "solid-js": "^1.9.3",
+    "@codemirror/commands": "^6.8.0",
+    "@codemirror/lang-yaml": "^6.1.2",
+    "@codemirror/language": "^6.10.8",
+    "@codemirror/lint": "^6.8.4",
+    "@codemirror/state": "^6.5.1",
+    "@codemirror/theme-one-dark": "github:codemirror/theme-one-dark",
+    "@codemirror/view": "^6.36.2",
+    "codemirror": "^6.0.1",
+    "solid-js": "^1.9.4",
     "solid-markdown": "2.0.1",
     "yaml": "^2.7.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.5",
-    "typescript": "~5.7.2",
+    "devalue": "^5.1.1",
+    "typescript": "^5.7.3",
     "vite": "^6.0.7",
     "vite-plugin-solid": "^2.11.0"
   }

diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -1,24 +1,22 @@
-import { createSignal } from "solid-js";
-import { Guide } from "./Guide";
-import { doClickActionState } from "./lib/action";
-import { CONTENT } from "./lib/content";
+import { Guide } from "./modes/guide/Guide";
+import { CONTENT } from "$lib/content";
+import { lazy, Match, Suspense, Switch } from "solid-js";
 
-interface AppState {
-  stepHistory: string[];
-}
+const Editor = lazy(() =>
+  import("./modes/editor/Editor").then((m) => ({ default: m.Editor }))
+);
 
 export function App() {
-  const initialStep = window.location.hash.slice(1) || "start";
-
-  const [state, setState] = createSignal<AppState>({
-    stepHistory: [initialStep],
-  });
+  const editorMode = window.location.search.slice(1) == "editor";
+  const initialStep = window.location.hash.slice(1);
 
   return (
-    <Guide
-      content={CONTENT}
-      stepHistory={state().stepHistory}
-      onAction={(step) => setState(doClickActionState(state(), { step }))}
-    />
+    <Switch fallback={<Guide content={CONTENT} initialStep={initialStep} />}>
+      <Match when={editorMode}>
+        <Suspense fallback={<p>Loading...</p>}>
+          <Editor />
+        </Suspense>
+      </Match>
+    </Switch>
   );
 }
diff --git a/web/src/Guide.tsx b/web/src/Guide.tsx
diff --git a/web/src/Button.tsx → web/src/components/Button.tsx b/web/src/Button.tsx → web/src/components/Button.tsx
diff --git a/web/src/index.css b/web/src/index.css
@@ -1,76 +1,81 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+@layer base {
+  :root {
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
 
-  color-scheme: only dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+    color-scheme: only dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: #242424;
 
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
 
-#root {
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
+  body {
+    margin: 0;
+    display: flex;
+    width: 100%;
+    min-height: 100vh;
+    height: 100%;
+  }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
+  h1 {
+    font-size: 1.5em;
+    line-height: 1.1;
+  }
 
-body {
-  margin: 0;
-  display: flex;
-}
+  a {
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
+  }
+  a:hover {
+    color: #535bf2;
+  }
 
-h1 {
-  font-size: 1.5em;
-  line-height: 1.1;
-}
+  button {
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 500;
+    font-family: inherit;
+    background-color: #1a1a1a;
+    cursor: pointer;
+    transition: border-color 0.25s, background 0.25s;
+  }
+  button:hover {
+    border-color: #f3e600;
+  }
+  button:focus,
+  button:focus-visible {
+    outline: 4px auto -webkit-focus-ring-color;
+  }
 
-.container {
-  max-width: 80ch;
+  button:active {
+    background-color: #000000;
+  }
 }
 
-/* Fix lists lmao */
-.step-description * * {
-  text-align: left;
-}
+#root {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s, background 0.25s;
-}
-button:hover {
-  border-color: #f3e600;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+  width: 100%;
+  height: 100%;
 }
 
-button:active {
-  background-color: #000000;
-}
+@layer utils {
+  .button-list {
+    display: inline-grid;
+    gap: 0.5rem;
+  }
 
-.button-list {
-  display: inline-grid;
-  gap: 0.5rem;
+  .container {
+    max-width: 80ch;
+  }
 }
diff --git a/web/src/lib/action.ts b/web/src/lib/action.ts
diff --git a/web/src/modes/editor/CodeMirror.tsx b/web/src/modes/editor/CodeMirror.tsx
@@ -0,0 +1,30 @@
+import { EditorView, basicSetup } from "codemirror";
+import { onCleanup } from "solid-js";
+import { yaml } from "@codemirror/lang-yaml";
+import { indentWithTab } from "@codemirror/commands";
+import { oneDark } from "@codemirror/theme-one-dark";
+import { keymap } from "@codemirror/view";
+import { customLinter } from "./linter";
+import { lintGutter } from "@codemirror/lint";
+
+export interface CodeMirrorProps {
+  content?: string;
+}
+
+export function CodeMirror(props: CodeMirrorProps) {
+  let view = new EditorView({
+    doc: props.content,
+    extensions: [
+      basicSetup,
+      oneDark,
+      yaml(),
+      customLinter,
+      lintGutter(),
+      keymap.of([indentWithTab]),
+    ],
+  });
+
+  onCleanup(() => view.destroy());
+
+  return <>{view.dom}</>;
+}
diff --git a/web/src/modes/editor/Editor.tsx b/web/src/modes/editor/Editor.tsx
@@ -0,0 +1,13 @@
+import contentRaw from "$content/guide.yaml?raw";
+import { CodeMirror } from "./CodeMirror";
+
+import "./editor.css";
+
+export function Editor() {
+  return (
+    <div id="editor">
+      <CodeMirror content={contentRaw} />
+      <div>E</div>
+    </div>
+  );
+}
diff --git a/web/src/modes/editor/editor.css b/web/src/modes/editor/editor.css
@@ -0,0 +1,20 @@
+body {
+  overflow: hidden;
+}
+
+#editor {
+  flex-grow: 1;
+
+  width: 100vw;
+  height: 100vh;
+
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.cm-editor {
+  max-width: 100%;
+  max-height: 100%;
+  overflow: auto;
+  scrollbar: overlay;
+}