https://github.com/stagas/code-edit
Lightweight code editor Web Component with syntax highlighting
https://github.com/stagas/code-edit
code custom-element editor html syntax-highlight web-component
Last synced: 7 months ago
JSON representation
Lightweight code editor Web Component with syntax highlighting
- Host: GitHub
- URL: https://github.com/stagas/code-edit
- Owner: stagas
- License: mit
- Created: 2021-12-24T18:02:47.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-08-21T13:30:55.000Z (about 3 years ago)
- Last Synced: 2025-03-28T08:36:21.920Z (7 months ago)
- Topics: code, custom-element, editor, html, syntax-highlight, web-component
- Language: TypeScript
- Homepage: https://stagas.github.io/code-edit/
- Size: 113 KB
- Stars: 6
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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
```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*/ `
export interface HTMLCodeEditElement {
value?: string
language?: string
syntax?: SyntaxDefinition | Promise<{ default: SyntaxDefinition }>
theme?: string
tabsize?: number
tabstyle?: 'tabs' | 'spaces'
comments?: string
}
`
```
## API
# CodeEditElement src/code-edit.tsx#L172
# constructor() node_modules/typescript/lib/lib.dom.d.ts#L6370
# new CodeEditElement()
$ Context<CodeEditElement & JsxContext<CodeEditElement> & Omit<{
# ctor
Class<T>
<T>(ctor) =>
CleanClass<T>
ctx <T>(ctx) =>
Wrapper<T>
# 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
{
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>(ctx) =>
Wrapper<T>
# Boolean
undefined | boolean
Number undefined | number
String undefined | string
"transition">> dispatch Dispatch<# (name, detail, init)
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 # 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 # 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 # 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>(ctx) =>
Wrapper<T>
# 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>(ctx) =>
Wrapper<T>
# Boolean
undefined | boolean
Number undefined | number
String undefined | string
"transition">> mounted($) =>
- void
on(name) # name
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 onenter src/code-edit.tsx#L32 # onleave src/code-edit.tsx#L33 # 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](https://npmjs.org/package/code-syntax) by [stagas](https://github.com/stagas) – Code syntax highlight Web Component
- [get-element-offset](https://npmjs.org/package/get-element-offset) by [stagas](https://github.com/stagas) – Get accurate DOM element offset.
- [relative-mouse](https://npmjs.org/package/relative-mouse) by [stagas](https://github.com/stagas) – Get mouse position relative to a DOM element.
- [sigl](https://npmjs.org/package/sigl) by [stagas](https://github.com/stagas) – Web framework
- [super-impose](https://npmjs.org/package/super-impose) by [stagas](https://github.com/stagas) – Web Component that super imposes one child over another to the same scroll position
- [textarea-code](https://npmjs.org/package/textarea-code) by [stagas](https://github.com/stagas) – Web Component that extends a textarea element with code editor behavior.
## Contributing
[Fork](https://github.com/stagas/code-edit/fork) or [edit](https://github.dev/stagas/code-edit) and submit a PR.
All contributions are welcome!
## License
MIT © 2022 [stagas](https://github.com/stagas)