@composy/code-editor-core

Framework-neutral Monaco Editor runtime for LDesign code editing surfaces.

Features

• CodeEditor wrapper for value, language, theme, selection, markers, commands and providers.
• DiffEditor wrapper for original/modified models with automatic disposal.
• Factory lifecycle helpers for single editor and diff editor instances.
• Built-in Monaco language extensions for Vue, Svelte, Prisma, GraphQL, TOML and dotenv.
• Built-in Monaco themes plus custom theme/language registration.
• LDesign DOM namespace and token-backed UI styles.

Install

pnpm add @composy/code-editor-core monaco-editor

monaco-editor is a peer dependency.

Usage

import {
  createEditor,
  createDiffEditor,
  destroyEditor,
  detectLanguage,
  codeEditorClasses
} from '@composy/code-editor-core'

const editor = createEditor({
  container: document.querySelector('#editor') as HTMLElement,
  value: 'console.log("hello")',
  language: detectLanguage('main.ts'),
  theme: 'github-light',
  placeholder: 'Start typing...',
  styleVars: {
    height: 'var(--size-40)',
    accent: 'var(--color-primary-500)'
  }
})

editor.on('save', value => {
  console.log(value)
})

const diff = createDiffEditor({
  container: document.querySelector('#diff') as HTMLElement,
  original: 'const a = 1',
  modified: 'const a = 2',
  language: 'typescript'
})

destroyEditor(editor)
diff.dispose()
console.log(codeEditorClasses.container)

Class And Token Rules

All DOM classes use the ldesign-code-editor namespace:

• ldesign-code-editor
• ldesign-code-editor__container
• ldesign-code-editor__placeholder
• ldesign-code-editor-diff
• ldesign-code-editor-diff__container

Component UI styles are injected by ensureCodeEditorStyles() and expose --ldesign-code-editor-* variables. Defaults reference LDesign token CSS variables:

• Colors use packages/color / styles/color.css variables such as --color-gray-200, --color-primary-500, --color-danger-500.
• Sizes use packages/size / styles/size.css variables such as --size-radius-md, --size-spacing-md, --size-font-base.

Load the global LDesign color and size CSS before mounting editors. Monaco syntax themes still use Monaco's required hex color format because monaco.editor.defineTheme() does not consume CSS variables.

Main APIs

• createEditor(options) / destroyEditor(target)
• createDiffEditor(options) / destroyDiffEditor(target)
• getEditorByContainer(container) / getDiffEditorByContainer(container)
• destroyAllEditors() / destroyAllDiffEditors()
• registerTheme(theme) / getAvailableThemes()
• registerLanguage(language) / detectLanguage(filename)
• ensureCodeEditorStyles(document?)

Build Outputs

The package uses @composy/builder and generates:

• dist/index.js
• es/**
• esm/**
• lib/**

Commands

pnpm --filter @composy/code-editor-core type-check
pnpm --filter @composy/code-editor-core build

License

MIT