Set line wrapping at the diff view

package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@codemirror/commands": "^6.2.4",
-    "@codemirror/merge": "^6.0.0",
+    "@codemirror/merge": "@6.0.0",
     "@codemirror/state": "^6.2.1",
     "@codemirror/view": "^6.16.0",
     "@preact/compat": "^17.1.2",

src/components/Diff.js

@@ -4,12 +4,19 @@ import { EditorState } from "@codemirror/state"
 import { useRef, useEffect } from 'preact/hooks'
 import { CodeEditor } from './CodeMirror';
 import { html } from "htm/preact";
+import { styled } from 'styled-components/macro';
+
+const MergeViewCodeEditor = styled(CodeEditor)`
+  width: 50%;
+  display: block;
+`
 
 const initMergeView = ({ old, current }) => {
   let basicReadOnly = [
     basicSetup,
     EditorView.editable.of(false),
     EditorState.readOnly.of(true),
+    EditorView.lineWrapping,
   ]
 
   return new MergeView({
@@ -48,8 +55,8 @@ const Diff = ({ oldText, text }) => {
 
   return html`
   <div style="display:flex; width: 100%">
-    <${CodeEditor} ref=${leftRef} $shown=${true}/>
-    <${CodeEditor} ref=${rightRef} $shown=${true}/>
+    <${MergeViewCodeEditor} ref=${leftRef} $shown=${true}/>
+    <${MergeViewCodeEditor} ref=${rightRef} $shown=${true}/>
   </div>`
 }
 

yarn.lock

@@ -1102,15 +1102,13 @@
     "@codemirror/view" "^6.0.0"
     crelt "^1.0.5"
 
-"@codemirror/merge@^6.0.0":
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/@codemirror/merge/-/merge-6.2.0.tgz#08eae39f3c165f326056fc38295746225e31a3f7"
-  integrity sha512-zIFtD55mc1AetNyZADYoo/VqMR4kzlrcvw+WEHh7Eomb25XF0Gf4sqHxvvTZSe6DJBzv+NqRLCx79k+kCu920Q==
+"@codemirror/merge@@6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/merge/-/merge-6.0.0.tgz#69c4877437bc0a75ff9984da1f5dabb5d88301a6"
+  integrity sha512-dxdUIQRxgC+xqzBtfY5zjgDIR38Xp6iycb8Lp1Q2gzEkX9y/UrqOAOlpqU3kfDBa0wGHrjlSYzpcQ/lXWG/59w==
   dependencies:
-    "@codemirror/language" "^6.0.0"
     "@codemirror/state" "^6.0.0"
-    "@codemirror/view" "^6.17.0"
-    "@lezer/highlight" "^1.0.0"
+    "@codemirror/view" "^6.0.0"
 
 "@codemirror/search@^6.0.0":
   version "6.5.2"
@@ -1135,15 +1133,6 @@
     style-mod "^4.1.0"
     w3c-keyname "^2.2.4"
 
-"@codemirror/view@^6.17.0":
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-6.22.0.tgz#5a5214a04f149ecf54c4803b7fec9bdac56d0d74"
-  integrity sha512-6zLj4YIoIpfTGKrDMTbeZRpa8ih4EymMCKmddEDcJWrCdp/N1D46B38YEz4creTb4T177AVS9EyXkLeC/HL2jA==
-  dependencies:
-    "@codemirror/state" "^6.1.4"
-    style-mod "^4.1.0"
-    w3c-keyname "^2.2.4"
-
 "@emotion/is-prop-valid@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc"