code-edit

Lightweight code editor Web Component with syntax highlighting

npm i code-edit

pnpm add code-edit

yarn add code-edit

Examples

# web

# view source

example/web.ts

import 'code-syntax/themes/default.css'
import 'plenty-themes/laser.css'

import { CodeEditElement, languages } from 'code-edit'

languages.js = import('code-syntax/languages/js.js')
customElements.define('code-edit', CodeEditElement)

const style = document.createElement('style')
style.textContent = /*css*/ `
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
body {
  background: #333;
}
pre {
  color: var(--color);
  background: var(--background);
}
code-edit {
  margin: 15px;
  padding: 15px;
  width: 300px;
  height: 100px;
  font-family: monospace;
  resize: both;
}
`
document.head.appendChild(style)

document.body.innerHTML = /*html*/ `
<code-edit id="demo" autoresize autofocus language="js" theme="laser">export interface HTMLCodeEditElement {
  value?: string
  language?: string
  syntax?: SyntaxDefinition | Promise&lt;{ default: SyntaxDefinition }&gt;
  theme?: string
  tabsize?: number
  tabstyle?: 'tabs' | 'spaces'
  comments?: string
}</code-edit>
`

API

# CodeEditElement

src/code-edit.tsx#L172

# constructor()

node_modules/typescript/lib/lib.dom.d.ts#L6370

# new CodeEditElement()

CodeEditElement

# $

Context<CodeEditElement & JsxContext<CodeEditElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

# CodeSyntax  =  ...

src/code-edit.tsx#L211

Component<CodeSyntaxElement, HTMLElement>

# SuperImpose  =  ...

src/code-edit.tsx#L212

Component<SuperImposeElement, HTMLElement>

# TextAreaCode  =  ...

src/code-edit.tsx#L213

Component<TextAreaCodeElement, HTMLElement>

# TextShadow

src/code-edit.tsx#L215

# ({ x, y })

# props

{

# x

src/code-edit.tsx#L215

number

# y

src/code-edit.tsx#L215

number

}

({ x, y })  =>

VKid

# autoFocus  =  false

src/code-edit.tsx#L193

boolean

# autoResize  =  false

src/code-edit.tsx#L195

boolean

# caretBlink  =  'none'

src/code-edit.tsx#L263

"blink" | "none"

# caretBlinkTimeout  =  -1

src/code-edit.tsx#L264

any

# caretIndex  =  0

src/code-edit.tsx#L261

number

# caretShift  =  'none'

src/code-edit.tsx#L262

"forward" | "backward" | "none"

# comments  =  '// /* */'

src/code-edit.tsx#L205

string

# context

ContextClass<CodeEditElement & JsxContext<CodeEditElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

# dispatch

Dispatch<

# (name, detail, init)

# name

Event | Narrow<K, string>

# detail

E

# init

CustomEventInit<any>

<K, E>(name, detail, init)  =>

any

>

# fontSize  =  9.5

src/code-edit.tsx#L191

number

# hasFocus  =  false

src/code-edit.tsx#L209

boolean

# height

src/code-edit.tsx#L222

HTMLPreElement

# host

CodeEditElement

# hoveringMarker

src/code-edit.tsx#L227

null | Marker

# language  =  ''

src/code-edit.tsx#L197

string

# layout

src/code-edit.tsx#L221

SuperImposeElement

# lenses  =  []

src/code-edit.tsx#L230

Lens []

# markers  =  []

src/code-edit.tsx#L225

Marker []

# markersCss  =  ...

src/code-edit.tsx#L226

# (selector)

# selector

string

(selector)  =>

string

# onInput  =  ...

src/code-edit.tsx#L241

# ()

()  =>

void

# onScroll  =  ...

src/code-edit.tsx#L247

# ()

()  =>

void

# onWheel  =  ...

src/code-edit.tsx#L251

EventHandler<SuperImposeElement, WheelEvent>

# onmounted

EventHandler<CodeEditElement, CustomEvent<any>>

# onunmounted

EventHandler<CodeEditElement, CustomEvent<any>>

# root  =  ...

src/code-edit.tsx#L232

ShadowRoot

# syntax  =  {}

src/code-edit.tsx#L218

SyntaxOrImport

# tabSize  =  2

src/code-edit.tsx#L201

number

# tabStyle  =  'spaces'

src/code-edit.tsx#L203

"spaces" | "tabs"

# textShadow  =  false

src/code-edit.tsx#L207

boolean

# textarea

src/code-edit.tsx#L220

TextAreaCodeElement

# theme  =  ''

src/code-edit.tsx#L199

string

# updateCaret  =  ...

src/code-edit.tsx#L266

# ()

()  =>

void

# value  =  ''

src/code-edit.tsx#L189

string

# scrollLeft
src/code-edit.tsx#L234
# scrollTop
src/code-edit.tsx#L237
# created(ctx)

# ctx

Context<CodeEditElement & JsxContext<CodeEditElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

created(ctx)  =>

void

# mounted($)

src/code-edit.tsx#L283

# $

Context<CodeEditElement & JsxContext<CodeEditElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

mounted($)  =>

void

# on(name)

# name

K

on<K>(name)  =>

On<Fn<[ EventHandler<CodeEditElement, LifecycleEvents & object [K]> ], Off>>

# toJSON()

toJSON()  =>

Pick<CodeEditElement, keyof CodeEditElement>

# Lens

src/code-edit.tsx#L37

{

# line

src/code-edit.tsx#L38

number

# message

src/code-edit.tsx#L39

string

}

# Marker

src/code-edit.tsx#L23

{

# class

src/code-edit.tsx#L28

string

# el

src/code-edit.tsx#L29

HTMLSpanElement

# index

src/code-edit.tsx#L25

number

# key

src/code-edit.tsx#L24

string

# oncreate

src/code-edit.tsx#L31

# (el)

# el

HTMLSpanElement

(el)  =>

void

# onenter

src/code-edit.tsx#L32

# (el)

# el

HTMLSpanElement

(el)  =>

void

# onleave

src/code-edit.tsx#L33

# (el)

# el

HTMLSpanElement

(el)  =>

void

# onwheel

src/code-edit.tsx#L34

$.EventHandler<any, WheelEvent>

# rect

src/code-edit.tsx#L30

DOMRect

# size

src/code-edit.tsx#L26

number

# source

src/code-edit.tsx#L27

string

}

# SyntaxOrImport

SyntaxDefinition | Promise<{

# default

SyntaxDefinition

}>

# languages

Record<string, SyntaxOrImport>

Credits

• code-syntax by stagas – Code syntax highlight Web Component
• get-element-offset by stagas – Get accurate DOM element offset.
• relative-mouse by stagas – Get mouse position relative to a DOM element.
• sigl by stagas – Web framework
• super-impose by stagas – Web Component that super imposes one child over another to the same scroll position
• textarea-code by stagas – Web Component that extends a textarea element with code editor behavior.

Contributing

Fork or edit and submit a PR.

All contributions are welcome!

License

MIT © 2022 stagas