Merge pull request #110 from atom-community/select-text

Author: aminya

lib/datatip-manager.ts

@@ -7,6 +7,7 @@ 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"
@@ -474,6 +475,10 @@ export class DataTipManager {
     const overlayMarker = editor.markBufferRange(new Range(position, position), {
       invalidate: "never",
     })
+
+    // makes the text selectable with the help of user-select: text
+    element.setAttribute("tabindex", "-1")
+
     editor.decorateMarker(overlayMarker, {
       type: "overlay",
       class: "datatip-overlay",
@@ -482,12 +487,27 @@ export class DataTipManager {
     })
     disposables.add(new Disposable(() => overlayMarker.destroy()))
 
+    const editorComponent = atom.views.getView(editor).getComponent()
+
     element.addEventListener("mouseenter", () => {
       this.editorView?.removeEventListener("mousemove", this.onMouseMoveEvt)
+      element.addEventListener("keydown", copyListener)
     })
 
     element.addEventListener("mouseleave", () => {
       this.editorView?.addEventListener("mousemove", this.onMouseMoveEvt)
+      element.removeEventListener("keydown", copyListener)
+    })
+
+    /**
+      - 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 move this code to atom-ide-base
@@ -512,3 +532,25 @@ export class DataTipManager {
     this.dataTipMarkerDisposables = null
   }
 }
+
+// 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,
+  })
+}

styles/atom-ide-datatips.less

@@ -5,8 +5,9 @@
   overflow: auto; // prevents the long text to come out of the datatip
   color: @syntax-text-color;
   white-space: nowrap;
+
   pointer-events: all; // hyperlinks will work
-  // user-select: text;   // allow selecting text // TODO does not work
+  user-select: text; // allow selecting text
 
   font-family: @font-family;
   font-size: var(--editor-font-size);
@@ -46,11 +47,6 @@
 }
 
 .datatip-overlay {
-  z-index: 12 !important; // HACK: exceed the z-index of
-  // .atom-dock-resize-handle-resizable, so that
-  // mouseleaves aren't triggered when the cursor enters
-  // the resizable
-
   // info border
   border-bottom: 5px solid @background-color-highlight;
   border-radius: 3px;
@@ -85,20 +81,17 @@
   .list-tree {
     cursor: inherit;
   }
-  // user-select: text;   // allow selecting text // TODO does not work
 }
 
 /** Applied to MarkdownView */
 
 .datatip-markdown > div:not(:last-child) {
   border-bottom: 1px solid fade(@syntax-cursor-color, 10%);
-  // user-select: text;   // allow selecting text // TODO does not work
 }
 
 .datatip-markdown-container {
   color: @syntax-text-color;
   white-space: normal;
-  // user-select: text;
 
   // Avoid excess internal padding from markdown blocks.
   :first-child {
@@ -130,7 +123,6 @@
   .cursors {
     display: none;
   }
-  // user-select: text;   // allow selecting text // TODO does not work
 }
 
 // Highlight the hovered words