canvy

efficient html canvas-based code text editor

npm i canvy

pnpm add canvy

yarn add canvy

Examples

# basic

# view source

example/basic.ts

import { add, sub } from 'canvy'

console.log(add(1, 2)) // => 3
console.log(sub(2, 5)) // => -3

# jsx

# view source

example/jsx.tsx

const h = (canvy.args: unknown[]) => args

console.log(<foo bar="baz" />)
// => [ 'foo', { bar: 'baz' } ]

# web

# view source

example/web.tsx

/** @jsxImportSource sigl */
import $ from 'sigl'

import { CanvyElement, EditorScene, File } from 'canvy'

const scene = new EditorScene(document.body)

const Canvy = $.element(CanvyElement)

const canvy = {
  current: null as null | CanvyElement,
}

$.render(
  <Canvy
    ref={canvy}
    scene={scene}
    files={[
      new File({
        value: `\\ hello

\\ world

f()=sin(330);
`,
      }),
    ]}
  />,
  document.body
)

queueMicrotask(() => {
  canvy.current!.$.effect(({ worker }) => {
    worker.postMessage({
      call: 'onmarkers',
      markers: [
        { index: 4, size: 4 },
        { index: 10, size: 3 },
      ],
    })
  })
})

API

# CanvyElement

src/editor.tsx#L130

# constructor(args)

# new CanvyElement()

CanvyElement

# args

any []

# $

Context<CanvyElement & JsxContext<CanvyElement> & {

# ctor

T

<T extends  Class<T>>(ctor)  =>

CleanClass<T>
# ctx

T

<T>(ctx)  =>

ElementWrapper<T>
# ctx

T

<T extends  Reactive<any>>(ctx)  =>

ReactiveWrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}>

# _onblur  =  ...

src/editor.tsx#L183

# ()

()  =>

void

# _onchange  =  ...

src/editor.tsx#L236

# ({ file })

{

# file

src/editor.tsx#L237

File

}

({ file })  =>

void

# _onedit  =  ...

src/editor.tsx#L226

# ({ file })

{

# file

src/editor.tsx#L227

File

}

({ file })  =>

void

# _onentermarker  =  ...

src/editor.tsx#L268

# ({ marker, markerIndex })

{

# marker

src/editor.tsx#L269

Marker

# markerIndex

src/editor.tsx#L269

number

}

({ marker, markerIndex })  =>

void

# _onfocus  =  ...

src/editor.tsx#L191

# ({ id })

{

# id

src/editor.tsx#L192

string

}

({ id })  =>

void

# _onfontsize  =  ...

src/editor.tsx#L246

# ({ fontSize })

{

# fontSize

src/editor.tsx#L247

number

}

({ fontSize })  =>

void

# _onleavemarker  =  ...

src/editor.tsx#L277

# ({ marker, markerIndex })

{

# marker

src/editor.tsx#L278

Marker

# markerIndex

src/editor.tsx#L278

number

}

({ marker, markerIndex })  =>

void

# _onresize  =  ...

src/editor.tsx#L205

# (any)

any

(any)  =>

void

# _onselection  =  ...

src/editor.tsx#L210

# ({ text })

{

# text

src/editor.tsx#L211

string

}

({ text })  =>

void

# _onsnapshot  =  ...

src/editor.tsx#L254

# (snapshot)

# snapshot

any

(snapshot)  =>

void

# canvas

src/editor.tsx#L137

HTMLCanvasElement

# caret

src/editor.tsx#L145

any

# computedRect

Rect

# context

ContextClass<CanvyElement & JsxContext<CanvyElement> & {

# ctor

T

<T extends  Class<T>>(ctor)  =>

CleanClass<T>
# ctx

T

<T>(ctx)  =>

ElementWrapper<T>
# ctx

T

<T extends  Reactive<any>>(ctx)  =>

ReactiveWrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}>

# debug

boolean

# dispatch

Dispatch<

# (name, detail, init)

# name

Event | Narrow<K, string>

# detail

E

# init

CustomEventInit<any>

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

any

>

# editor

src/editor.tsx#L149

Editor

# files  =  []

src/editor.tsx#L169

File []

# fixed

boolean

# focused  =  false

src/editor.tsx#L135

boolean

# focusedFile  =  ...

src/editor.tsx#L170

File

# font

src/editor.tsx#L138

string

# fontName

src/editor.tsx#L139

string

# fontSize  =  11

src/editor.tsx#L134

number

# host

CanvyElement

# hoveringMarker

src/editor.tsx#L266

null | Marker

# hoveringMarkerIndex

src/editor.tsx#L265

null | number

# initialValue

src/editor.tsx#L141

string

# isVisible  =  true

src/editor.tsx#L152

boolean

# layout

LayoutMixin

# layoutRect

Rect

# matrix

Matrix

# onedit

EventHandler<CanvyElement, CustomEvent<any>>

# onentermarker

EventHandler<CanvyElement, CustomEvent<{

# marker

src/editor.tsx#L124

Marker

# markerIndex

src/editor.tsx#L124

number

}>>

# onevent

EventHandler<CanvyElement, CustomEvent<{

# data

src/editor.tsx#L126

any

# name

src/editor.tsx#L126

string

}>>

# onleavemarker

EventHandler<CanvyElement, CustomEvent<{

# marker

src/editor.tsx#L125

Marker

# markerIndex

src/editor.tsx#L125

number

}>>

# onmounted

EventHandler<CanvyElement, CustomEvent<any>>

# onunmounted

EventHandler<CanvyElement, CustomEvent<any>>

# padding  =  3

src/editor.tsx#L147

number

# pixelRatio  =  window.devicePixelRatio

src/editor.tsx#L151

number

# pos

Point

# preventUnmount

boolean

# ready  =  false

src/editor.tsx#L172

boolean

# rect

Rect

# replaceChunk  =  ...

src/editor.tsx#L285

# ({ code, end, markers, start, text })

# params

{

# code

src/editor.tsx#L285

string

# end

src/editor.tsx#L285

number

# markers

src/editor.tsx#L285

Marker []

# start

src/editor.tsx#L285

number

# text

src/editor.tsx#L285

string

}

({ code, end, markers, start, text })  =>

void

# scale

number

# scene

src/editor.tsx#L146

EditorScene

# setFromSnapshot  =  ...

src/editor.tsx#L261

# (snapshot, noScroll)

# snapshot

any

# noScroll

boolean

(snapshot, noScroll)  =>

void

# setLenses  =  ...

src/editor.tsx#L293

# (lenses)

# lenses

Lens []

(lenses)  =>

void

# setMarkers  =  ...

src/editor.tsx#L289

# (markers)

# markers

Marker []

(markers)  =>

void

# setReadableOnly  =  ...

src/editor.tsx#L305

# (readableOnly)

# readableOnly

boolean

(readableOnly)  =>

void

# setValue  =  ...

src/editor.tsx#L297

# (value, clearHistory, scrollToTop)

# value

string

# clearHistory

boolean

# scrollToTop

boolean

(value, clearHistory, scrollToTop)  =>

void

# singleComment  =  '//'

src/editor.tsx#L143

string

# size

Point

# snapshot

src/editor.tsx#L252

any

# value
src/editor.tsx#L154
# _ondraw()

src/editor.tsx#L180

_ondraw()  =>

void

# _onready()

src/editor.tsx#L177

_onready()  =>

void

# created(ctx)

# ctx

Context<CanvyElement & JsxContext<CanvyElement> & {

# ctor

T

<T extends  Class<T>>(ctor)  =>

CleanClass<T>
# ctx

T

<T>(ctx)  =>

ElementWrapper<T>
# ctx

T

<T extends  Reactive<any>>(ctx)  =>

ReactiveWrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}>

created(ctx)  =>

void

# handleEvent(eventName, data)

src/editor.tsx#L738

# eventName

string

# data

object

handleEvent(eventName, data)  =>

any

# mounted($)

src/editor.tsx#L309

# $

Context<CanvyElement & JsxContext<CanvyElement> & {

# ctor

T

<T extends  Class<T>>(ctor)  =>

CleanClass<T>
# ctx

T

<T>(ctx)  =>

ElementWrapper<T>
# ctx

T

<T extends  Reactive<any>>(ctx)  =>

ReactiveWrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}>

mounted($)  =>

void

# on(name)

# name

K

on<K>(name)  =>

On<Fn<[ EventHandler<CanvyElement, LifecycleEvents & CanvyEvents [K]> ], Off>>

# setCaret(any)

src/editor.tsx#L174

any

setCaret(any)  =>

void

# toJSON()

toJSON()  =>

Pick<CanvyElement, keyof CanvyElement>

# EditorScene

src/editor-scene.ts#L6

# constructor(data)

src/editor-scene.ts#L28

# new EditorScene()

EditorScene

# data

Partial<EditorScene>

# $

Context<EditorScene & {

# ctor

T

<T extends  Class<T>>(ctor)  =>

CleanClass<T>
# ctx

T

<T>(ctx)  =>

ElementWrapper<T>
# ctx

T

<T extends  Reactive<any>>(ctx)  =>

ReactiveWrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}>

# activeEditor

src/editor-scene.ts#L18

null | CanvyElement

# caret

src/editor-scene.ts#L12

null

# context

ContextClass<EditorScene & {

# ctor

T

<T extends  Class<T>>(ctor)  =>

CleanClass<T>
# ctx

T

<T>(ctx)  =>

ElementWrapper<T>
# ctx

T

<T extends  Reactive<any>>(ctx)  =>

ReactiveWrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}>

# editors  =  ...

src/editor-scene.ts#L11

ImmSet<CanvyElement>

# fullEditor

src/editor-scene.ts#L19

null | CanvyElement

# ignoredElements  =  []

src/editor-scene.ts#L16

any []

# isValidTarget

src/editor-scene.ts#L14

# (el)

# el

HTMLElement

(el)  =>

boolean

# layout

src/editor-scene.ts#L21

{

# pos

src/editor-scene.ts#L22

Point

# state

src/editor-scene.ts#L24

any

# viewFrameNormalRect

src/editor-scene.ts#L23

Rect

# viewMatrix

src/editor-scene.ts#L25

Matrix

}

# selectionText  =  ''

src/editor-scene.ts#L10

string

# self

EditorScene

# created($)

src/editor-scene.ts#L32

# $

Context<EditorScene & {

# ctor

T

<T extends  Class<T>>(ctor)  =>

CleanClass<T>
# ctx

T

<T>(ctx)  =>

ElementWrapper<T>
# ctx

T

<T extends  Reactive<any>>(ctx)  =>

ReactiveWrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}>

created($)  =>

void

# destroy()

destroy()  =>

void

# register(editor)

src/editor-scene.ts#L346

# editor

CanvyElement

register(editor)  =>

void

# toJSON()

toJSON()  =>

Pick<EditorScene, keyof EditorScene>

# File

src/editor.tsx#L33

# constructor(data)

src/editor.tsx#L40

# new File()

File

# data  =  {}

Partial<File>

# canvy

src/editor.tsx#L37

CanvyElement

# id

src/editor.tsx#L34

string

# previousId

src/editor.tsx#L38

string

# title

src/editor.tsx#L35

string

# value

src/editor.tsx#L36

string

# delete()

src/editor.tsx#L83

delete()  =>

void

# focus()

src/editor.tsx#L62

focus()  =>

void

# moveDown()

src/editor.tsx#L109

moveDown()  =>

undefined | File []

# moveUp()

src/editor.tsx#L96

moveUp()  =>

undefined | File []

# rename(newTitle)

src/editor.tsx#L78

# newTitle

string

rename(newTitle)  =>

void

# setColor(color)

src/editor.tsx#L66

# color

string

setColor(color)  =>

void

# setData({ id, title })

src/editor.tsx#L70

# data

{

# id

src/editor.tsx#L70

string

# title

src/editor.tsx#L70

string

}

setData({ id, title })  =>

void

# toJSON()

src/editor.tsx#L47

toJSON()  =>

{
# id  =  ...

src/editor.tsx#L49

string

# title  =  ...

src/editor.tsx#L50

string

# value  =  ...

src/editor.tsx#L51

undefined | string

}

# updateMeta()

src/editor.tsx#L55

updateMeta()  =>

void

# CanvyEvents

src/editor.tsx#L123

# edit

src/editor.tsx#L127

CustomEvent<any>

# entermarker

src/editor.tsx#L124

CustomEvent<{

# marker

src/editor.tsx#L124

Marker

# markerIndex

src/editor.tsx#L124

number

}>

# event

src/editor.tsx#L126

CustomEvent<{

# data

src/editor.tsx#L126

any

# name

src/editor.tsx#L126

string

}>

# leavemarker

src/editor.tsx#L125

CustomEvent<{

# marker

src/editor.tsx#L125

Marker

# markerIndex

src/editor.tsx#L125

number

}>

# Lens

src/editor.tsx#L4

# line

src/editor.tsx#L5

number

# message

src/editor.tsx#L6

string

# Marker

src/editor.tsx#L9

# color

src/editor.tsx#L14

string

# hoverColor

src/editor.tsx#L15

string

# index

src/editor.tsx#L11

number

# key

src/editor.tsx#L10

string

# kind

src/editor.tsx#L13

"param" | "error"

# message

src/editor.tsx#L16

string

# size

src/editor.tsx#L12

number

# Editors  =  ...

src/editor.tsx#L31

Set<unknown>

# Canvy(props)

src/editor.tsx#L757

# props

ComponentProps<CanvyElement, HTMLElement>

Canvy(props)  =>

VKid

Credits

• everyday-utils by stagas – Everyday utilities
• geometrik by stagas – Geometry classes and utils.
• get-element-offset by stagas – Get accurate DOM element offset.
• immutable-map-set by stagas – Immutable Map and Set objects
• minimal-view by stagas – Minimal reactive component view library.
• rpc-mini by stagas – A mini RPC for MessagePort interfaces.
• sigl by stagas – Web framework
• zerolag by stagas – a highly efficient text buffer for editors with very large buffers

Contributing

Fork or edit and submit a PR.

All contributions are welcome!

License

MIT © 2023 stagas