React codemirror merge doesn't work in shadow dom #734
Description
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