From e45533a999f574b97b76dcf9bd6f2278a80a15d9 Mon Sep 17 00:00:00 2001
From: bdbch <git@bdbch.com>
Date: Sat, 8 Aug 2026 18:41:02 +0200
Subject: [PATCH] feat(core): add editor themes and class names

Apply CodeMirror spacing and Tailwind typography styles in the
playground with Hanken Grotesk.
---
 apps/playground/package.json                  |  4 ++
 apps/playground/src/assets/global.css         |  6 +++
 apps/playground/src/layouts/Base.astro        |  2 +-
 apps/playground/src/pages/demos/default.astro | 11 +++++
 packages/core/src/Editor.ts                   | 21 +++++++-
 packages/core/src/types/editor.ts             |  7 ++-
 pnpm-lock.yaml                                | 49 +++++++++++++++++++
 pnpm-workspace.yaml                           |  2 +
 8 files changed, 99 insertions(+), 3 deletions(-)

diff --git a/apps/playground/package.json b/apps/playground/package.json
index 987bfe2..76cfddc 100644
--- a/apps/playground/package.json
+++ b/apps/playground/package.json
@@ -12,10 +12,14 @@
   "dependencies": {
     "@codemirror/state": "catalog:",
     "@codemirror/view": "catalog:",
+    "@fontsource/hanken-grotesk": "catalog:",
     "@tailwindcss/vite": "catalog:",
     "astro": "catalog:",
     "tailwindcss": "catalog:"
   },
+  "devDependencies": {
+    "@tailwindcss/typography": "catalog:"
+  },
   "engines": {
     "node": ">=22.12.0"
   }
diff --git a/apps/playground/src/assets/global.css b/apps/playground/src/assets/global.css
index e41b08e..84d9168 100644
--- a/apps/playground/src/assets/global.css
+++ b/apps/playground/src/assets/global.css
@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@plugin "@tailwindcss/typography";
 
 @theme {
   --color-background: var(--background);
@@ -7,6 +8,11 @@
   --color-foreground-muted: var(--foreground-muted);
   --color-border: var(--border);
   --color-border-muted: var(--border-muted);
+
+  --font-sans:
+    "Hanken Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
 }
 
 :root {
diff --git a/apps/playground/src/layouts/Base.astro b/apps/playground/src/layouts/Base.astro
index ca7a5d0..3e4b83c 100644
--- a/apps/playground/src/layouts/Base.astro
+++ b/apps/playground/src/layouts/Base.astro
@@ -1,5 +1,5 @@
 ---
-import type { $brand } from "astro:schema";
+import "@fontsource/hanken-grotesk/latin.css";
 import "../assets/global.css";
 
 interface NavigationItem {
diff --git a/apps/playground/src/pages/demos/default.astro b/apps/playground/src/pages/demos/default.astro
index e348c51..84db343 100644
--- a/apps/playground/src/pages/demos/default.astro
+++ b/apps/playground/src/pages/demos/default.astro
@@ -12,6 +12,8 @@ import Base from "../../layouts/Base.astro";
 
 <script>
     import { Editor, type InkwellExtension } from "@inkwell/core";
+    import { EditorView } from "@codemirror/view";
+    import type { $brand } from "astro:schema";
 
     const TestExtension: InkwellExtension = {
         name: "test",
@@ -42,10 +44,19 @@ import Base from "../../layouts/Base.astro";
         },
     };
 
+    const theme = EditorView.theme({
+        ".cm-content": { paddingTop: "24px", paddingBottom: "24px" },
+        ".cm-line": { paddingLeft: "24px", paddingRight: "24px" },
+    });
+
     const editor = new Editor({
         element: document.getElementById("editor-mount")!,
         content: "# This is the Inkwell playground\n\nFeel free to play around",
         extensions: [TestExtension],
+        theme,
+        classNames: {
+            editable: "font-sans prose prose-invert",
+        },
     });
 
     const runCommandBtn = document.getElementById("runCommand");
diff --git a/packages/core/src/Editor.ts b/packages/core/src/Editor.ts
index c0faf5e..9617fa6 100644
--- a/packages/core/src/Editor.ts
+++ b/packages/core/src/Editor.ts
@@ -95,15 +95,22 @@ export class Editor extends EventEmitter<EditorEvents> {
 
     this.emit("beforeCreate", { editor: this });
 
+    const editorViewExtensions = [];
+
+    if (this.options.theme) {
+      editorViewExtensions.push(this.options.theme);
+    }
+
     const initialState = EditorState.create({
       doc: content ?? "",
-      extensions: this._extensionManager.cmExtensions,
+      extensions: [...editorViewExtensions, ...this._extensionManager.cmExtensions],
     });
 
     this.view = new EditorView({
       state: initialState,
       parent: element,
     });
+
     this.setupDOM();
 
     this.emit("create", { editor: this });
@@ -117,9 +124,21 @@ export class Editor extends EventEmitter<EditorEvents> {
   private setupDOM(): void {
     this.view.dom.dataset.inkwellEditor = "";
     this.view.dom.classList.add("inkwell-editor");
+    if (this.options.classNames?.editor) {
+      const editorClasses = this.options.classNames.editor.split(" ");
+      for (let i = 0; i < editorClasses.length; i++) {
+        this.view.dom.classList.add(editorClasses[i]);
+      }
+    }
 
     this.view.contentDOM.dataset.inkwellEditorContent = "";
     this.view.contentDOM.classList.add("inkwell-editor--content");
+    if (this.options.classNames?.editable) {
+      const editableClasses = this.options.classNames.editable.split(" ");
+      for (let i = 0; i < editableClasses.length; i++) {
+        this.view.contentDOM.classList.add(editableClasses[i]);
+      }
+    }
 
     // @ts-expect-error we set the editor here so users can access the editor object from the DOM element
     this.options.element["editor"] = this;
diff --git a/packages/core/src/types/editor.ts b/packages/core/src/types/editor.ts
index c7dfd46..2e3ae2e 100644
--- a/packages/core/src/types/editor.ts
+++ b/packages/core/src/types/editor.ts
@@ -1,4 +1,4 @@
-import type { EditorSelection, Transaction } from "@codemirror/state";
+import type { EditorSelection, Extension, Transaction } from "@codemirror/state";
 import type { InkwellExtension } from "./extensions.ts";
 import type { Editor } from "../Editor.ts";
 
@@ -6,6 +6,11 @@ export type EditorOptions = {
   element: HTMLElement;
   content?: string;
   extensions?: InkwellExtension[];
+  theme?: Extension;
+  classNames?: {
+    editor?: string;
+    editable?: string;
+  };
 };
 
 export type EditorEvents = {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 86343d7..481e474 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,6 +12,12 @@ catalogs:
     '@codemirror/view':
       specifier: ^6.43.7
       version: 6.43.7
+    '@fontsource/hanken-grotesk':
+      specifier: ^5.3.0
+      version: 5.3.0
+    '@tailwindcss/typography':
+      specifier: ^0.5.20
+      version: 0.5.20
     '@tailwindcss/vite':
       specifier: ^4.3.3
       version: 4.3.3
@@ -51,6 +57,9 @@ importers:
       '@codemirror/view':
         specifier: 'catalog:'
         version: 6.43.7
+      '@fontsource/hanken-grotesk':
+        specifier: 'catalog:'
+        version: 5.3.0
       '@tailwindcss/vite':
         specifier: 'catalog:'
         version: 4.3.3(@voidzero-dev/vite-plus-core@0.2.8(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(typescript@7.0.2)(yaml@2.9.0))
@@ -60,6 +69,10 @@ importers:
       tailwindcss:
         specifier: 'catalog:'
         version: 4.3.3
+    devDependencies:
+      '@tailwindcss/typography':
+        specifier: 'catalog:'
+        version: 0.5.20(tailwindcss@4.3.3)
 
   packages/core:
     dependencies:
@@ -502,6 +515,9 @@ packages:
       '@noble/hashes':
         optional: true
 
+  '@fontsource/hanken-grotesk@5.3.0':
+    resolution: {integrity: sha512-eiqAvcMT88tCMCBzn6qKgMHGLJKq3NEXO3+0y9JXqzyty2U6KZnaGtbfiQgzRAXfwFp559hJQ0zBgJ6d89AuTA==}
+
   '@img/colour@1.1.0':
     resolution: {integrity: sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==}
     engines: {node: '>=18'}
@@ -1107,6 +1123,11 @@ packages:
     resolution: {integrity: sha512-krXjAikiaFSPaK/FkAQT5UTx3VormQaiZ5hBFlJZ9UFQGB/rwg1MZIhHAG9smMQRTdyJxP6Qt5MwMtdyU5FWrA==}
     engines: {node: '>= 20'}
 
+  '@tailwindcss/typography@0.5.20':
+    resolution: {integrity: sha512-hwbzQuNUfcPvbegQFatVPl/MY/tcM9KLl963hQ5laJKPh81TEZ1+dNG9PirGvcaDBkp+BCshExAyKVPW91dozw==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || >=4.0.0 || insiders'
+
   '@tailwindcss/vite@4.3.3':
     resolution: {integrity: sha512-yYU8cogLeSh/ms2jh8Fj7jaba/EWa7Ja6GoUqYZaraEuCI5YS6ms6ObZgjjedm+jm6XZjdNRWBpPP6Z86oOxcw==}
     peerDependencies:
@@ -1689,6 +1710,11 @@ packages:
     resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==}
     engines: {node: '>= 6'}
 
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
   csso@5.0.5:
     resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
@@ -2218,6 +2244,10 @@ packages:
     resolution: {integrity: sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow==}
     engines: {node: '>=14.19.0'}
 
+  postcss-selector-parser@6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+    engines: {node: '>=4'}
+
   postcss@8.5.24:
     resolution: {integrity: sha512-8RyVklq0owXUTa4xlpzu4l9AaVKIdQvAcOHZWaMh98HgySsUtxRVf/chRe3dsSLqb6i40BzGRzEUddRaI+9TSw==}
     engines: {node: ^10 || ^12 || >=14}
@@ -2518,6 +2548,9 @@ packages:
       uploadthing:
         optional: true
 
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
   vfile-location@5.0.3:
     resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==}
 
@@ -2994,6 +3027,8 @@ snapshots:
 
   '@exodus/bytes@1.15.1': {}
 
+  '@fontsource/hanken-grotesk@5.3.0': {}
+
   '@img/colour@1.1.0':
     optional: true
 
@@ -3385,6 +3420,11 @@ snapshots:
       '@tailwindcss/oxide-win32-arm64-msvc': 4.3.3
       '@tailwindcss/oxide-win32-x64-msvc': 4.3.3
 
+  '@tailwindcss/typography@0.5.20(tailwindcss@4.3.3)':
+    dependencies:
+      postcss-selector-parser: 6.0.10
+      tailwindcss: 4.3.3
+
   '@tailwindcss/vite@4.3.3(@voidzero-dev/vite-plus-core@0.2.8(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(typescript@7.0.2)(yaml@2.9.0))':
     dependencies:
       '@tailwindcss/node': 4.3.3
@@ -3905,6 +3945,8 @@ snapshots:
 
   css-what@6.2.2: {}
 
+  cssesc@3.0.0: {}
+
   csso@5.0.5:
     dependencies:
       css-tree: 2.2.1
@@ -4501,6 +4543,11 @@ snapshots:
 
   pngjs@7.0.0: {}
 
+  postcss-selector-parser@6.0.10:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
   postcss@8.5.24:
     dependencies:
       nanoid: 3.3.16
@@ -4800,6 +4847,8 @@ snapshots:
       ofetch: 1.5.1
       ufo: 1.6.4
 
+  util-deprecate@1.0.2: {}
+
   vfile-location@5.0.3:
     dependencies:
       '@types/unist': 3.0.3
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index a0ef335..d9a6c4b 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -17,6 +17,8 @@ catalog:
   "@tailwindcss/vite": ^4.3.3
   tailwindcss: ^4.3.3
   astro: ^7.2.0
+  "@fontsource/hanken-grotesk": ^5.3.0
+  "@tailwindcss/typography": ^0.5.20
 overrides:
   vite: "catalog:"
   vitest: "catalog:"
-- 
2.51.2