@pyreon/code 0.11.5 → 0.11.7

package/src/editor.ts

@@ -3,7 +3,7 @@ import {
   closeBrackets,
   closeBracketsKeymap,
   completionKeymap,
-} from "@codemirror/autocomplete"
+} from '@codemirror/autocomplete'
 import {
   redo as cmRedo,
   undo as cmUndo,
@@ -11,7 +11,7 @@ import {
   history,
   historyKeymap,
   indentWithTab,
-} from "@codemirror/commands"
+} from '@codemirror/commands'
 import {
   bracketMatching,
   defaultHighlightStyle,
@@ -20,10 +20,10 @@ import {
   indentOnInput,
   indentUnit,
   syntaxHighlighting,
-} from "@codemirror/language"
-import { setDiagnostics as cmSetDiagnostics, lintKeymap } from "@codemirror/lint"
-import { highlightSelectionMatches, searchKeymap } from "@codemirror/search"
-import { Compartment, EditorState, type Extension } from "@codemirror/state"
+} from '@codemirror/language'
+import { setDiagnostics as cmSetDiagnostics, lintKeymap } from '@codemirror/lint'
+import { highlightSelectionMatches, searchKeymap } from '@codemirror/search'
+import { Compartment, EditorState, type Extension } from '@codemirror/state'
 import {
   GutterMarker as CMGutterMarker,
   crosshairCursor,
@@ -41,12 +41,12 @@ import {
   rectangularSelection,
   ViewPlugin,
   type ViewUpdate,
-} from "@codemirror/view"
-import { computed, effect, signal } from "@pyreon/reactivity"
-import { loadLanguage } from "./languages"
-import { minimapExtension } from "./minimap"
-import { resolveTheme } from "./themes"
-import type { EditorConfig, EditorInstance, EditorLanguage, EditorTheme } from "./types"
+} from '@codemirror/view'
+import { computed, effect, signal } from '@pyreon/reactivity'
+import { loadLanguage } from './languages'
+import { minimapExtension } from './minimap'
+import { resolveTheme } from './themes'
+import type { EditorConfig, EditorInstance, EditorLanguage, EditorTheme } from './types'
 
 /**
  * Create a reactive code editor instance.
@@ -74,9 +74,9 @@ import type { EditorConfig, EditorInstance, EditorLanguage, EditorTheme } from "
  */
 export function createEditor(config: EditorConfig = {}): EditorInstance {
   const {
-    value: initialValue = "",
-    language: initialLanguage = "plain",
-    theme: initialTheme = "light",
+    value: initialValue = '',
+    language: initialLanguage = 'plain',
+    theme: initialTheme = 'light',
     lineNumbers: showLineNumbers = true,
     readOnly: initialReadOnly = false,
     foldGutter: showFoldGutter = true,
@@ -128,7 +128,7 @@ export function createEditor(config: EditorConfig = {}): EditorInstance {
   const selection = computed(() => {
     docVersion()
     const v = view.peek()
-    if (!v) return { from: 0, to: 0, text: "" }
+    if (!v) return { from: 0, to: 0, text: '' }
     const sel = v.state.selection.main
     return {
       from: sel.from,
@@ -140,7 +140,7 @@ export function createEditor(config: EditorConfig = {}): EditorInstance {
   const lineCount = computed(() => {
     docVersion()
     const v = view.peek()
-    return v ? v.state.doc.lines : initialValue.split("\n").length
+    return v ? v.state.doc.lines : initialValue.split('\n').length
   })
 
   // ── Line highlight support ──────────────────────────────────────────
@@ -191,30 +191,30 @@ export function createEditor(config: EditorConfig = {}): EditorInstance {
 
     constructor(opts: { class?: string; text?: string; title?: string }) {
       super()
-      this.markerText = opts.text ?? ""
-      this.markerTitle = opts.title ?? ""
-      this.markerClass = opts.class ?? ""
+      this.markerText = opts.text ?? ''
+      this.markerTitle = opts.title ?? ''
+      this.markerClass = opts.class ?? ''
     }
 
     override toDOM() {
-      const el = document.createElement("span")
+      const el = document.createElement('span')
       el.textContent = this.markerText
       el.title = this.markerTitle
       if (this.markerClass) el.className = this.markerClass
-      el.style.cssText = "cursor: pointer; display: inline-block; width: 100%; text-align: center;"
+      el.style.cssText = 'cursor: pointer; display: inline-block; width: 100%; text-align: center;'
       return el
     }
   }
 
   const gutterMarkerExtension = gutter({
-    class: "pyreon-code-gutter-markers",
+    class: 'pyreon-code-gutter-markers',
     lineMarker: (gutterView, line) => {
       const lineNo = gutterView.state.doc.lineAt(line.from).number
       const marker = gutterMarkers.get(lineNo)
       if (!marker) return null
       return new CustomGutterMarker(marker)
     },
-    initialSpacer: () => new CustomGutterMarker({ text: " " }),
+    initialSpacer: () => new CustomGutterMarker({ text: ' ' }),
   })
 
   // ── Build extensions ─────────────────────────────────────────────────
@@ -232,7 +232,7 @@ export function createEditor(config: EditorConfig = {}): EditorInstance {
       highlightSelectionMatches(),
       indentOnInput(),
       syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
-      indentUnit.of(" ".repeat(configTabSize)),
+      indentUnit.of(' '.repeat(configTabSize)),
 
       // Keymaps
       keymap.of([
@@ -283,10 +283,10 @@ export function createEditor(config: EditorConfig = {}): EditorInstance {
     if (enableIndentGuides) {
       exts.push(
         EditorView.theme({
-          ".cm-line": {
-            backgroundImage: "linear-gradient(to right, #e5e7eb 1px, transparent 1px)",
+          '.cm-line': {
+            backgroundImage: 'linear-gradient(to right, #e5e7eb 1px, transparent 1px)',
             backgroundSize: `${configTabSize}ch 100%`,
-            backgroundPosition: "0 0",
+            backgroundPosition: '0 0',
           },
         }),
       )
@@ -425,20 +425,20 @@ export function createEditor(config: EditorConfig = {}): EditorInstance {
   function foldAll(): void {
     const v = view.peek()
     if (!v) return
-    const { foldAll: foldAllCmd } = require("@codemirror/language")
+    const { foldAll: foldAllCmd } = require('@codemirror/language')
     foldAllCmd(v)
   }
 
   function unfoldAll(): void {
     const v = view.peek()
     if (!v) return
-    const { unfoldAll: unfoldAllCmd } = require("@codemirror/language")
+    const { unfoldAll: unfoldAllCmd } = require('@codemirror/language')
     unfoldAllCmd(v)
   }
 
   // ── Diagnostics ────────────────────────────────────────────────────
 
-  function setDiagnostics(diagnostics: import("./types").Diagnostic[]): void {
+  function setDiagnostics(diagnostics: import('./types').Diagnostic[]): void {
     const v = view.peek()
     if (!v) return
     v.dispatch(
@@ -447,7 +447,7 @@ export function createEditor(config: EditorConfig = {}): EditorInstance {
         diagnostics.map((d) => ({
           from: d.from,
           to: d.to,
-          severity: d.severity === "hint" ? "info" : d.severity,
+          severity: d.severity === 'hint' ? 'info' : d.severity,
           message: d.message,
           ...(d.source != null ? { source: d.source } : {}),
         })),
@@ -478,7 +478,7 @@ export function createEditor(config: EditorConfig = {}): EditorInstance {
 
   // ── Gutter markers ────────────────────────────────────────────────
 
-  function setGutterMarker(line: number, marker: import("./types").GutterMarker): void {
+  function setGutterMarker(line: number, marker: import('./types').GutterMarker): void {
     gutterMarkers.set(line, marker)
     const v = view.peek()
     if (v) v.dispatch({ effects: [] })
@@ -513,14 +513,14 @@ export function createEditor(config: EditorConfig = {}): EditorInstance {
 
   function getLine(line: number): string {
     const v = view.peek()
-    if (!v) return ""
+    if (!v) return ''
     const clamped = Math.min(Math.max(1, line), v.state.doc.lines)
     return v.state.doc.line(clamped).text
   }
 
   function getWordAtCursor(): string {
     const v = view.peek()
-    if (!v) return ""
+    if (!v) return ''
     const pos = v.state.selection.main.head
     const line = v.state.doc.lineAt(pos)
     const col = pos - line.from
@@ -539,7 +539,7 @@ export function createEditor(config: EditorConfig = {}): EditorInstance {
     const v = view.peek()
     if (!v) return
     v.dispatch({
-      effects: EditorView.scrollIntoView(pos, { y: "center" }),
+      effects: EditorView.scrollIntoView(pos, { y: 'center' }),
     })
   }
 
@@ -550,8 +550,8 @@ export function createEditor(config: EditorConfig = {}): EditorInstance {
     if (!v) return
 
     // Use string concat to prevent Vite from statically analyzing these optional imports
-    const vimPkg = "@replit/codemirror-" + "vim"
-    const emacsPkg = "@replit/codemirror-" + "emacs"
+    const vimPkg = '@replit/codemirror-' + 'vim'
+    const emacsPkg = '@replit/codemirror-' + 'emacs'
 
     if (enableVim) {
       try {

package/src/index.ts

@@ -24,17 +24,17 @@
  */
 
 // Components
-export { CodeEditor } from "./components/code-editor"
-export { DiffEditor } from "./components/diff-editor"
-export { TabbedEditor } from "./components/tabbed-editor"
+export { CodeEditor } from './components/code-editor'
+export { DiffEditor } from './components/diff-editor'
+export { TabbedEditor } from './components/tabbed-editor'
 // Core
-export { createEditor } from "./editor"
+export { createEditor } from './editor'
 // Languages
-export { getAvailableLanguages, loadLanguage } from "./languages"
+export { getAvailableLanguages, loadLanguage } from './languages'
 // Minimap
-export { minimapExtension } from "./minimap"
+export { minimapExtension } from './minimap'
 // Themes
-export { darkTheme, lightTheme, resolveTheme } from "./themes"
+export { darkTheme, lightTheme, resolveTheme } from './themes'
 
 // Types
 export type {
@@ -49,4 +49,4 @@ export type {
   TabbedEditorConfig,
   TabbedEditorInstance,
   TabbedEditorProps,
-} from "./types"
+} from './types'

package/src/languages.ts

@@ -1,32 +1,32 @@
-import type { Extension } from "@codemirror/state"
-import type { EditorLanguage } from "./types"
+import type { Extension } from '@codemirror/state'
+import type { EditorLanguage } from './types'
 
 /**
  * Language extension loaders — lazy-loaded on demand.
  * Only the requested language is imported, keeping the initial bundle small.
  */
 const languageLoaders: Record<EditorLanguage, () => Promise<Extension>> = {
-  javascript: () => import("@codemirror/lang-javascript").then((m) => m.javascript()),
+  javascript: () => import('@codemirror/lang-javascript').then((m) => m.javascript()),
   typescript: () =>
-    import("@codemirror/lang-javascript").then((m) => m.javascript({ typescript: true })),
-  jsx: () => import("@codemirror/lang-javascript").then((m) => m.javascript({ jsx: true })),
+    import('@codemirror/lang-javascript').then((m) => m.javascript({ typescript: true })),
+  jsx: () => import('@codemirror/lang-javascript').then((m) => m.javascript({ jsx: true })),
   tsx: () =>
-    import("@codemirror/lang-javascript").then((m) =>
+    import('@codemirror/lang-javascript').then((m) =>
       m.javascript({ typescript: true, jsx: true }),
     ),
-  html: () => import("@codemirror/lang-html").then((m) => m.html()),
-  css: () => import("@codemirror/lang-css").then((m) => m.css()),
-  json: () => import("@codemirror/lang-json").then((m) => m.json()),
-  markdown: () => import("@codemirror/lang-markdown").then((m) => m.markdown()),
-  python: () => import("@codemirror/lang-python").then((m) => m.python()),
-  rust: () => import("@codemirror/lang-rust").then((m) => m.rust()),
-  sql: () => import("@codemirror/lang-sql").then((m) => m.sql()),
-  xml: () => import("@codemirror/lang-xml").then((m) => m.xml()),
-  yaml: () => import("@codemirror/lang-yaml").then((m) => m.yaml()),
-  cpp: () => import("@codemirror/lang-cpp").then((m) => m.cpp()),
-  java: () => import("@codemirror/lang-java").then((m) => m.java()),
-  go: () => import("@codemirror/lang-go").then((m) => m.go()),
-  php: () => import("@codemirror/lang-php").then((m) => m.php()),
+  html: () => import('@codemirror/lang-html').then((m) => m.html()),
+  css: () => import('@codemirror/lang-css').then((m) => m.css()),
+  json: () => import('@codemirror/lang-json').then((m) => m.json()),
+  markdown: () => import('@codemirror/lang-markdown').then((m) => m.markdown()),
+  python: () => import('@codemirror/lang-python').then((m) => m.python()),
+  rust: () => import('@codemirror/lang-rust').then((m) => m.rust()),
+  sql: () => import('@codemirror/lang-sql').then((m) => m.sql()),
+  xml: () => import('@codemirror/lang-xml').then((m) => m.xml()),
+  yaml: () => import('@codemirror/lang-yaml').then((m) => m.yaml()),
+  cpp: () => import('@codemirror/lang-cpp').then((m) => m.cpp()),
+  java: () => import('@codemirror/lang-java').then((m) => m.java()),
+  go: () => import('@codemirror/lang-go').then((m) => m.go()),
+  php: () => import('@codemirror/lang-php').then((m) => m.php()),
   ruby: () => Promise.resolve([]),
   shell: () => Promise.resolve([]),
   plain: () => Promise.resolve([]),

package/src/minimap.ts

@@ -1,5 +1,5 @@
-import type { Extension } from "@codemirror/state"
-import { EditorView, ViewPlugin, type ViewUpdate } from "@codemirror/view"
+import type { Extension } from '@codemirror/state'
+import { EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view'
 
 /**
  * Canvas-based minimap extension for CodeMirror 6.
@@ -9,22 +9,22 @@ import { EditorView, ViewPlugin, type ViewUpdate } from "@codemirror/view"
 const MINIMAP_WIDTH = 80
 const CHAR_WIDTH = 1.2
 const LINE_HEIGHT = 2.5
-const MINIMAP_BG = "#1e1e2e"
-const MINIMAP_BG_LIGHT = "#f8fafc"
-const TEXT_COLOR = "#585b70"
-const TEXT_COLOR_LIGHT = "#94a3b8"
-const VIEWPORT_COLOR = "rgba(59, 130, 246, 0.15)"
-const VIEWPORT_BORDER = "rgba(59, 130, 246, 0.4)"
+const MINIMAP_BG = '#1e1e2e'
+const MINIMAP_BG_LIGHT = '#f8fafc'
+const TEXT_COLOR = '#585b70'
+const TEXT_COLOR_LIGHT = '#94a3b8'
+const VIEWPORT_COLOR = 'rgba(59, 130, 246, 0.15)'
+const VIEWPORT_BORDER = 'rgba(59, 130, 246, 0.4)'
 
 function createMinimapCanvas(): HTMLCanvasElement {
-  const canvas = document.createElement("canvas")
+  const canvas = document.createElement('canvas')
   canvas.style.cssText = `position: absolute; right: 0; top: 0; width: ${MINIMAP_WIDTH}px; height: 100%; cursor: pointer; z-index: 5;`
   canvas.width = MINIMAP_WIDTH * 2 // retina
   return canvas
 }
 
 function renderMinimap(canvas: HTMLCanvasElement, view: EditorView): void {
-  const ctx = canvas.getContext("2d")
+  const ctx = canvas.getContext('2d')
   if (!ctx) return
 
   const doc = view.state.doc
@@ -32,7 +32,7 @@ function renderMinimap(canvas: HTMLCanvasElement, view: EditorView): void {
   const height = canvas.clientHeight
   canvas.height = height * 2 // retina
 
-  const isDark = view.dom.classList.contains("cm-dark")
+  const isDark = view.dom.classList.contains('cm-dark')
   const bg = isDark ? MINIMAP_BG : MINIMAP_BG_LIGHT
   const textColor = isDark ? TEXT_COLOR : TEXT_COLOR_LIGHT
 
@@ -64,7 +64,7 @@ function renderMinimap(canvas: HTMLCanvasElement, view: EditorView): void {
     const text = line.text
     let x = 4
     for (let j = 0; j < Math.min(text.length, 60); j++) {
-      if (text[j] !== " " && text[j] !== "\t") {
+      if (text[j] !== ' ' && text[j] !== '\t') {
         ctx.fillRect(x, y, CHAR_WIDTH, 1.5)
       }
       x += CHAR_WIDTH
@@ -107,17 +107,17 @@ export function minimapExtension(): Extension {
         constructor(view: EditorView) {
           this.view = view
           this.canvas = createMinimapCanvas()
-          view.dom.style.position = "relative"
+          view.dom.style.position = 'relative'
           view.dom.appendChild(this.canvas)
 
           // Click to scroll
-          this.canvas.addEventListener("click", (e) => {
+          this.canvas.addEventListener('click', (e) => {
             const rect = this.canvas.getBoundingClientRect()
             const clickY = e.clientY - rect.top
             const fraction = clickY / rect.height
             const scrollTarget =
               fraction * (view.scrollDOM.scrollHeight - view.scrollDOM.clientHeight)
-            view.scrollDOM.scrollTo({ top: scrollTarget, behavior: "smooth" })
+            view.scrollDOM.scrollTo({ top: scrollTarget, behavior: 'smooth' })
           })
 
           this.render()
@@ -142,7 +142,7 @@ export function minimapExtension(): Extension {
     ),
     // Add padding on the right for the minimap
     EditorView.theme({
-      ".cm-scroller": {
+      '.cm-scroller': {
         paddingRight: `${MINIMAP_WIDTH + 8}px`,
       },
     }),

package/src/tabbed-editor.ts

@@ -1,6 +1,6 @@
-import { computed, signal } from "@pyreon/reactivity"
-import { createEditor } from "./editor"
-import type { EditorLanguage, Tab, TabbedEditorConfig, TabbedEditorInstance } from "./types"
+import { computed, signal } from '@pyreon/reactivity'
+import { createEditor } from './editor'
+import type { EditorLanguage, Tab, TabbedEditorConfig, TabbedEditorInstance } from './types'
 
 /**
  * Create a tabbed code editor — multiple files with tab management.
@@ -42,7 +42,7 @@ export function createTabbedEditor(config: TabbedEditorConfig = {}): TabbedEdito
   // ── State ──────────────────────────────────────────────────────────────
 
   const tabs = signal<Tab[]>(tabsWithIds)
-  const activeTabId = signal(tabsWithIds[0]?.id ?? "")
+  const activeTabId = signal(tabsWithIds[0]?.id ?? '')
 
   // Content cache — stores each tab's current content
   const contentCache = new Map<string, string>()
@@ -59,8 +59,8 @@ export function createTabbedEditor(config: TabbedEditorConfig = {}): TabbedEdito
     Object.entries(editorConfig).filter(([_, v]) => v !== undefined),
   )
   const editor = createEditor({
-    value: firstTab?.value ?? "",
-    language: (firstTab?.language ?? "plain") as EditorLanguage,
+    value: firstTab?.value ?? '',
+    language: (firstTab?.language ?? 'plain') as EditorLanguage,
     ...(theme != null ? { theme } : {}),
     ...filteredConfig,
     onChange: (value) => {
@@ -106,7 +106,7 @@ export function createTabbedEditor(config: TabbedEditorConfig = {}): TabbedEdito
     // Restore target tab content
     const cached = contentCache.get(id)
     editor.value.set(cached ?? tab.value)
-    editor.language.set((tab.language ?? "plain") as EditorLanguage)
+    editor.language.set((tab.language ?? 'plain') as EditorLanguage)
   }
 
   function openTab(tab: Tab): void {
@@ -145,8 +145,8 @@ export function createTabbedEditor(config: TabbedEditorConfig = {}): TabbedEdito
         const nextTab = remaining[nextIndex]
         if (nextTab) switchTab(nextTab.id ?? nextTab.name)
       } else {
-        activeTabId.set("")
-        editor.value.set("")
+        activeTabId.set('')
+        editor.value.set('')
       }
     }
   }
@@ -183,8 +183,8 @@ export function createTabbedEditor(config: TabbedEditorConfig = {}): TabbedEdito
       const first = remaining[0]
       if (first) switchTab(first.id ?? first.name)
     } else {
-      activeTabId.set("")
-      editor.value.set("")
+      activeTabId.set('')
+      editor.value.set('')
     }
   }