Support collapseUnchanged option in CodeMirror's merge view

app/components/code-mirror.hbs

@@ -24,8 +24,9 @@
   {{did-update (fn this.optionDidChange "lineNumbers") @lineNumbers}}
   {{did-update (fn this.optionDidChange "lineSeparator") @lineSeparator}}
   {{did-update (fn this.optionDidChange "lineWrapping") @lineWrapping}}
-  {{did-update (fn this.optionDidChange "originalDocumentOrMergeControls") @mergeControls}}
-  {{did-update (fn this.optionDidChange "originalDocumentOrMergeControls") @originalDocument}}
+  {{did-update (fn this.optionDidChange "originalDocumentOrMergeControlsOrCollapseUnchanged") @mergeControls}}
+  {{did-update (fn this.optionDidChange "originalDocumentOrMergeControlsOrCollapseUnchanged") @originalDocument}}
+  {{did-update (fn this.optionDidChange "originalDocumentOrMergeControlsOrCollapseUnchanged") @collapseUnchanged}}
   {{did-update (fn this.optionDidChange "placeholder") @placeholder}}
   {{did-update (fn this.optionDidChange "readOnly") @readOnly}}
   {{did-update (fn this.optionDidChange "rectangularSelection") @rectangularSelection}}

app/components/code-mirror.ts

@@ -177,6 +177,10 @@ export interface Signature {
        * Enable showing accept/reject buttons in the diff editor
        */
       mergeControls?: boolean;
+      /**
+       * Enable collapsing unchanged lines in the diff editor
+       */
+      collapseUnchanged?: boolean;
       /**
        * Preserve changes history when parent component passes a new `@document` to the component
        */
@@ -235,7 +239,7 @@ export interface OptionHandlersSignature {
   tabSize: (tabSize?: number) => Extension[];
   theme: (theme?: Extension) => Extension[];
   languageOrFilename: (newValue: string | undefined, args: Signature['Args']['Named'], changedOptionName?: string) => Promise<Extension[]>;
-  originalDocumentOrMergeControls: (
+  originalDocumentOrMergeControlsOrCollapseUnchanged: (
     newValue: string | boolean | undefined,
     args: Signature['Args']['Named'],
     changedOptionName?: string,
@@ -301,13 +305,13 @@ const OPTION_HANDLERS: OptionHandlersSignature = {
 
     return loadedLanguage ? [loadedLanguage] : [];
   },
-  originalDocumentOrMergeControls: (_newValue, { originalDocument, mergeControls }) => {
+  originalDocumentOrMergeControlsOrCollapseUnchanged: (_newValue, { originalDocument, mergeControls, collapseUnchanged }) => {
     return originalDocument
       ? [
           unifiedMergeView({
             original: originalDocument,
             mergeControls: !!mergeControls,
-            // collapseUnchanged: { margin: 3, minSize: 4 },
+            collapseUnchanged: collapseUnchanged ? { margin: 2, minSize: 4 } : undefined,
           }),
         ]
       : [];
@@ -353,7 +357,7 @@ export default class CodeMirrorComponent extends Component<Signature> {
     const handlerMethod = OPTION_HANDLERS[optionName];
 
     // some compartments need to be unloaded before new changes are applied
-    if (['originalDocumentOrMergeControls'].includes(optionName)) {
+    if (['originalDocumentOrMergeControlsOrCollapseUnchanged'].includes(optionName)) {
       this.renderedView?.dispatch({
         effects: compartment?.reconfigure([]),
       });

app/controllers/demo/code-mirror.ts

@@ -46,7 +46,10 @@ export default class DemoCodeMirrorController extends Controller {
 
   @tracked documents: ExampleDocument[] = [
     new ExampleDocument({
-      document: 'An example plain-text document',
+      document:
+        'An example plain-text document 1\nAn example plain-text document 2\nAn example plain-text document 3\nAn example plain-text document 4\nAn example plain-text document 5\nAn example plain-text document 6\nAn example plain-text document 7\nAn example plain-text document 8\nAn example plain-text document 9\nAn example plain-text modified document 10\nAn example plain-text document 11\nAn example plain-text document 12\nAn example plain-text document 13\nAn example plain-text document 14\nAn example plain-text document 15\nAn example plain-text document 16\nAn example plain-text document 17\nAn example plain-text document 18\nAn example plain-text document 19',
+      originalDocument:
+        'An example plain-text document 1\nAn example plain-text document 2\nAn example plain-text document 3\nAn example plain-text document 4\nAn example plain-text document 5\nAn example plain-text document 6\nAn example plain-text document 7\nAn example plain-text document 8\nAn example plain-text document 9\nAn example plain-text document 10\nAn example plain-text document 11\nAn example plain-text document 12\nAn example plain-text document 13\nAn example plain-text document 14\nAn example plain-text document 15\nAn example plain-text document 16\nAn example plain-text document 17\nAn example plain-text document 18\nAn example plain-text document 19',
       filename: 'test.txt',
       language: 'text',
     }),
@@ -173,6 +176,7 @@ export default class DemoCodeMirrorController extends Controller {
   @tracked lineSeparator: boolean = true;
   @tracked lineWrapping: boolean = true;
   @tracked mergeControls: boolean = true;
+  @tracked collapseUnchanged: boolean = true;
   @tracked originalDocument: boolean = false;
   @tracked placeholder: boolean = true;
   @tracked preserveHistory: boolean = false;

app/templates/demo/code-mirror.hbs

@@ -132,6 +132,10 @@
       </label>
     </codemirror-options-left>
     <codemirror-options-right class="flex flex-wrap">
+      <label class="{{labelClasses}}" title="Enable collapsing unchanged lines in the diff editor">
+        <Input @type="checkbox" @checked={{this.collapseUnchanged}} disabled={{not this.originalDocument}} />
+        <span class="ml-2 {{unless this.originalDocument 'text-gray-300'}}">collapseUnchanged</span>
+      </label>
       <label class="{{labelClasses}}" title="Enable showing accept/reject buttons in the diff editor">
         <Input @type="checkbox" @checked={{this.mergeControls}} disabled={{not this.originalDocument}} />
         <span class="ml-2 {{unless this.originalDocument 'text-gray-300'}}">mergeControls</span>
@@ -284,6 +288,7 @@
   @lineNumbers={{this.lineNumbers}}
   @lineWrapping={{this.lineWrapping}}
   @mergeControls={{this.mergeControls}}
+  @collapseUnchanged={{this.collapseUnchanged}}
   @preserveHistory={{this.preserveHistory}}
   @readOnly={{this.readOnly}}
   @rectangularSelection={{this.rectangularSelection}}

app/utils/code-mirror-themes.ts

@@ -31,6 +31,10 @@ const BASE_STYLE = {
     lineHeight: '1.5rem',
     padding: '0 1rem 0 0.625rem',
   },
+  '.cm-deletedChunk': {
+    lineHeight: '1.5rem',
+    padding: '0 1rem 0 0.625rem',
+  },
 };
 
 export const codeCraftersLight = [EditorView.theme(Object.assign({}, BASE_STYLE), { dark: false }), githubLight];

tests/integration/components/code-mirror-test.js

@@ -374,6 +374,18 @@ module('Integration | Component | code-mirror', function (hooks) {
       skip('it does something useful with the editor');
     });
 
+    module('collapseUnchanged', function () {
+      test("it doesn't break the editor when passed", async function (assert) {
+        this.set('collapseUnchanged', true);
+        await render(hbs`<CodeMirror @collapseUnchanged={{this.collapseUnchanged}} />`);
+        assert.ok(codeMirror.hasRendered);
+        this.set('collapseUnchanged', false);
+        assert.ok(codeMirror.hasRendered);
+      });
+
+      skip('it does something useful with the editor');
+    });
+
     module('originalDocument', function () {
       test("it doesn't break the editor when passed", async function (assert) {
         this.set('originalDocument', 'original content');