Add `drawSelection()` (#917)

web/editor_state.ts

@@ -19,15 +19,14 @@ import {
   LanguageSupport,
   syntaxHighlighting,
 } from "@codemirror/language";
-import { EditorSelection, EditorState } from "@codemirror/state";
+import { EditorState } from "@codemirror/state";
 import {
+  drawSelection,
   dropCursor,
   EditorView,
   highlightSpecialChars,
   KeyBinding,
   keymap,
-  layer,
-  RectangleMarker,
   ViewPlugin,
   ViewUpdate,
 } from "@codemirror/view";
@@ -124,46 +123,7 @@ export function createEditorState(
       ...cleanModePlugins(client),
       EditorView.lineWrapping,
       plugLinter(client),
-      // Taken from https://github.com/codemirror/view/blob/main/src/draw-selection.ts
+      drawSelection(),
-      layer({
-        above: true,
-        markers(view) {
-          const safari = /Apple Computer/.test(navigator.vendor);
-          const ios = safari &&
-            (/Mobile\/\w+/.test(navigator.userAgent) ||
-              navigator.maxTouchPoints > 2);
-
-          const { state } = view;
-          const cursors = [];
-          for (const r of state.selection.ranges) {
-            const prim = r == state.selection.main;
-            if (!r.empty || !prim || !ios) {
-              const className = prim
-                ? "cm-cursor cm-cursor-primary"
-                : "cm-cursor cm-cursor-secondary";
-              const cursor = r.empty
-                ? r
-                : EditorSelection.cursor(r.head, r.head > r.anchor ? -1 : 1);
-              for (
-                const piece of RectangleMarker.forRange(view, className, cursor)
-              ) cursors.push(piece);
-            }
-          }
-          return cursors;
-        },
-        update(update, dom) {
-          if (update.transactions.some((tr) => tr.selection)) {
-            dom.style.animationName = dom.style.animationName == "cm-blink"
-              ? "cm-blink2"
-              : "cm-blink";
-          }
-          return update.docChanged || update.selectionSet;
-        },
-        mount(dom) {
-          dom.style.animationDuration = "1200ms";
-        },
-        class: "cm-cursorLayer",
-      }),
       postScriptPrefacePlugin(client),
       lineWrapper([
         { selector: "ATXHeading1", class: "sb-line-h1" },

web/styles/colors.scss

@@ -175,10 +175,9 @@
 #sb-editor {
   .cm-content {
     font-family: var(--editor-font);
-    caret-color: transparent;
   }
 
-  ::selection {
+  .cm-selectionBackground {
     background-color: var(--editor-selection-background-color);
   }
 

web/styles/editor.scss

@@ -401,10 +401,6 @@
   }
 
   .sb-line-code-outside .sb-code-info {
-    &::selection {
-      background-color: transparent;
-    }
-
     display: block;
     float: right;
     font-size: 90%;
@@ -412,10 +408,6 @@
   }
 
   .sb-code-copy-button {
-    &::selection {
-      background-color: transparent;
-    }
-
     float: right;
     cursor: pointer;
     margin: 0 3px;