Fix an issue where selection layer is not redrawn (#821)

CoreEditor/src/common/utils.ts

@@ -11,6 +11,12 @@ export function afterDomUpdate(callback: () => void) {
   setTimeout(callback, 50);
 }
 
+export function forceRedrawElement(element: HTMLElement) {
+  const visibility = element.style.visibility;
+  element.style.visibility = 'hidden';
+  afterDomUpdate(() => element.style.visibility = visibility);
+}
+
 export function sleep(milliseconds: number) {
   // eslint-disable-next-line compat/compat
   return new Promise(resolve => setTimeout(resolve, milliseconds));

CoreEditor/src/modules/input/index.ts

@@ -10,6 +10,7 @@ import { tokenizePosition } from '../tokenizer';
 import { scrollCaretToVisible, scrollToSelection, selectedLineColumn, updateActiveLine } from '../../modules/selection';
 
 import hasSelection from '../selection/hasSelection';
+import redrawSelectionLayer from '../selection/redrawSelectionLayer';
 import wrapBlock from './wrapBlock';
 import insertCodeBlock from './insertCodeBlock';
 
@@ -129,6 +130,11 @@ export function observeChanges() {
         updateActiveLine(newHasSelection);
       }
 
+      // Work around a WebKit bug where selection layer is not updated
+      if (!newHasSelection && selectionStateChanged) {
+        redrawSelectionLayer();
+      }
+
       // Handle native updates.
       //
       // It would be great if we could also provide the updated text here,

CoreEditor/src/modules/selection/redrawSelectionLayer.ts

@@ -0,0 +1,10 @@
+import { forceRedrawElement } from '../../common/utils';
+
+export default function redrawSelectionLayer() {
+  const layer = document.querySelector('.cm-selectionLayer') as HTMLElement | null;
+  if (layer === null) {
+    return;
+  }
+
+  forceRedrawElement(layer);
+}