add cursor.ts

antonmedv · Apr 11, 2020 · a7e8b19 · a7e8b19
1 parent 246154c
commit a7e8b19
Show file tree

Hide file tree

Showing 2 changed files with 113 additions and 6 deletions.
diff --git a/cursor.ts b/cursor.ts
@@ -0,0 +1,67 @@
+type Position = {
+  top: string
+  left: string
+}
+
+/**
+ * Returns position of cursor on the page.
+ * @param toStart Position of beginning of selection or end of selection.
+ */
+export function cursorPosition(toStart = true): Position | undefined {
+  const s = window.getSelection()!
+  if (s.rangeCount > 0) {
+    const cursor = document.createElement("span")
+    cursor.textContent = "|"
+
+    const r = s.getRangeAt(0).cloneRange()
+    r.collapse(toStart)
+    r.insertNode(cursor)
+
+    const {x, y, height} = cursor.getBoundingClientRect()
+    const top = (window.scrollY + y + height) + "px"
+    const left = (window.scrollX + x) + "px"
+    cursor.parentNode!.removeChild(cursor)
+
+    return {top, left}
+  }
+  return undefined
+}
+
+/**
+ * Returns selected text.
+ */
+export function selectedText() {
+  const s = window.getSelection()!
+  if (s.rangeCount === 0) return ''
+  return s.getRangeAt(0).toString()
+}
+
+/**
+ * Returns text before the cursor.
+ * @param editor Editor DOM node.
+ */
+export function textBeforeCursor(editor: Node) {
+  const s = window.getSelection()!
+  if (s.rangeCount === 0) return ''
+
+  const r0 = s.getRangeAt(0)
+  const r = document.createRange()
+  r.selectNodeContents(editor)
+  r.setEnd(r0.startContainer, r0.startOffset)
+  return r.toString()
+}
+
+/**
+ * Returns text after the cursor.
+ * @param editor Editor DOM node.
+ */
+export function textAfterCursor(editor: Node) {
+  const s = window.getSelection()!
+  if (s.rangeCount === 0) return ''
+
+  const r0 = s.getRangeAt(0)
+  const r = document.createRange()
+  r.selectNodeContents(editor)
+  r.setStart(r0.endContainer, r0.endOffset)
+  return r.toString()
+}
diff --git a/index.html b/index.html
@@ -36,17 +36,57 @@
             padding: 10px;
             tab-size: 4;
         }
+
+        .popup {
+            background: #fff;
+            border-radius: 4px;
+            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);
+            display: none;
+            font-family: "Source Code Pro", monospace;
+            font-size: 14px;
+            font-weight: 400;
+            letter-spacing: normal;
+            line-height: 20px;
+            max-width: 500px;
+            overflow: hidden;
+            padding: 5px;
+            pointer-events: none;
+            position: absolute;
+            z-index: 2;
+        }
     </style>
 </head>
 <body>
 <main>
     <div class="editor language-js"></div>
+    <div class="popup"></div>
 </main>
 <script type="module">
-  import {CodeJar} from "./codejar.js"
-  import {withLineNumbers} from "./linenumbers.js"
+  import {CodeJar} from './codejar.js'
+  import {withLineNumbers} from './linenumbers.js'
+  import {cursorPosition, selectedText, textBeforeCursor, textAfterCursor} from './cursor.js'
+
+  const editor = document.querySelector('.editor')
+  const popup = document.querySelector('.popup')
+
+  const updatePopup = () => {
+    const pos = cursorPosition()
+    popup.style.top = pos.top
+    popup.style.left = pos.left
+
+    const before = textBeforeCursor(editor).match(/\b\w+$/)
+    const after = textAfterCursor(editor).match(/^\w+\b/)
+    let word = (before && before[0]) || ''
+    word += selectedText()
+    word += (after && after[0]) || ''
+    if (word) {
+      popup.style.display = 'block'
+      popup.textContent = word
+    } else popup.style.display = 'none'
+  }
 
-  const editor = document.querySelector(".editor")
+  editor.addEventListener('click', updatePopup)
+  editor.addEventListener('keyup', updatePopup)
 
   const highlight = editor => {
     // highlight.js does not trim old tags,
@@ -55,11 +95,11 @@
     hljs.highlightBlock(editor)
   }
 
-  const jar = new CodeJar(editor, withLineNumbers(highlight), {tab: "  "})
+  const jar = new CodeJar(editor, withLineNumbers(highlight), {tab: '  '})
 
-  jar.updateCode(localStorage.getItem("code"))
+  jar.updateCode(localStorage.getItem('code'))
   jar.onUpdate(code => {
-    localStorage.setItem("code", code)
+    localStorage.setItem('code', code)
   })
 </script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>