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({

src-web/components/core/Input.tsx

@@ -116,9 +116,9 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
           'border',
           focused ? 'border-focus' : 'border-highlight',
           !isValid && '!border-invalid',
-          size === 'md' && 'h-md leading-md',
-          size === 'sm' && 'h-sm leading-sm',
-          size === 'auto' && '!min-h-sm',
+          size === 'md' && 'h-md',
+          size === 'sm' && 'h-sm',
+          size === 'auto' && 'min-h-sm',
         )}
       >
         {leftSlot}