Merge View Align Feature

v6
1

Is there a way to achieve the merge view align feature in CM6? I see it’s present in CM5 but not able to find it in the latest version of CM

https://codemirror.net/5/demo/merge.html#

image
image1834×736 201 KB

2

This is the default behavior now.

3

Hey @marijn, I tried with the CM6 configuration but unable achieve merge view like below

image
image2932×418 151 KB

With my implementation its looking something like this

image
image2630×406 47 KB

This is my code. Am i missing something here?

const DiffEditor = () => {
  const cmMergeViewRef = React.useRef<MergeView | null>(null)

  const ref = React.useCallback((el: HTMLDivElement | null) => {
    if (el !== null) {
      cmMergeViewRef.current = new MergeView({
        renderRevertControl: () => {
          const el = document.createElement('button')
          el.classList.add('cm-merge-revert')
          el.appendChild(document.createTextNode('\u2B95'))
          return el
        },
        parent: el,
        orientation: 'a-b',
        revertControls: 'a-to-b',
        gutter: true,
        collapseUnchanged: { margin: 2, minSize: 3 },
        a: {
          doc: md1.trim(),
          extensions: [...commonStateConfigExtensions, EditorState.readOnly.of(true)]
        },
        b: {
          doc: md2.trim(),
          extensions: [
            ...commonStateConfigExtensions,
            EditorView.updateListener.of(({ state }) => {
              const md = state.doc.toString()
              console.log(md)
            })
          ]
        }
      })
    } else {
      cmMergeViewRef.current?.destroy()
      cmMergeViewRef.current = null
    }
  }, [])

  return <div ref={ref}/>
}
4

That’s how the align feature used to work in the old v5 implementation too. The thing where stuff isn’t aligned, but scrolling compensates to keep chunks together, is no longer supported.

5

Got it, thank you for confirming