Issues on using Merge addon and diff_match_patch? (Solved)

1

Hello all.

My project is based on NodeJS and React, and I’m installed codemirror version 5.60.5.

I am trying to use codemirror with merge addon to my project.

As I searched in google, it seems like i have to import codemirror and import merge as well.
My import code is shown as below:

import * as CodeMirror from "codemirror";
import "codemirror/mode/meta";
import "codemirror/addon/merge/merge";

...

    const [itemRef, setItemRef] = useState<HTMLElement>(null);
    const [codeMirror, setCodeMirror] = useState<CodeMirror.MergeView>();

    useEffect(() => {
        if (!!itemRef) {
            const _code = CodeMirror(itemRef, {
                value: null,
                origLeft: null,
                orig: true,
                lineNumbers: true,
                mode: "application/ld+json",
                highlightDifferences: true,
                allowEditingOriginals: true,
                connect: "align",
                collapseIdentical: true
            })
        }
    }, [itemRef]);

%
const [codeMirror, setCodeMirror] = useState<CodeMirror.MergeView>();
%

Here, MergeView is not reachable from Codemirror by just putting import statement for merge addon.

Can anyone help me with using Codemirror Merge??

Thank you.

2

CodeMirror 5 doesn’t expose ES modules, so whatever is going wrong here likely has something to do with the magic your module loader or bundler uses to work around that.

4

I’ve solved this issue by working on the Webpack.

As per importing CodeMirror, I just needed to import the node package right away.
The issue was that CodeMirror.MergeView cannot be used as a type, but just call it right away.

import * as React from "react";
import {useEffect, useState} from "react";
import * as CodeMirror from "codemirror";
import "codemirror/addon/merge/merge.css";
import "codemirror/addon/merge/merge";

...
export const CodeMirrorEditor: React.FunctionComponent<Props> = () => {
...
    useEffect(() => {
        if (!!itemRef) {
            itemRef.innerHTML = "";
            const _code = CodeMirror.MergeView(itemRef, {
                value: "null",
                // origLeft: "null",
                orig: "true",
                lineNumbers: true,
                mode: "application/ld+json",
                showDifferences: true,
                allowEditingOriginals: true,
                connect: "align",
                collapseIdentical: true
            })
        }
    }, [itemRef]);

    return <div ref={setItemRef}/>;
}

After solving importing issue, there was an another issue with declaring “diff-match-patch” globally.

To solve this issue, first step is to install “diff_match_patch” and “@types/diff-match-patch” fron NPM.
Next, since my project is based on Typescript and uses Webpack as bundler, “diff-match-patch” must be bundled using webpack plugin.

plugins: [
        new webpack.ProvidePlugin({
            diff_match_patch: ["diff_match_patch/lib/diff_match_patch", "diff_match_patch"],
            DIFF_EQUAL: ["diff_match_patch/lib/diff_match_patch", "DIFF_EQUAL"],
            DIFF_INSERT: ["diff_match_patch/lib/diff_match_patch", "DIFF_INSERT"],
            DIFF_DELETE: ["diff_match_patch/lib/diff_match_patch", "DIFF_DELETE"],
        })
    ]

Finally, I can now use CodeMirror merge addon in my typescript project.

Hope this solution would help others going through this same issue~!

5

This thread has helped me a lot in solving this issue for an Angular 16 app - thanks to everyone who supplied information.

I just wanted to add my solution on how to declare diff-match-patch global in an Angular 16 project for others facing the same issue:

  1. install the custom webpack builder: npm i -D @angular-builders/custom-webpack@16.0.1
  2. edit angular.json and modify the @angular-devkit/build-angular:dev-server and @angular-devkit/build-angular:browser builders (note the options object in the build section):
{
    ...
    "architect": {
        "build": {
            "builder": "@angular-builders/custom-webpack:browser",
            "options": {
                "customWebpackConfig": {
                  "path": "./diff-match-patch-webpack.config.ts",
                  "replaceDuplicatePlugins": true
                },
            ...
            }
        }
        "serve": {
            "builder": "@angular-builders/custom-webpack:dev-server",
            ...
        }
        ...
    }
    ...
}
  1. create the file diff-match-patch-webpack.config.ts:
import { CustomWebpackBrowserSchema, TargetOptions } from '@angular-builders/custom-webpack';
import * as webpack from 'webpack';

export default (
  config: webpack.Configuration,
  options: CustomWebpackBrowserSchema,
  targetOptions: TargetOptions
) => {
  config.plugins.push(
    new webpack.ProvidePlugin({
        diff_match_patch: 'diff-match-patch',
        DIFF_EQUAL: ['diff-match-patch', 'DIFF_EQUAL'],
        DIFF_INSERT: ['diff-match-patch', 'DIFF_INSERT'],
        DIFF_DELETE: ['diff-match-patch', 'DIFF_DELETE'],
    }),
  );

  return config;
};
  1. done