diff --git a/README.md b/README.md index 2c0dcce..cdddd4d 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,3 @@ -Webpod - deploy JavaScript apps -

CodeJar – an embeddable code editor for the browser

@@ -9,7 +7,7 @@ ## Features -* Lightweight (**2 kB** only) +* Lightweight (**3 kB** only) * Preserves indentation on a new line * Adds closing brackets, quotes * Indents line with the **Tab** key @@ -23,33 +21,25 @@ Install CodeJar 🍯   via npm: npm i codejar ``` -CodeJar 🍯   can be used via modules: - -```html - -``` - Create an element and init the CodeJar 🍯: ```html
``` -Second argument to `CodeJar` is a highlighting function (in this example [highlight.js](https://highlightjs.org)), but any function may be used: +Second argument to `CodeJar` is a highlighting function (like Prism.js, highlight.js): ```ts const highlight = (editor: HTMLElement) => { const code = editor.textContent - // Do something with code and set html. + code = code.replace('foo', 'foo') editor.innerHTML = code } -let jar = CodeJar(editor, highlight) +const jar = CodeJar(editor, highlight) ``` Third argument to `CodeJar` is options: @@ -66,29 +56,12 @@ Third argument to `CodeJar` is options: ```js -let options = { +const 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: - -```css -.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; -} +const jar = CodeJar(editor, highlight, options) ``` ## API @@ -154,8 +127,8 @@ Removes event listeners from editor. ## Related -* [react-codejar](https://github.com/guilhermelimak/react-codejar) - a react wrapper for CodeJar. -* [ngx-codejar](https://github.com/julianpoemp/ngx-codejar) - an angular wrapper for CodeJar. +* [react-codejar](https://github.com/guilhermelimak/react-codejar) - a React wrapper for CodeJar. +* [ngx-codejar](https://github.com/julianpoemp/ngx-codejar) - an Angular wrapper for CodeJar. ## License diff --git a/codejar.ts b/codejar.ts index d966635..6e99e65 100644 --- a/codejar.ts +++ b/codejar.ts @@ -321,22 +321,7 @@ export function CodeJar(editor: HTMLElement, highlight: (e: HTMLElement, pos?: P function handleSelfClosingCharacters(event: KeyboardEvent) { const open = `([{'"` const close = `)]}'"` - const codeAfter = afterCursor() - const codeBefore = beforeCursor() - const escapeCharacter = codeBefore.substr(codeBefore.length - 1) === '\\' - const charAfter = codeAfter.substr(0, 1) - if (close.includes(event.key) && !escapeCharacter && charAfter === event.key) { - // We already have closing char next to cursor. - // Move one char to right. - const pos = save() - preventDefault(event) - pos.start = ++pos.end - restore(pos) - } else if ( - open.includes(event.key) - && !escapeCharacter - && (`"'`.includes(event.key) || ['', ' ', '\n'].includes(charAfter)) - ) { + if (open.includes(event.key)) { preventDefault(event) const pos = save() const wrapText = pos.start == pos.end ? '' : getSelection().toString() @@ -422,7 +407,7 @@ export function CodeJar(editor: HTMLElement, highlight: (e: HTMLElement, pos?: P const text = ((event as any).originalEvent || event) .clipboardData .getData('text/plain') - .replace(/\r/g, '') + .replace(/\r\n?/g, '\n') const pos = save() insert(text) highlight(editor) @@ -450,18 +435,12 @@ export function CodeJar(editor: HTMLElement, highlight: (e: HTMLElement, pos?: P function visit(editor: HTMLElement, visitor: (el: Node) => 'stop' | undefined) { const queue: Node[] = [] - if (editor.firstChild) queue.push(editor.firstChild) - let el = queue.pop() - while (el) { - if (visitor(el) === 'stop') - break - + if (visitor(el) === 'stop') break if (el.nextSibling) queue.push(el.nextSibling) if (el.firstChild) queue.push(el.firstChild) - el = queue.pop() } } diff --git a/demo.html b/demo.html new file mode 100755 index 0000000..93bd319 --- /dev/null +++ b/demo.html @@ -0,0 +1,65 @@ + + + + + CodeJar 🍯 + + + + + +
+
+
+ + + + + diff --git a/index.html b/index.html deleted file mode 100755 index 2dce6e7..0000000 --- a/index.html +++ /dev/null @@ -1,67 +0,0 @@ - - - - - CodeJar – a micro code editor - - - - - -
-
-
- - - - diff --git a/linenumbers.ts b/linenumbers.ts deleted file mode 100644 index bc9d784..0000000 --- a/linenumbers.ts +++ /dev/null @@ -1,88 +0,0 @@ -type Options = { - class: string - wrapClass: string - width: string - backgroundColor: string - color: string -} - -export function withLineNumbers( - highlight: (e: HTMLElement) => void, - options: Partial = {} -) { - const opts: Options = { - class: "codejar-linenumbers", - wrapClass: "codejar-wrap", - width: "35px", - backgroundColor: "rgba(128, 128, 128, 0.15)", - color: "", - ...options - } - - let lineNumbers: HTMLElement - return function (editor: HTMLElement) { - highlight(editor) - - if (!lineNumbers) { - lineNumbers = init(editor, opts) - editor.addEventListener("scroll", () => lineNumbers.style.top = `-${editor.scrollTop}px`); - } - - const code = editor.textContent || "" - const linesCount = code.replace(/\n+$/, "\n").split("\n").length + 1 - - let text = "" - for (let i = 1; i < linesCount; i++) { - text += `${i}\n` - } - - lineNumbers.innerText = text - } -} - -function init(editor: HTMLElement, opts: Options): HTMLElement { - const css = getComputedStyle(editor) - - const wrap = document.createElement("div") - wrap.className = opts.wrapClass - wrap.style.position = "relative" - - const gutter = document.createElement("div") - gutter.className = opts.class - wrap.appendChild(gutter) - - // Add own styles - gutter.style.position = "absolute" - gutter.style.top = "0px" - gutter.style.left = "0px" - gutter.style.bottom = "0px" - gutter.style.width = opts.width - gutter.style.overflow = "hidden" - gutter.style.backgroundColor = opts.backgroundColor - gutter.style.color = opts.color || css.color - gutter.style.setProperty("mix-blend-mode", "difference") - - // Copy editor styles - gutter.style.fontFamily = css.fontFamily - gutter.style.fontSize = css.fontSize - gutter.style.lineHeight = css.lineHeight - gutter.style.paddingTop = css.paddingTop - gutter.style.paddingLeft = css.paddingLeft - gutter.style.borderTopLeftRadius = css.borderTopLeftRadius - gutter.style.borderBottomLeftRadius = css.borderBottomLeftRadius - - // Add line numbers - const lineNumbers = document.createElement("div"); - lineNumbers.style.position = "relative"; - lineNumbers.style.top = "0px" - gutter.appendChild(lineNumbers) - - // Tweak editor styles - editor.style.paddingLeft = `calc(${opts.width} + ${gutter.style.paddingLeft})` - editor.style.whiteSpace = "pre" - - // Swap editor with a wrap - editor.parentNode!.insertBefore(wrap, editor) - wrap.appendChild(editor) - return lineNumbers -} diff --git a/package.json b/package.json index 06cf70d..c146b3d 100644 --- a/package.json +++ b/package.json @@ -1,28 +1,28 @@ { "name": "codejar", - "version": "3.7.0", "description": "An embeddable code editor for the browser", - "license": "MIT", - "repository": "antonmedv/codejar", - "author": "Anton Medvedev ", - "homepage": "https://medv.io/codejar/", - "main": "codejar.js", - "types": "codejar.d.ts", + "version": "4.0.0", + "type": "module", + "main": "./dist/codejar.js", + "types": "./dist/codejar.d.ts", + "exports": { + ".": "./dist/codejar.js", + "./cursor": "./dist/cursor.js" + }, "files": [ - "*.ts", - "*.js" + "dist" ], "scripts": { "start": "tsc -w", "build": "tsc", - "size": "minify codejar.js --sourceType module | gzip-size", + "size": "minify ./dist/codejar.js --sourceType module | gzip-size", "release": "release-it" }, "devDependencies": { "babel-minify": "^0.5.2", "gzip-size-cli": "^5.1.0", - "release-it": "^15.6.0", - "typescript": "^4.9.5" + "release-it": "^16.1.3", + "typescript": "^5.1.6" }, "release-it": { "github": { @@ -31,5 +31,9 @@ "hooks": { "after:bump": "npm run build" } - } + }, + "license": "MIT", + "repository": "antonmedv/codejar", + "author": "Anton Medvedev ", + "homepage": "https://medv.io/codejar/" } diff --git a/tsconfig.json b/tsconfig.json index 5881b3f..113f6ec 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,13 +1,18 @@ { "compilerOptions": { - "target": "es2017", - "module": "esnext", + "target": "ES2021", "lib": [ - "es2020", - "dom" + "ES2021", + "DOM" ], + "module": "NodeNext", + "moduleResolution": "NodeNext", "strict": true, "declaration": true, - "noUnusedLocals": true - } + "noUnusedLocals": true, + "outDir": "./dist", + }, + "include": [ + "**/*.ts" + ], }