Native Codemirror cursor

src-web/components/core/Editor/Editor.css

@@ -17,7 +17,7 @@
     }
 
     .cm-line {
-      @apply text-gray-800 pl-1 pr-1.5;
+      @apply text-gray-800 caret-gray-800 pl-1 pr-1.5;
     }
 
     .cm-placeholder {

src-web/components/core/Editor/extensions.ts

@@ -37,6 +37,7 @@ import { text } from './text/extension';
 import { twig } from './twig/extension';
 import { url } from './url/extension';
 import type { Environment } from '../../../lib/models';
+import { EditorView } from 'codemirror';
 
 export const myHighlightStyle = HighlightStyle.define([
   {
@@ -116,7 +117,6 @@ export function getLanguageExtension({
 export const baseExtensions = [
   highlightSpecialChars(),
   history(),
-  drawSelection(),
   dropCursor(),
   bracketMatching(),
   // TODO: Figure out how to debounce showing of autocomplete in a good way

src-web/components/core/Editor/placeholder.ts

@@ -39,14 +39,16 @@ const placeholderMatcher = new BetterMatchDecorator({
 
     // Don't decorate if the cursor is inside the match
     for (const r of view.state.selection.ranges) {
-      if (r.from > matchStartPos && r.to <= matchEndPos) return null;
+      if (r.from > matchStartPos && r.to <= matchEndPos) {
+        return Decoration.replace({});
+      }
     }
 
     const groupMatch = match[1];
     if (groupMatch == null) {
       // Should never happen, but make TS happy
       console.warn('Group match was empty', match);
-      return null;
+      return Decoration.replace({});;
     }
 
     return Decoration.replace({