feat: CodeMirror - ReadOnly tooltip - show tooltip only on keypress

Author: RohitRaj011

src/Common/CodeMirror/CodeEditor.constants.ts

@@ -23,3 +23,5 @@ export const REPLACE_SHORTCUT_KEYS: SupportedKeyboardKeysType[] = ['Enter']
 export const REPLACE_ALL_SHORTCUT_KEYS: SupportedKeyboardKeysType[] = [IS_PLATFORM_MAC_OS ? 'Meta' : 'Control', 'Enter']
 export const SELECT_ALL_SHORTCUT_KEYS: SupportedKeyboardKeysType[] = ['Alt', 'Enter']
 export const CLOSE_SEARCH_SHORTCUT_KEYS: SupportedKeyboardKeysType[] = ['Escape']
+
+export const READ_ONLY_TOOLTIP_TIMEOUT = 2000

src/Common/CodeMirror/Extensions/readOnlyTooltip.ts

@@ -14,18 +14,10 @@
  * limitations under the License.
  */
 
-import {
-    EditorView,
-    Extension,
-    showTooltip,
-    StateEffect,
-    StateField,
-    Tooltip,
-    ViewPlugin,
-    ViewUpdate,
-} from '@uiw/react-codemirror'
+import { EditorView, Extension, showTooltip, StateEffect, StateField, Tooltip, ViewPlugin } from '@uiw/react-codemirror'
 
 import { getReadOnlyElement } from '../utils'
+import { READ_ONLY_TOOLTIP_TIMEOUT } from '../CodeEditor.constants'
 
 // Effect to update the tooltip in the editor state
 const updateTooltipEffect = StateEffect.define<Tooltip | null>()
@@ -76,43 +68,46 @@ const createTooltip = (view: EditorView): Tooltip => {
     }
 }
 
-// Define a plugin to manage tooltip updates
-const focusTooltipPlugin = ViewPlugin.fromClass(
+// Plugin to show and remove tooltip on keypress
+const keypressTooltipPlugin = ViewPlugin.fromClass(
     class {
-        // Tracks whether an update is scheduled
-        public scheduled: boolean = false
+        private timeoutId: number | null = null
 
         constructor(public view: EditorView) {
-            this.scheduleUpdate()
+            this.view.dom.addEventListener('keydown', this.handleKeyPress)
         }
 
-        // Called when the editor state changes
-        update(update: ViewUpdate) {
-            if (update.focusChanged || update.selectionSet) {
-                this.scheduleUpdate()
+        destroy() {
+            this.view.dom.removeEventListener('keydown', this.handleKeyPress)
+            if (this.timeoutId) {
+                clearTimeout(this.timeoutId)
             }
         }
 
-        // Schedules a tooltip update in the next microtask
-        scheduleUpdate() {
-            if (this.scheduled) return
-            this.scheduled = true
-
-            // Update the tooltip asynchronously
-            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-            Promise.resolve().then(() => {
-                this.scheduled = false
-                const tooltip = this.view.state.readOnly && this.view.hasFocus ? createTooltip(this.view) : null
-                this.view.dispatch({
-                    effects: updateTooltipEffect.of(tooltip),
-                })
-            })
+        handleKeyPress = () => {
+            if (!this.view.state.readOnly) {
+                return
+            }
+
+            // Show tooltip
+            const tooltip = createTooltip(this.view)
+            this.view.dispatch({ effects: updateTooltipEffect.of(tooltip) })
+
+            // Reset the timer after every key press
+            if (this.timeoutId) {
+                clearTimeout(this.timeoutId)
+            }
+
+            // Remove tooltip after timeout time
+            this.timeoutId = setTimeout(() => {
+                this.view.dispatch({ effects: updateTooltipEffect.of(null) })
+            }, READ_ONLY_TOOLTIP_TIMEOUT)
         }
     },
 )
 
 /**
  * The read-only tooltip extension for CodeMirror. \
- * Displays a tooltip at the cursor position when the editor is read-only and focused.
+ * Displays a tooltip at the cursor position when the editor is read-only and key is pressed.
  */
-export const readOnlyTooltip: Extension = [tooltipField, focusTooltipPlugin]
+export const readOnlyTooltip: Extension = [tooltipField, keypressTooltipPlugin]