feat(editor): wrap long Markdown lines (#2459)

packages/app/src/file-pane/editor/view.web.tsx

@@ -3,6 +3,7 @@ import { Annotation, Compartment, EditorState, Transaction } from "@codemirror/s
 import { EditorView } from "@codemirror/view";
 import { getLanguageForFile } from "@getpaseo/highlight";
 import { getCM, vim } from "@replit/codemirror-vim";
+import { isRenderedMarkdownFile } from "@/components/file-pane-render-mode";
 import type { WorkspaceFileLocation } from "@/workspace/file-open";
 import type { FileEditorModel } from "./model";
 import { editorBaseExtensions, editorTheme, type EditorVisualTheme } from "./extensions.web";
@@ -19,9 +20,14 @@ interface FileEditorViewProps {
 }
 
 const languageCompartment = new Compartment();
+const wrappingCompartment = new Compartment();
 const themeCompartment = new Compartment();
 const vimCompartment = new Compartment();
 
+function wrappingForFile(filename: string) {
+  return isRenderedMarkdownFile(filename) ? EditorView.lineWrapping : [];
+}
+
 export function FileEditorView({
   model,
   filename,
@@ -50,6 +56,7 @@ export function FileEditorView({
           vimCompartment.of(values.vimEnabled ? vim() : []),
           ...editorBaseExtensions(() => void values.model.save()),
           languageCompartment.of(getLanguageForFile(values.filename)?.extension ?? []),
+          wrappingCompartment.of(wrappingForFile(values.filename)),
           themeCompartment.of(editorTheme(values.theme)),
           EditorView.updateListener.of((update) => {
             if (
@@ -104,7 +111,10 @@ export function FileEditorView({
 
   useEffect(() => {
     viewRef.current?.dispatch({
-      effects: languageCompartment.reconfigure(getLanguageForFile(filename)?.extension ?? []),
+      effects: [
+        languageCompartment.reconfigure(getLanguageForFile(filename)?.extension ?? []),
+        wrappingCompartment.reconfigure(wrappingForFile(filename)),
+      ],
     });
   }, [filename]);