React codemirror merge doesn't work in shadow dom

[boopeshmahendran227]

I think the styles are injected in the main document, not in the shadow dom. Below is the code i am using

import CodeMirrorMerge from "react-codemirror-merge";
import { EditorView } from "@codemirror/view";
import { EditorState } from "@codemirror/state";
import React from "react";
import { javascript } from "@codemirror/lang-javascript";

const Original = CodeMirrorMerge.Original;
const Modified = CodeMirrorMerge.Modified;

interface ShowDiffProps {
  original: string;
  modified: string;
}

const ShowDiff: React.FC<ShowDiffProps> = ({ original, modified }) => {
  return (
    <CodeMirrorMerge orientation="b-a" theme={"light"}>
      <Original value={original} extensions={[javascript({ jsx: true })]} />
      <Modified
        value={modified}
        extensions={[
          EditorView.editable.of(false),
          EditorState.readOnly.of(true),
          javascript({
            jsx: true,
          }),
        ]}
      />
    </CodeMirrorMerge>
  );
};

export default ShowDiff;

I think, we will have to expose the root prop from the codemirror-merge's MergeView

[jaywcjlove]

@boopeshmahendran227 upgrade v4.23.13