IonContent shadowdom messing with codemirror 6 custom component styles

Ionic Framework Ionic React
1

I am trying to insert a codemirror 6 component inside IonContent, but it completely messes with the codemirror styles because of the shadowdom used by IonContent.
Codemirror allows us to pass a root property where I can pass the IonContent shadow root, but I am not sure how I can get the ref for the parent IonContent.

<IonContent>
        <CodeMirrorEditor editorRoot={ // pass parent IonContent's shadowRoot ?? }/>
 </IonContent>

Any ideas how I can deal this this issue? thanks.

EDIT:
I tried using ref and passing it to CodeMirrorEditor like this -

 const ICRef = useRef<HTMLIonContentElement>(null);
return (
<IonContent ref={ICRef}>
        <CodeMirrorEditor editorRoot={ ICRef.current.shadowRoot }/>
 </IonContent>
)
`

But I get error -

react-dom.development.js:23275 Uncaught TypeError: Cannot read properties of null (reading ‘shadowRoot’)

2

Just wanted to check if anyone can help me here. Thanks.

3

Hi there! Do you have a sample/demo I could look at? It’s kind of hard to help without one.

4

Hi mhartington@,

Thanks for your response. I found a clean solution to my issue.
Instead of passing IonContent ref to CodeMirrorEditor to mount codemirror component inside the shadowdom of IonContent, I created a shadowdom for codemirror itself which will keep all codemirror styles self-contained and wont interfere with Ionic’s styles.
Hope this helps anyone else with similar issue.

1 Like
5

Hi! Could you share a sample code how did you get this to work?

6

How did you create this shadow dom? Please share your solution for everyone with the same problem.

7

I used a library called react-shadow.
Here is a sample code -

import root from "react-shadow";


function MyComponent() {

const cmRef = useRef<HTMLDivElement>();

useEffect(() => {
  function createCM() {
   const state = EditorState.create({
      doc: "",
      extensions: myExtensions,
    });

    const view = new EditorView({
      state,
      parent: cmRef.current?.shadowRoot,
    });

   createCM();
}

}, []);

return (

<root.div ref={cmRef} className={"my-css-class"}>
 
</root.div>

)}

This is watered down version of my code. It may not work as is but the idea is to create a react ref, use root.div and assign the ref to this div. Then in useEffect, create codemirror editorView as usual but use cmRef.current.shadowRoot as parent.

Your codemirror editor should now be inside its own shadow dom.