code-edit
TypeScript icon, indicating that this package has built-in type declarations

4.1.0 • Public • Published

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

} & __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
# 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
      # 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
# hoveringMarker src/code-edit.tsx#L227
# language  =  '' src/code-edit.tsx#L197

    string

# layout src/code-edit.tsx#L221

    SuperImposeElement

# lenses  =  [] src/code-edit.tsx#L230
# markers  =  [] src/code-edit.tsx#L225
# 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
# onunmounted
# 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

    # 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

    # $

    # ctx

      T | Class<T>

    <T>(ctx)  =>

      Wrapper<T>
    } & __module & {

    # Boolean

      undefined | boolean

    # Number

      undefined | number

    # String

      undefined | string

    }, "transition">>

mounted($)  =>

    void
# on(name)

    # name

    on<K>(name)  =>

# toJSON()
# Lens src/code-edit.tsx#L37
# Marker src/code-edit.tsx#L23
# 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

Credits

Contributing

Fork or edit and submit a PR.

All contributions are welcome!

License

MIT © 2022 stagas

Package Sidebar

Install

npm i code-edit

Weekly Downloads

92

Version

4.1.0

License

MIT

Unpacked Size

1.84 MB

Total Files

18

Last publish

Collaborators

  • stagas