Technical Architecture

import { EditorState, Compartment } from "@codemirror/state"
import { EditorView, basicSetup } from "codemirror"
import { markdown } from "@codemirror/lang-markdown"
import { oneDark } from "@codemirror/theme-one-dark"
import { linter } from "@codemirror/lint"

const themeCompartment = new Compartment()

export function createEditor(parent: HTMLElement, initialDoc: string) {
  const state = EditorState.create({
    doc: initialDoc,
    extensions: [
      basicSetup,
      markdown({ addKeymap: true }),
      themeCompartment.of(getEditorThemeExtension(theme)),
      linter(markdownLint, { delay: 500 }),
      EditorView.updateListener.of((update) => {
        if (update.docChanged) {
          window.dispatchEvent(
            new CustomEvent("editor-change", {
              detail: { content: update.state.doc.toString() }
            })
          )
        }
      })
    ]
  })
  
  return new EditorView({ state, parent })
}

import { createHighlighterCore } from "shiki/core"
import { createJavaScriptRegexEngine } from "shiki/engine/javascript"
import darkTheme from "@shikijs/themes/one-dark-pro"
import lightTheme from "@shikijs/themes/github-light"

const highlighter = await createHighlighterCore({
  themes: [darkTheme, lightTheme],
  langs: [],
  engine: createJavaScriptRegexEngine()
})

// Languages are loaded dynamically on-demand
const LANGUAGE_LOADERS = {
  js: () => import("@shikijs/langs/js"),
  python: () => import("@shikijs/langs/python"),
  // ... 60+ languages
}

async function ensureLanguageLoaded(lang) {
  if (!loadedLanguages.has(lang)) {
    const module = await LANGUAGE_LOADERS[lang]()
    highlighter.loadLanguage(module.default)
    loadedLanguages.add(lang)
  }
}

interface Document {
  id: string
  title: string
  customTitle?: string
  content: string
  createdAt: number
  updatedAt: number
}

const DB_NAME = "codeink-docs"
const STORE_NAME = "documents"

// Open database
function openDB(): Promise<IDBDatabase> {
  return new Promise((resolve, reject) => {
    const req = indexedDB.open(DB_NAME, 1)
    req.onupgradeneeded = () => {
      req.result.createObjectStore(STORE_NAME, { keyPath: "id" })
    }
    req.onsuccess = () => resolve(req.result)
  })
}

// Save document
export function saveDoc(doc: Document): Promise<void> {
  return withStore("readwrite", (store) => store.put(doc))
}

import { unified } from "unified"
import remarkParse from "remark-parse"
import remarkPresetLintRecommended from "remark-preset-lint-recommended"
import remarkStringify from "remark-stringify"

const processor = unified()
  .use(remarkParse)
  .use(remarkPresetLintRecommended)
  .use(remarkStringify, {
    bullet: "-",
    emphasis: "_",
    strong: "*"
  })

export function markdownLint(view: EditorView): Diagnostic[] {
  const text = view.state.doc.toString()
  const file = processor.processSync(text)
  
  return file.messages.map(msg => ({
    from: msg.place.start.offset,
    to: msg.place.end.offset,
    severity: msg.fatal ? "error" : "warning",
    message: msg.message
  }))
}

export default defineConfig({
  site: 'https://codeink.app',
  output: 'server',
  adapter: cloudflare({
    imageService: 'compile'
  }),
  vite: {
    plugins: [tailwindcss()],
    build: {
      rollupOptions: {
        output: {
          manualChunks(id) {
            // Split vendor bundles
            if (id.includes("@codemirror/")) {
              return "vendor-codemirror"
            }
            if (id.includes("/marked/")) {
              return "vendor-marked"
            }
            if (id.includes("/remark-")) {
              return "vendor-remark"
            }
          }
        }
      }
    }
  }
})