Custom Module Issue

App Building
1

  • Goal: There's a custom rich text editor that was operational last week, but it suddenly stopped working. Please refer to the attached screenshot. The expectation is that it should display a toolbar and a text area.

  • Steps: I've tested it on different browsers and encountered the same issue. When I replaced ReactQuill with an input field, it worked fine. It seems like the problem lies with ReactQuill/Retool.

  • Details: Attached the script

  • Screenshots: Attached screenshots

  • App json ex
    image-20240402-221203 (1)
    port    :

3

i can't attached the whole script. it doesn't allow me
// Define the modules to be used by Quill
const modules = {
toolbar: {
container: "#toolbar",
handlers: {
// insertDagger: insertDagger,
customSymbols: customSymbols
}
}
}

const CustomQuillEditor = ({ triggerQuery, model, modelUpdate }) => (




<ReactQuill
id="details-editor"
theme="snow"
modules={modules}
value={model.editorContent}
onChange={(e) => modelUpdate({ editorContent: e })} />


)

// This is the entrypoint for the React component.
const ConnectedComponent = Retool.connectReactComponent(CustomQuillEditor)
const container = document.getElementById('react')
const root = ReactDOM.createRoot(container)
root.render()

4

Hmm this code is working in an app on my end so far :thinking: (in that it isn't erroring out)

Is this in a Retool list view? Any chance you could send us the JSON export of your app?

I'd also try checking on Storage and cookies in the Custom component config & reloading the app

5

i can't upload the JSON file. Here's the error "Sorry, new users can not upload attachments."

Which version are you using?

could you please share your working script?

6

Sorry about that! I believe I've enabled your ability to send attachments now :crossed_fingers:

The code wasn't showing the same error that we saw in office hours, but I still don't have the UI that you're looking for.

7

customRichTextEditor.json (7.9 KB)
Please see the attached file. you can change the extension to JS.

8

Hi @Samninder_singh Thanks! I copied your code into my own app. I wasn't seeing any errors in the browser console, but I did see that the container for typing in text was hidden in the component due to line 37 in the css:

image

Does that help at all?

Is this closer to what you're expecting to see:

image
image1816×812 56 KB

9

Thanks Tess, It's working now.

1 Like