Clip selection highlight to content area and fix focus-click drag

Selection layer now uses clip-path to prevent the highlight from
extending into the editor's horizontal padding. The mousedown handler
no longer prevents default on focus-clicks or padding-clicks, so CM's
native drag tracking works on the first click into the editor.

Author: ChristianChiarulli

app/src/features/editor/lib/note-editor-config.ts

@@ -95,6 +95,14 @@ export const MARKDOWN_EDITOR_THEME = EditorView.theme({
   ".cm-selectionLayer": {
     zIndex: "1 !important",
     pointerEvents: "none",
+    // Override baseTheme's `contain: size style` so the layer can be
+    // stretched by the bottom/right offsets, giving clip-path a real
+    // reference box to clip selection backgrounds out of the padding.
+    contain: "style",
+    bottom: "0",
+    right: "0",
+    clipPath:
+      "inset(0 max(clamp(1rem, 5vw, 3.5rem), calc((100% - 42rem) / 2)))",
   },
   ".cm-cursorLayer": {
     zIndex: "2 !important",

app/src/features/editor/note-editor.tsx

@@ -59,7 +59,6 @@ import { ensureNoteEditorVimNavigation } from "@/features/editor/lib/note-editor
 import { EditorToolbar } from "@/features/editor/ui/editor-toolbar";
 import { HighlightSyntax } from "@/features/editor/extensions/markdown-decorations";
 import { getInlineSyntaxRightBoundaryAtCursor } from "@/features/editor/extensions/markdown-decorations/builders/inline-boundaries";
-import { getSnappedCursorPosition } from "@/features/editor/extensions/markdown-decorations/snap-cursor";
 import {
   TagGrammar,
   tagHighlightStyle,
@@ -254,11 +253,7 @@ function dispatchPointerCursorSelection(view: EditorView, pos: number) {
   });
 }
 
-function handleSpecialMouseDownSelection(
-  view: EditorView,
-  event: MouseEvent,
-  leadingPaddingLineStart: number | null,
-) {
+function handleSpecialMouseDownSelection(view: EditorView, event: MouseEvent) {
   if (trySnapInlineSyntaxRightBoundaryClick(view, event)) {
     return true;
   }
@@ -296,17 +291,6 @@ function handleSpecialMouseDownSelection(
     return true;
   }
 
-  if (leadingPaddingLineStart != null) {
-    event.preventDefault();
-    event.stopPropagation();
-
-    if (!view.hasFocus) {
-      focusEditorPreservingScroll(view);
-    }
-
-    return true;
-  }
-
   return false;
 }
 
@@ -445,52 +429,14 @@ export const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
           search(),
           EditorView.domEventHandlers({
             mousedown(event, view) {
-              const leadingPaddingLineStart = getLeadingPaddingClickLineStart(
-                view,
-                event,
-              );
-
-              if (
-                handleSpecialMouseDownSelection(
-                  view,
-                  event,
-                  leadingPaddingLineStart,
-                )
-              ) {
+              if (handleSpecialMouseDownSelection(view, event)) {
                 return true;
               }
 
               event.stopPropagation();
-              const directPos = view.posAtCoords(
-                {
-                  x: event.clientX,
-                  y: event.clientY,
-                },
-                false,
-              );
 
               if (!view.hasFocus) {
-                event.preventDefault();
-
-                const clickedInsideTable =
-                  event.target instanceof HTMLElement &&
-                  event.target.closest(".cm-md-table-wrapper");
-
                 focusEditorPreservingScroll(view);
-
-                if (clickedInsideTable) {
-                  return false;
-                }
-
-                if (directPos != null) {
-                  const snappedPos =
-                    getSnappedCursorPosition(view.state, directPos) ??
-                    directPos;
-
-                  dispatchPointerCursorSelection(view, snappedPos);
-                }
-
-                return true;
               }
 
               return false;