Quill Editor is not working inside Frame tag in the Content Script Via Chrome Extension.

[Shanky-21]

Hey, I have been working on a Chrome Extension project. Its in React + Typescript + Tailwindcss.

I have been using

quill 2.0.3 and "react-quill": "^2.0.0"

my react version : "react": "^18.3.1"

Here is the code for QuillEditor which I'm trying to run via ContentScript.

`import React, { useEffect, useRef, useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

interface IQuillEditorProps {
  initialValue: string;
  onChange: (value: string) => void;
}

const QuillEditor: React.FC<IQuillEditorProps> = ({ initialValue, onChange }) => {

  const modules = {
    toolbar: [
      // ['bold', 'italic', 'underline'],
      // [{ 'list': 'ordered'}, { 'list': 'bullet' }],
      // ['clean']
    ]
  };

  const formats = [
    'bold', 
    'italic', 
    'underline', 
    'list', 
    'bullet'
  ];

  let quillRef = useRef<ReactQuill>(null);

// This part of code I added for testing purpose to check if adding this also triggers the bold formatting of editor.

  useEffect(() => {
    if (quillRef.current) {
      quillRef.current?.getEditor()?.format('bold', true);
      console.log("Quill instance:", quillRef.current.getEditor());
    }
  }, [quillRef]);

  return (
      <ReactQuill 
        ref={quillRef}
        theme="snow"
        value={initialValue}
        onChange={onChange}
        modules={modules}
        formats={formats}
        placeholder="Write your notes here..."
        style={{
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
        }}
      />
  );
};

export default QuillEditor;

`

This code is being run inside an Frame Tag. I know Frame tags has their own context and It can cause Issues. ( Its already causing ).

When I simply run this quillEditor code anywhere else, its working fine. But the issue only comes with ContentScript side.

Even Though I have made the required resource for css file available in the Frame tag also.

When clicking on bold/ italic / Bullet points it doesn't do anything. It appears simply as is.

I'm pasting one console error which was coming when I was clicking on Bullet point button.

Uncaught TypeError: Cannot read properties of null (reading 'index')
 at Quill.getFormat (quill.js:1352:1)
 at Toolbar.list (quill.js:9623:1)
 at HTMLButtonElement.<anonymous> (quill.js:9465:1)
```
`

This above error appears everytime I click on the bullet / numbered bullet list formatting Icon. 

There were few other logs also - 

`
```
Uncaught DOMException: Failed to execute 'evaluate' on 'Document': The string '' is not a valid XPath expression.
    at chrome-extension://bgdmonaeclkpadlenijmdcopiobbkenm/content2.js:54976:29
`
```

other logs -. 

Warning: findDOMNode is deprecated and will be removed in the next major release. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node at ReactQuill (chrome-extension://bgdmonaeclkpadlenijmdcopiobbkenm/content2.js:36151:28) at QuillEditor (chrome-extension://bgdmonaeclkpadlenijmdcopiobbkenm/content2.js:57036:24) at div at div at div at div at Content (chrome-extension://bgdmonaeclkpadlenijmdcopiobbkenm/content2.js:35764:5) at iframe at Frame (chrome-extension://bgdmonaeclkpadlenijmdcopiobbkenm/content2.js:35892:5) at NotesPopup (chrome-extension://bgdmonaeclkpadlenijmdcopiobbkenm/content2.js:58048:90) at CodeSmartApp

`
another one. 
`

quill.js:4237 [Deprecation] Listener added for a synchronous 'DOMNodeInserted' DOM Mutation Event. This event type is deprecated (https://w3c.github.io/uievents/#legacy-event-types) and work is underway to remove it from this browser. Usage of this event listener will cause performance issues today, and represents a risk of future incompatibility. Consider using MutationObserver instead. [email protected]:[email protected]:[email protected]:1153__webpack_modules__../node_modules/react-quill/lib/[email protected]:223__webpack_modules__../node_modules/react-quill/lib/[email protected]:187__webpack_modules__../node_modules/react-quill/lib/[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:12042(anonymous)@react-dom.development.js:25690Show less

`

This below one came when I added one console.log to check if the quill instance is available of not. I logged it using 

`useEffect(() => { if (quillRef.current) { console.log("Quill instance:", quillRef.current.getEditor()); }

}, [quillRef]);

`
`
Quill instance: Quill {options: {…}, container: div.ql-container.ql-snow, root: div.ql-editor, scrollingContainer: div.ql-editor, emitter: Emitter, …}
`


Below is how I'm injecting the quillEditor via Frame component. 

`

]

<QuillEditor initialValue={notesContent} onChange={handleNotesChange} />

``` `

and injecting the frame via content script.

so, when I'm using QuillEditor without frame tag its working but inside frame its not workign.

I want to use the frame tag since, it helps me show corrects css and it doesn't interfere with the website styles.

any input on this would be appreaciated.