fix: create selectable-overlay file

Author: aminya

lib/datatip-manager.ts

@@ -7,11 +7,11 @@ import {
   TextEditorElement,
   CommandEvent,
   CursorPositionChangedEvent,
-  TextEditorComponent,
 } from "atom"
 import type { Datatip, DatatipProvider } from "atom-ide-base"
 import { ViewContainer } from "atom-ide-base/commons-ui/float-pane/ViewContainer"
 import { ProviderRegistry } from "atom-ide-base/commons-atom/ProviderRegistry"
+import { makeOverlaySelectable, copyListener } from "./selectable-overlay"
 
 export class DataTipManager {
   /**
@@ -476,7 +476,7 @@ export class DataTipManager {
       invalidate: "never",
     })
 
-    //
+    // makes overlay selectable
     makeOverlaySelectable(editor, element)
 
     editor.decorateMarker(overlayMarker, {
@@ -487,7 +487,6 @@ export class DataTipManager {
     })
     disposables.add(new Disposable(() => overlayMarker.destroy()))
 
-
     element.addEventListener("mouseenter", () => {
       this.editorView?.removeEventListener("mousemove", this.onMouseMoveEvt)
       element.addEventListener("keydown", copyListener)
@@ -520,46 +519,3 @@ export class DataTipManager {
     this.dataTipMarkerDisposables = null
   }
 }
-
-/** makes the text selectable with the help of user-select: text */
-function makeOverlaySelectable(editor: TextEditor, overlayElement: HTMLElement) {
-  overlayElement.setAttribute("tabindex", "-1")
-  overlayFocusFix(editor, overlayElement)
-}
-
-function overlayFocusFix(editor: TextEditor, element: HTMLElement) {
-  const editorComponent = atom.views.getView(editor).getComponent()
-  /**
-    - focus on the datatip once the text is selected (cursor gets disabled temporarily)
-    - remove focus once mouse leaves
-  */
-  element.addEventListener("mousedown", () => {
-    blurEditor(editorComponent)
-    element.addEventListener("mouseleave", () => {
-      focusEditor(editorComponent)
-    })
-  })
-
-}
-
-// TODO we should not need this
-/** A manual copy listener */
-async function copyListener(event: KeyboardEvent) {
-  event.preventDefault()
-  if (event.ctrlKey && event.key === "c") {
-    const text = document.getSelection()?.toString() ?? ""
-    await navigator.clipboard.writeText(text)
-  }
-}
-
-function focusEditor(editorComponent: TextEditorComponent) {
-  // @ts-ignore
-  editorComponent?.didFocus()
-}
-
-function blurEditor(editorComponent: TextEditorComponent) {
-  // @ts-ignore
-  editorComponent?.didBlurHiddenInput({
-    relatedTarget: null,
-  })
-}

lib/selectable-overlay.ts

@@ -0,0 +1,48 @@
+import { TextEditor, TextEditorComponent } from "atom"
+
+/** makes the text selectable with the help of `user-select: text` and `pointer-events: all` in CSS */
+export function makeOverlaySelectable(editor: TextEditor, overlayElement: HTMLElement) {
+  overlayElement.setAttribute("tabindex", "-1")
+  overlayFocusFix(editor, overlayElement)
+}
+
+/**
+  - focus on the datatip once the text is selected (cursor gets disabled temporarily)
+  - remove focus once mouse leaves
+*/
+function overlayFocusFix(editor: TextEditor, element: HTMLElement) {
+  const editorComponent = atom.views.getView(editor).getComponent()
+  element.addEventListener("mousedown", () => {
+    blurEditor(editorComponent)
+    element.addEventListener("mouseleave", () => {
+      focusEditor(editorComponent)
+    })
+  })
+}
+
+/** A manual copy listener
+ * Usage. Add the listener to your mouse enter and mouseleave listeners
+   ```ts
+   element.addEventListener("mouseenter", () => {element.addEventListener("keydown", copyListener)}`
+   element.addEventListener("mouseleave", () => {element.removeEventListener("keydown", copyListener)}`
+   ```
+*/
+export async function copyListener(event: KeyboardEvent) {
+  event.preventDefault()
+  if (event.ctrlKey && event.key === "c") {
+    const text = document.getSelection()?.toString() ?? ""
+    await navigator.clipboard.writeText(text)
+  }
+} // TODO we should not need to manually listen for copy paste
+
+function focusEditor(editorComponent: TextEditorComponent) {
+  // @ts-ignore
+  editorComponent?.didFocus()
+}
+
+function blurEditor(editorComponent: TextEditorComponent) {
+  // @ts-ignore
+  editorComponent?.didBlurHiddenInput({
+    relatedTarget: null,
+  })
+}