• Stars
    star
    1,489
  • Rank 31,555 (Top 0.7 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 4 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

An embeddable code editor for the browser ๐Ÿฏ

CodeJar โ€“ an embeddable code editor for the browser

npm npm bundle size

Features

  • Lightweight (2 kB only)
  • Preserves indentation on a new line
  • Adds closing brackets, quotes
  • Indents line with the Tab key
  • Supports undo/redo

Getting Started

Install CodeJar ๐Ÿฏ ย  via npm:

npm i codejar

CodeJar ๐Ÿฏ ย  can be used via modules:

<script type="module">
  import {CodeJar} from 'https://medv.io/codejar/codejar.js'
</script>

Create an element and init the CodeJar ๐Ÿฏ:

<div class="editor"></div>
<script>
  let jar = CodeJar(document.querySelector('.editor'), hljs.highlightElement)
</script>

Second argument to CodeJar is a highlighting function (in this example highlight.js), but any function may be used:

const highlight = (editor: HTMLElement) => {
  const code = editor.textContent
  // Do something with code and set html.
  editor.innerHTML = code
}

let jar = CodeJar(editor, highlight)

Third argument to CodeJar is options:

  • tab: string replaces "tabs" with given string. Default: \t.
    • Note: use css rule tab-size to customize size.
  • indentOn: RegExp allows auto indent rule to be customized. Default /[({\[]$/.
  • moveToNewLine: RegExp checks in extra newline character need to be added. Default /^[)}\]]/.
  • spellcheck: boolean enables spellchecking on the editor. Default false.
  • catchTab: boolean catches Tab keypress events and replaces it with tab string. Default: true.
  • preserveIdent: boolean keeps indent levels on new line. Default true.
  • addClosing: boolean automatically adds closing brackets, quotes. Default true.
  • history records history. Default true.
  • window window object. Default: window.
let options = {
  tab: ' '.repeat(4), // default is '\t'
  indentOn: /[(\[]$/, // default is /{$/
}

let jar = CodeJar(editor, highlight, options)

Some styles may be applied to our editor to make it better looking:

.editor {
    border-radius: 6px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
    font-family: 'Source Code Pro', monospace;
    font-size: 14px;
    font-weight: 400;
    height: 340px;
    letter-spacing: normal;
    line-height: 20px;
    padding: 10px;
    tab-size: 4;
}

API

updateCode(string)

Updates the code.

jar.updateCode(`let foo = bar`)

updateOptions(Partial<Options>)

Updates the options.

jar.updateOptions({tab: '\t'})

onUpdate((code: string) => void)

Calls callback on code updates.

jar.onUpdate(code => {
  console.log(code)
})

toString(): string

Return current code.

let code = jar.toString()

save(): string

Saves current cursor position.

let pos = jar.save()

restore(pos: Position)

Restore cursor position.

jar.restore(pos)

recordHistory()

Saves current editor state to history.

destroy()

Removes event listeners from editor.

Related

License

MIT

More Repositories

1

fx

Terminal JSON viewer
Go
16,770
star
2

expr

Expression language and expression evaluation for Go
Go
3,910
star
3

monkberry

Monkberry is a JavaScript library for building web user interfaces
JavaScript
1,496
star
4

red

Terminal log analysis tools
Go
1,436
star
5

llama

Terminal file manager
Go
1,421
star
6

finder

CSS Selector Generator ๐Ÿ—บ
HTML
1,014
star
7

countdown

Terminal countdown timer
Go
948
star
8

numbr

Notepad + calculator
TypeScript
319
star
9

eat

Eats anything, spits out JSON ๐Ÿง€
JavaScript
287
star
10

console

Web PHP Console
PHP
268
star
11

gofx

๐Ÿพ fx-like command-line JSON processing tool
Go
233
star
12

ultra-tiny-compiler

Ultra Tiny Compiler
CoffeeScript
180
star
13

jsize

Find out minified and gzipped npm package size
JavaScript
177
star
14

fx-completion

Bash completion for fx
JavaScript
168
star
15

watch

watch tool rewritten in go
Go
153
star
16

spark

GitHub Stars Sparklines โšก๏ธ
JavaScript
129
star
17

cherimola

A very useful things.
PHP
108
star
18

silicone-skeleton

Silicone Skeleton is Silex Framework Edition Skeleton.
PHP
106
star
19

purephp

PurePHP Key-Value Storage
PHP
88
star
20

tinysh

A tiny spawn wrapper for Node.js
JavaScript
57
star
21

chat

PHP Chat Example
JavaScript
54
star
22

fast-json

Fast extraction of part of JSON
JavaScript
52
star
23

ll

Opinionated ls rewrite in Go ๐Ÿงฆ
Go
41
star
24

golang-expression-evaluation-comparison

Go expression evaluation comparison
Go
39
star
25

asciitree

Draw vertical ASCII tree
JavaScript
34
star
26

homer

Internet search engine on React PHP
JavaScript
28
star
27

damka

Russian checkers game
Go
17
star
28

svg-embed

Embed SVG code into DOM. 600 Bytes (gzip)
HTML
16
star
29

year

All unix epoch dates
JavaScript
13
star
30

silicone

Silicone - Organic Silex Framework Edition
PHP
10
star
31

gatsby-source-google-analytics-reporting-api

Gatsby source for Google Anatytics Reporting API
JavaScript
10
star
32

list

Immutable lists in JavaScript without [] and {}
JavaScript
8
star
33

is-it-cloudy

Command line tool to printing weather info ๐ŸŒฆ
JavaScript
8
star
34

prettyjson

๐Ÿงข Pretty print JSON
JavaScript
8
star
35

fx-theme-monokai

Monokai theme for fx
JavaScript
8
star
36

granula

Granula ORM
PHP
7
star
37

kot

๐ŸฑIt's a kot!
JavaScript
7
star
38

fx-theme-night

Night theme for fx
JavaScript
6
star
39

mustcheck

Must & Check
Go
5
star
40

find-npm-name

Find available npm name
JavaScript
5
star
41

lazy-chain

lazy-chain is a JavaScript utility library for ES6
JavaScript
5
star
42

morrow

A text-based role-paying game
TypeScript
3
star
43

sshlogger

SSH Logger
Go
3
star
44

numbr.dev

Numbr Private Code
1
star
45

tto

Tic-Tac-Toe game buid with @medv/list
JavaScript
1
star