allow to customize auto-indent

antonmedv · Jul 6, 2020 · 77866d3 · 77866d3
1 parent ea35086
commit 77866d3
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -29,7 +29,7 @@ CodeJar 🍯 &nbsp; can be used via modules:
 </script>
 ```
 
-Create element and init:
+Create an element and init the CodeJar 🍯:
 
 ```html
 <div class="editor"></div>
@@ -38,7 +38,7 @@ Create element and init:
 </script>
 ```
 
-Second argument to `CodeJar` is highligting function (in this example [PrismJS](https://prismjs.com)), but any function may be used:
+Second argument to `CodeJar` is a highligting function (in this example [PrismJS](https://prismjs.com)), but any function may be used:
 
 ```ts
 const highlight = (editor: HTMLElement) => {
@@ -51,16 +51,16 @@ let jar = CodeJar(editor, highlight)
 ```
 
 Third argument to `CodeJar` is options:
-  - Options.tab replace "tabs" and "auto indent tabs" to given string
-    - Can use CSS tab-size instead
-    - If so, "auto indent tabs" can be removed with a single "backspace"
-  - Options.indentRegex allows indent rule to be customized
-    - Auto-tab if the last character match the given regex while pressing Enter
+  - `tab: string` replaces "tabs" with given string. Default: `\t`.
+    - Note: use css rule `tab-size` to customize size.
+  - `identOn: RegExp` allows auto indent rule to be customized. Default `{$`
+    - Auto-tab if the text before cursor match the given regex while pressing Enter.
+       
 
 ```js
 let options = {
-  tab: ' '.repeat(4), // default is \t
-  indentRegex: /[([{'"]/ // default is /[{]/
+  tab: ' '.repeat(4), // default is '\t'
+  indentOn: /[(\[]$/, // default is /{$/
 }
 
 let jar = CodeJar(editor, highlight, options)

diff --git a/codejar.ts b/codejar.ts
@@ -1,5 +1,6 @@
 type Options = {
   tab: string
+  indentOn: RegExp
 }
 
 type HistoryRecord = {
@@ -16,9 +17,9 @@ type Position = {
 export type CodeJar = ReturnType<typeof CodeJar>
 
 export function CodeJar(editor: HTMLElement, highlight: (e: HTMLElement) => void, opt: Partial<Options> = {}) {
-  const options = {
+  const options: Options = {
     tab: "\t",
-    indentRegex: /[{]/,
+    indentOn: /{$/,
     ...opt
   }
   let listeners: [string, any][] = []
@@ -217,7 +218,7 @@ export function CodeJar(editor: HTMLElement, highlight: (e: HTMLElement) => void
 
       // If last symbol is "{" ident new line
       // Allow user defines indent rule
-      if (before[before.length - 1].match(indentRegex)) {
+      if (options.indentOn.test(before)) {
         newLinePadding += options.tab
       }
 

diff --git a/index.html b/index.html
@@ -54,7 +54,9 @@
     hljs.highlightBlock(editor)
   }
 
-  const jar = CodeJar(editor, highlight)
+  const jar = CodeJar(editor, highlight, {
+    indentOn: /[(\[{]$/
+  })
 
   jar.updateCode(localStorage.getItem('code'))
   jar.onUpdate(code => {