Wrap selected text when typing markdown markers

Author: kestermcullough

src/editor/selection-wrap.ts

@@ -0,0 +1,52 @@
+import { EditorView } from "@codemirror/view";
+
+const WRAP_PAIRS: Record<string, [string, string]> = {
+  "*": ["*", "*"],
+  "_": ["_", "_"],
+  "`": ["`", "`"],
+  "'": ["'", "'"],
+  '"': ['"', '"'],
+  "=": ["==", "=="],
+  "~": ["~~", "~~"],
+};
+
+function wrapMainSelection(
+  view: EditorView,
+  before: string,
+  after: string
+): boolean {
+  const { main, ranges } = view.state.selection;
+  if (ranges.length !== 1 || main.empty) return false;
+
+  const { from, to } = main;
+  const selected = view.state.doc.sliceString(from, to);
+  view.dispatch({
+    changes: { from, to, insert: `${before}${selected}${after}` },
+    selection: {
+      anchor: from + before.length,
+      head: from + before.length + selected.length,
+    },
+  });
+  return true;
+}
+
+export const selectionWrapOnType = EditorView.domEventHandlers({
+  keydown(event, view) {
+    if (
+      event.defaultPrevented ||
+      event.metaKey ||
+      event.ctrlKey ||
+      event.altKey ||
+      event.isComposing
+    ) {
+      return false;
+    }
+
+    const pair = WRAP_PAIRS[event.key];
+    if (!pair) return false;
+
+    const didWrap = wrapMainSelection(view, pair[0], pair[1]);
+    if (didWrap) event.preventDefault();
+    return didWrap;
+  },
+});

src/editor/setup.ts

@@ -15,6 +15,7 @@ import {
 import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
 import { obsidianTheme } from "./theme";
 import { markdownRenderPlugin } from "./markdown-render";
+import { selectionWrapOnType } from "./selection-wrap";
 
 export function createEditor(
   parent: HTMLElement,
@@ -29,6 +30,7 @@ export function createEditor(
     drawSelection(),
     highlightActiveLine(),
     EditorView.lineWrapping,
+    selectionWrapOnType,
 
     // Keymaps
     keymap.of([