https://github.com/stagas/textarea-code

Web Component that extends a textarea element with code editor behavior.
https://github.com/stagas/textarea-code
code custom-elements editor textarea
Last synced: 6 months ago
JSON representation
Web Component that extends a textarea element with code editor behavior.
Host: GitHub
URL: https://github.com/stagas/textarea-code
Owner: stagas
License: mit
Created: 2021-12-16T08:35:19.000Z (about 4 years ago)
Default Branch: main
Last Pushed: 2022-08-03T02:14:02.000Z (over 3 years ago)
Last Synced: 2025-03-25T11:21:55.876Z (10 months ago)
Topics: code, custom-elements, editor, textarea
Language: TypeScript
Homepage:
Size: 90.8 KB
Stars: 5
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project

README

          


textarea-code    





Web Component that extends a textarea element with code editor behavior.





npm i textarea-code 

pnpm add textarea-code 

yarn add textarea-code

## Examples

#  web  
  Try it live
  #  view source  example/web.ts  

```ts

import { TextAreaCodeElement } from 'textarea-code'

customElements.define('textarea-code', TextAreaCodeElement, {

  extends: 'textarea',

})

document.body.innerHTML = /*html*/ `

  html,

  body {

    width: 100%;

    height: 100%;

    padding: 0;

    margin: 0;

  }

  body,

  textarea {

    background: #292827;

    color: #fff;

    caret-color: #fff;

  }

  textarea {

    font-family: monospace;

    font-size: 10pt;

    line-height: 16px;

    padding: 0;

    margin: 0;

  }

`

const output = document.getElementById('output') as TextAreaCodeElement

output.textContent = `\

if (e.altKey || (cmdKey && e.shiftKey)) {

  if (['ArrowUp', 'ArrowDown', 'PageUp', 'PageDown'].includes(e.key)) {

    e.preventDefault()

    this.buffer.moveLines(

      {

        ArrowUp: -1,

        ArrowDown: 1,

        PageUp: -this.pageSize,

        PageDown: this.pageSize,

      }[e.key as 'ArrowUp']

    )

    return

  }

}

`

```





## API

  #  Buffer      src/buffer.ts#L19  
          #  constructor(textarea, insert, options)      src/buffer.ts#L24  
      #  new Buffer()        


Buffer
        #  textarea        


HTMLTextAreaElement
        
#  insert(text)                #  text        


string
        
  

insert(text)   =>  

void



    
#  options   =   {}      

Partial<Options>
        
  
    #  insert      src/buffer.ts#L21  

#  (text)        
        #  text        


string
        
  

(text)   =>  

void

    
        #  options      src/buffer.ts#L22  

Options
        
#  numberOfLines      src/buffer.ts#L42          
#  tab      src/buffer.ts#L38          
#  value      src/buffer.ts#L34          
#  deleteLine()      src/buffer.ts#L362            

deleteLine()   =>  

void
    
#  duplicate()      src/buffer.ts#L334            

duplicate()   =>  

void
    
#  getArea({ end, start })      src/buffer.ts#L112          {

  #  end      src/buffer.ts#L112  


Point
        
#  start      src/buffer.ts#L112  

Point
        
}  getArea({ end, start })   =>  

[  number, number  ]
    
#  getLineCol(n)      src/buffer.ts#L83          #  n        


number
        
  

getLineCol(n)   =>  

Point
    
#  getPositionFromLineCol(pos)      src/buffer.ts#L98          #  pos        


Point
        
  

getPositionFromLineCol(pos)   =>  

number
    
#  getRange()      src/buffer.ts#L66            

getRange()   =>  

{  #  caretIndex   =   ...      


number
        
#  end        

Point
        
#  hasSelection   =   ...      

boolean
        
#  head        

Point
        
#  selectionDirection        

"forward" | "backward" | "none"
        
#  selectionEnd        

number
        
#  selectionStart        

number
        
#  start        

Point
        
#  tail        

Point
        
}
    
#  indent(unindent)      src/buffer.ts#L241          #  unindent        


boolean
        
  

indent(unindent)   =>  

void
    
#  lineAt(line)      src/buffer.ts#L50          #  line        


number
        
  

lineAt(line)   =>  

string
    
#  moveCaretEnd(withSelection)      src/buffer.ts#L264          #  withSelection        


boolean
        
  

moveCaretEnd(withSelection)   =>  

void
    
#  moveCaretHome(withSelection)      src/buffer.ts#L257          #  withSelection        


boolean
        
  

moveCaretHome(withSelection)   =>  

void
    
#  moveCaretLines(lines, withSelection)      src/buffer.ts#L272          #  lines        


number
        
#  withSelection        

boolean
        
  

moveCaretLines(lines, withSelection)   =>  

void
    
#  moveCaretTo(Point, selection, direction)      src/buffer.ts#L124          Point#  selection        


null | Point
        
#  direction   =   ...      

"forward" | "backward" | "none"
        
  

moveCaretTo(Point, selection, direction)   =>  

void
    
#  moveLines(diff)      src/buffer.ts#L281          #  diff        


number
        
  

moveLines(diff)   =>  

void
    
#  replaceBlock(replacer)      src/buffer.ts#L144          #  replacer(text, startLine)        
        #  text        


string
        
#  startLine        

number
        
  

replacer(text, startLine)   =>  

{  #  diff      src/buffer.ts#L145  


number
        
#  left      src/buffer.ts#L145  

Point
        
#  text      src/buffer.ts#L145  

string
        
}

    
  replaceBlock(replacer)   =>  
void
    #  scrollIntoView(pos)      src/buffer.ts#L54          #  pos        


number
        
  

scrollIntoView(pos)   =>  

void
    
#  setSelectionRange(start, end, direction)      src/buffer.ts#L118          #  start        


number
        
#  end        

number
        
#  direction        

SelectionDirection
        
  

setSelectionRange(start, end, direction)   =>  

void
    
#  toggleDoubleComment()      src/buffer.ts#L210            

toggleDoubleComment()   =>  

void
    
#  toggleSingleComment()      src/buffer.ts#L186            

toggleSingleComment()   =>  

void
    
#  getLineCol(value, n)      src/buffer.ts#L85          #  value        


string
        
#  n        

number
        
  

getLineCol(value, n)   =>  

Point
    
#  getPositionFromLineCol(value, point)      src/buffer.ts#L102          #  value        


string
        
#  point        

Point
        
  

getPositionFromLineCol(value, point)   =>  

number
    
#  lineAt(value, line)      src/buffer.ts#L46          #  value        


string
        
#  line        

number
        
  

lineAt(value, line)   =>  

string
    
#  TextAreaCodeElement      src/textarea-code.ts#L10            #  constructor(args)        
      #  new TextAreaCodeElement()        


TextAreaCodeElement
        #  args        


any  []
        
  
    
#  $      src/sigl/dist/types/sigl.d.ts#L25  

Context<TextAreaCodeElement & JsxContext<TextAreaCodeElement> & Omit<{

    #  ctor        


Class<T>
        
  

<T>(ctor)   =>  



CleanClass<T>

  #  ctx        

T | Class<T>
        
  <T>(ctx)   =>  



Wrapper<T>
} & __module & {  #  Boolean      src/sigl/dist/types/index.d.ts#L9  


undefined | boolean
        
#  Number      src/sigl/dist/types/index.d.ts#L8  

undefined | number
        
#  String      src/sigl/dist/types/index.d.ts#L7  

undefined | string
        
}, "transition">>        
#  buffer      src/textarea-code.ts#L15  

Buffer
        
#  comments   =   '// /* */'    src/textarea-code.ts#L13  

string
        
#  context      src/sigl/dist/types/sigl.d.ts#L26  

ContextClass<TextAreaCodeElement & JsxContext<TextAreaCodeElement> & Omit<{

    #  ctor        


Class<T>
        
  

<T>(ctor)   =>  



CleanClass<T>
  #  ctx        

T | Class<T>
        
  <T>(ctx)   =>  



Wrapper<T>
} & __module & {  #  Boolean      src/sigl/dist/types/index.d.ts#L9  


undefined | boolean
        
#  Number      src/sigl/dist/types/index.d.ts#L8  

undefined | number
        
#  String      src/sigl/dist/types/index.d.ts#L7  

undefined | string
        
}, "transition">>        
#  dispatch      src/sigl/dist/types/events.d.ts#L4  

Dispatch<#  (name, detail, init)        
        #  name        


Event | Narrow<K, string>
        
#  detail        

E
        
#  init        

CustomEventInit<any>
        
  

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

any

    
>        #  host      src/sigl/dist/types/sigl.d.ts#L24  

TextAreaCodeElement
        
#  lineHeight   =   16    src/textarea-code.ts#L18  

number
        
#  onKeyDown      src/textarea-code.ts#L19  

EventHandler<TextAreaCodeElement, KeyboardEvent>
        
#  onmounted        

EventHandler<TextAreaCodeElement, CustomEvent<any>>
        
#  onunmounted        

EventHandler<TextAreaCodeElement, CustomEvent<any>>
        
#  pageSize      src/textarea-code.ts#L16  

number
        
#  tabSize   =   2    src/textarea-code.ts#L11  

number
        
#  tabStyle   =   'spaces'    src/textarea-code.ts#L12  

"spaces" | "tabs"
        
#  viewHeight      src/textarea-code.ts#L17  

number
        
#  created(ctx)                #  ctx        


Context<TextAreaCodeElement & JsxContext<TextAreaCodeElement> & Omit<{

    #  ctor        


Class<T>
        
  

<T>(ctor)   =>  



CleanClass<T>

  #  ctx        

T | Class<T>
        
  <T>(ctx)   =>  



Wrapper<T>
} & __module & {  #  Boolean      src/sigl/dist/types/index.d.ts#L9  


undefined | boolean
        
#  Number      src/sigl/dist/types/index.d.ts#L8  

undefined | number
        
#  String      src/sigl/dist/types/index.d.ts#L7  

undefined | string
        
}, "transition">>        
  created(ctx)   =>  
void
    #  mounted($)      src/textarea-code.ts#L21          #  $        


Context<TextAreaCodeElement & JsxContext<TextAreaCodeElement> & Omit<{

    #  ctor        


Class<T>
        
  

<T>(ctor)   =>  



CleanClass<T>

  #  ctx        

T | Class<T>
        
  <T>(ctx)   =>  



Wrapper<T>
} & __module & {  #  Boolean      src/sigl/dist/types/index.d.ts#L9  


undefined | boolean
        
#  Number      src/sigl/dist/types/index.d.ts#L8  

undefined | number
        
#  String      src/sigl/dist/types/index.d.ts#L7  

undefined | string
        
}, "transition">>        
  mounted($)   =>  
void
    #  on(name)                #  name        


K
        
  

on<K>(name)   =>  



On<Fn<[  EventHandler<TextAreaCodeElement, LifecycleEvents & object  [K]>  ], Off>>
    
#  toJSON()                  

toJSON()   =>  



Pick<TextAreaCodeElement, keyof     TextAreaCodeElement>
    
#  Options      src/buffer.ts#L11            #  comments      src/buffer.ts#L14  


[  string, string, string  ]
        
#  tabSize      src/buffer.ts#L13  

number
        
#  tabStyle      src/buffer.ts#L12  

"spaces" | "tabs"
        


#  Point      src/types.ts#L3            #  col      src/types.ts#L5  


number
        
#  line      src/types.ts#L4  

number
        


#  SelectionDirection      src/types.ts#L1  

"forward" | "backward" | "none"
        


## Credits

- [sigl](https://npmjs.org/package/sigl) by [stagas](https://github.com/stagas) – Web framework

## Contributing

[Fork](https://github.com/stagas/textarea-code/fork) or [edit](https://github.dev/stagas/textarea-code) and submit a PR.

All contributions are welcome!

## License

MIT © 2022 [stagas](https://github.com/stagas)
ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/stagas/textarea-code

Awesome Lists containing this project

README

textarea-code
