add index.html

antonmedv · Apr 3, 2020 · 3f287e1 · 3f287e1
1 parent 023b0ec
commit 3f287e1
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 38 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 /node_modules/
 package-lock.json
+codejar.js
diff --git a/codejar.ts b/codejar.ts
@@ -16,17 +16,17 @@ export class CodeJar {
     this.editor = editor
     this.highlight = highlight
     this.options = {
-      tab: '\t',
+      tab: "\t",
       ...options
     }
 
-    this.editor.setAttribute('contentEditable', 'true')
-    this.editor.setAttribute('spellcheck', 'false')
-    this.editor.style.outline = 'none'
-    this.editor.style.overflowWrap = 'break-word'
-    this.editor.style.overflowY = 'auto'
-    this.editor.style.resize = 'vertical'
-    this.editor.style.whiteSpace = 'pre-wrap'
+    this.editor.setAttribute("contentEditable", "true")
+    this.editor.setAttribute("spellcheck", "false")
+    this.editor.style.outline = "none"
+    this.editor.style.overflowWrap = "break-word"
+    this.editor.style.overflowY = "auto"
+    this.editor.style.resize = "vertical"
+    this.editor.style.whiteSpace = "pre-wrap"
 
     this.highlight(this.editor)
     const debounceHighlight = debounce(() => {
@@ -40,35 +40,35 @@ export class CodeJar {
       this.editor.addEventListener(type, fn)
     }
 
-    on('keydown', event => {
-      if (event.key === 'Enter') {
+    on("keydown", event => {
+      if (event.key === "Enter") {
         this.handleNewLine(event)
-      } else if (event.key === 'Tab') {
+      } else if (event.key === "Tab") {
         this.handleTabCharacters(event)
-      } else if (event.key === 'ArrowLeft' && event.metaKey) {
+      } else if (event.key === "ArrowLeft" && event.metaKey) {
         this.handleJumpToBeginningOfLine(event)
       } else {
         this.handleSelfClosingCharacters(event)
         this.handleUndoRedo(event)
       }
     })
 
-    on('keyup', _event => {
+    on("keyup", _event => {
       debounceHighlight()
       this.recordHistory()
       if (this.callback) this.callback(this.toString())
     })
 
-    on('focus', _event => {
+    on("focus", _event => {
       this.focus = true
       this.recordHistory()
     })
 
-    on('blur', _event => {
+    on("blur", _event => {
       this.focus = false
     })
 
-    on('paste', event => {
+    on("paste", event => {
       this.handlePaste(event)
       if (this.callback) this.callback(this.toString())
     })
@@ -128,7 +128,7 @@ export class CodeJar {
     let el = queue.shift()
     while (el) {
       if (el.nodeType === Node.TEXT_NODE) {
-        let len = (el.nodeValue || '').length
+        let len = (el.nodeValue || "").length
         n += len
         if (!startFound && n >= pos.start) {
           const offset = len - (n - pos.start)
@@ -172,14 +172,14 @@ export class CodeJar {
     const after = this.afterCursor()
     let [padding] = findPadding(before)
     let doublePadding = padding
-    if (before[before.length - 1] === '{') doublePadding += this.options.tab
-    let text = '\n' + doublePadding
+    if (before[before.length - 1] === "{") doublePadding += this.options.tab
+    let text = "\n" + doublePadding
     // Add extra newline, otherwise Enter will not work at the end.
-    if (after.length === 0) text += '\n'
-    document.execCommand('insertHTML', false, text)
-    if (after[0] === '}') {
+    if (after.length === 0) text += "\n"
+    document.execCommand("insertHTML", false, text)
+    if (after[0] === "}") {
       const pos = this.save()
-      document.execCommand('insertHTML', false, '\n' + padding)
+      document.execCommand("insertHTML", false, "\n" + padding)
       this.restore(pos)
     }
   }
@@ -196,7 +196,7 @@ export class CodeJar {
     } else if (open.includes(event.key)) {
       event.preventDefault()
       const text = event.key + close[open.indexOf(event.key)]
-      document.execCommand('insertText', false, text)
+      document.execCommand("insertText", false, text)
       pos.start = ++pos.end
       this.restore(pos)
     }
@@ -211,13 +211,13 @@ export class CodeJar {
         const pos = this.save()
         const len = this.options.tab.length
         this.restore({start, end: start + len})
-        document.execCommand('delete')
+        document.execCommand("delete")
         pos.start -= len
         pos.end -= len
         this.restore(pos)
       }
     } else {
-      document.execCommand('insertText', false, this.options.tab)
+      document.execCommand("insertText", false, this.options.tab)
     }
   }
 
@@ -243,7 +243,7 @@ export class CodeJar {
   }
 
   handleUndoRedo(event: KeyboardEvent) {
-    if (event.metaKey && !event.shiftKey && event.key === 'z') {
+    if (event.metaKey && !event.shiftKey && event.key === "z") {
       event.preventDefault()
       if (this.historyPointer > 0) {
         this.historyPointer--
@@ -255,7 +255,7 @@ export class CodeJar {
       }
     }
 
-    if (event.metaKey && event.shiftKey && event.key === 'z') {
+    if (event.metaKey && event.shiftKey && event.key === "z") {
       event.preventDefault()
       if (this.historyPointer + 1 < this.history.length) {
         this.historyPointer++
@@ -297,14 +297,14 @@ export class CodeJar {
 
   private handlePaste(event: ClipboardEvent) {
     event.preventDefault()
-    const text = ((event as any).originalEvent || event).clipboardData.getData('text/plain')
+    const text = ((event as any).originalEvent || event).clipboardData.getData("text/plain")
     const pos = this.save()
-    document.execCommand('insertText', false, text)
+    document.execCommand("insertText", false, text)
     let html = this.editor.innerHTML
     html = html
-      .replace(/<div>/g, '\n')
-      .replace(/<br>/g, '')
-      .replace(/<\/div>/g, '')
+      .replace(/<div>/g, "\n")
+      .replace(/<br>/g, "")
+      .replace(/<\/div>/g, "")
     this.editor.innerHTML = html
     this.highlight(this.editor)
     this.restore({start: pos.end + text.length, end: pos.end + text.length})
@@ -324,7 +324,7 @@ export class CodeJar {
   }
 
   toString() {
-    return this.editor.textContent || ''
+    return this.editor.textContent || ""
   }
 }
 
@@ -347,12 +347,12 @@ function debounce<T extends Function>(cb: T, wait: number) {
 }
 
 function findPadding(text: string): [string, number, number] {
-// Find beginning of previous line.
+  // Find beginning of previous line.
   let i = text.length - 1
-  while (i >= 0 && text[i] !== '\n') i--
+  while (i >= 0 && text[i] !== "\n") i--
   i++
   // Find padding of the line.
   let j = i
   while (j < text.length && /[ \t]/.test(text[j])) j++
-  return [text.substring(i, j) || '', i, j]
+  return [text.substring(i, j) || "", i, j]
 }
diff --git a/index.html b/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>CodeJar – a micro code editor</title>
+    <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/dracula.min.css" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            min-height: 100vh;
+            background: #F6F8F8;
+        }
+
+        main {
+            max-width: 800px;
+            margin: 40px auto;
+            padding: 20px;
+        }
+
+        .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;
+            resize: none !important;
+            tab-size: 4;
+        }
+    </style>
+</head>
+<body>
+<main>
+    <div class="editor language-js"></div>
+</main>
+<script type="module">
+  import {CodeJar} from "./codejar.js"
+
+  const editor = document.querySelector(".editor")
+
+  const highlight = editor => {
+    // highlight.js does not trim old tags,
+    // let's do it by this hack.
+    editor.textContent = editor.textContent
+    hljs.highlightBlock(editor)
+  }
+
+  const jar = new CodeJar(editor, highlight, {tab: "  "})
+
+  jar.updateCode(localStorage.getItem("code"))
+  jar.onUpdate(code => {
+    localStorage.setItem("code", code)
+  })
+</script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -9,7 +9,6 @@
   "main": "codejar.js",
   "scripts": {
     "start": "tsc -w",
-    "prepublishOnly": "tsc",
     "size": "minify codejar.js --sourceType module | gzip-size"
   },
   "devDependencies": {