Add support for shadow dom and iframes

antonmedv · Apr 2, 2021 · ebbd389 · ebbd389
1 parent d906127
commit ebbd389
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -60,6 +60,7 @@ Third argument to `CodeJar` is options:
   - `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`.
 
 
 ```js

diff --git a/codejar.ts b/codejar.ts
@@ -1,3 +1,5 @@
+const globalWindow = window
+
 type Options = {
   tab: string
   indentOn: RegExp
@@ -6,6 +8,7 @@ type Options = {
   preserveIdent: boolean
   addClosing: boolean
   history: boolean
+  window: typeof window
 }
 
 type HistoryRecord = {
@@ -30,8 +33,13 @@ export function CodeJar(editor: HTMLElement, highlight: (e: HTMLElement, pos?: P
     preserveIdent: true,
     addClosing: true,
     history: true,
+    window: globalWindow,
     ...opt
   }
+
+  const window = options.window
+  const document = window.document
+
   let listeners: [string, any][] = []
   let history: HistoryRecord[] = []
   let at = -1
@@ -118,7 +126,7 @@ export function CodeJar(editor: HTMLElement, highlight: (e: HTMLElement, pos?: P
   })
 
   function save(): Position {
-    const s = window.getSelection()!
+    const s = getSelection()
     const pos: Position = {start: 0, end: 0, dir: undefined}
 
     visit(editor, el => {
@@ -155,7 +163,7 @@ export function CodeJar(editor: HTMLElement, highlight: (e: HTMLElement, pos?: P
   }
 
   function restore(pos: Position) {
-    const s = window.getSelection()!
+    const s = getSelection()
     let startNode: Node | undefined, startOffset = 0
     let endNode: Node | undefined, endOffset = 0
 
@@ -203,7 +211,7 @@ export function CodeJar(editor: HTMLElement, highlight: (e: HTMLElement, pos?: P
   }
 
   function beforeCursor() {
-    const s = window.getSelection()!
+    const s = getSelection()
     const r0 = s.getRangeAt(0)
     const r = document.createRange()
     r.selectNodeContents(editor)
@@ -212,7 +220,7 @@ export function CodeJar(editor: HTMLElement, highlight: (e: HTMLElement, pos?: P
   }
 
   function afterCursor() {
-    const s = window.getSelection()!
+    const s = getSelection()
     const r0 = s.getRangeAt(0)
     const r = document.createRange()
     r.selectNodeContents(editor)
@@ -445,6 +453,13 @@ export function CodeJar(editor: HTMLElement, highlight: (e: HTMLElement, pos?: P
     event.preventDefault()
   }
 
+  function getSelection() {
+    if (editor.parentNode?.nodeType == Node.DOCUMENT_FRAGMENT_NODE) {
+      return (editor.parentNode as Document).getSelection()!
+    }
+    return window.getSelection()!
+  }
+
   return {
     updateOptions(options: Partial<Options>) {
       options = {...options, ...options}

diff --git a/index.html b/index.html
@@ -41,10 +41,11 @@
 <body>
 <main>
     <div class="editor language-js"></div>
+    <my-editor></my-editor>
 </main>
 <script type="module">
   import {CodeJar} from './codejar.js'
-  import {withLineNumbers} from './linenumbers.js';
+  import {withLineNumbers} from './linenumbers.js'
 
   const editor = document.querySelector('.editor')
 
@@ -63,6 +64,46 @@
   jar.onUpdate(code => {
     localStorage.setItem('code', code)
   })
+
+
+  class Ed extends HTMLElement {
+    constructor() {
+      super() // always call super() first in the constructor.
+
+      // Attach a shadow root to <fancy-tabs>.
+      const shadowRoot = this.attachShadow({mode: 'open'})
+      shadowRoot.innerHTML = `
+      <style>
+              .editor {
+            background: #fff;
+            font-family: monospace;
+            font-size: 14px;
+            font-weight: 400;
+            min-height: 240px;
+            letter-spacing: normal;
+            line-height: 20px;
+            padding: 10px;
+            tab-size: 4;
+        }
+</style>
+          <div class="editor language-js"></div>
+
+      `
+
+      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 editor = shadowRoot.querySelector('.editor')
+      const jar = CodeJar(editor, highlight, {
+        indentOn: /[(\[{]$/
+      })
+    }
+    }
+      customElements.define('my-editor', Ed)
 </script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
 </body>