Making code jumping slightly less bad when selecting (#592)

web/cm_plugins/fenced_code.ts

@@ -4,6 +4,7 @@ import {
   decoratorStateField,
   invisibleDecoration,
   isCursorInRange,
+  shouldRenderAsCode,
 } from "./util.ts";
 import { MarkdownWidget } from "./markdown_widget.ts";
 import { IFrameWidget } from "./iframe_widget.ts";
@@ -14,7 +15,10 @@ export function fencedCodePlugin(editor: Client) {
     syntaxTree(state).iterate({
       enter({ from, to, name, node }) {
         if (name === "FencedCode") {
-          if (isCursorInRange(state, [from, to])) return;
+          if (shouldRenderAsCode(state, [from, to])) {
+            // Don't render the widget if the cursor is inside the fenced code
+            return;
+          }
           const text = state.sliceDoc(from, to);
           const [_, lang] = text.match(/^```(\w+)?/)!;
           const codeWidgetCallback = editor.system.codeWidgetHook

web/cm_plugins/util.ts

@@ -157,6 +157,20 @@ export function isCursorInRange(state: EditorState, range: [number, number]) {
   );
 }
 
+export function shouldRenderAsCode(
+  state: EditorState,
+  range: [number, number],
+) {
+  const mainSelection = state.selection.main;
+  // When the selection is empty, we need to check if the cursor is inside the fenced code
+  if (mainSelection.empty) {
+    return checkRangeOverlap(range, [mainSelection.from, mainSelection.to]);
+  } else {
+    // If the selection is encompassing the fenced code we render as code
+    return checkRangeSubset([mainSelection.from, mainSelection.to], range);
+  }
+}
+
 /**
  * Decoration to simply hide anything.
  */