Replace Froala with Quill #8739

michaelchadwick · 2025-08-04T18:59:44Z

The Quill is mightier than the Froala, or something.

Still have a hojillion tests to fix, but this is a Proof of Concept that works pretty well as a replacement. The only thing I still need to add, feature-wise, is a more dynamic, local CSS load (it's currently global on the index.html file), and the pre-chosen links for Insert Link.

Feel free to mess around with it and find where it breaks!

netlify · 2025-08-04T19:01:44Z

✅ Deploy Preview for ilios-frontend ready!

Name	Link
🔨 Latest commit	`1b47120`
🔍 Latest deploy log	https://app.netlify.com/projects/ilios-frontend/deploys/68cc80d7c1403c0007c70ce3
😎 Deploy Preview	https://deploy-preview-8739--ilios-frontend.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

packages/frontend/app/index.html

dartajax

The "undo" button should not be activated unless the user has made a change.

dartajax · 2025-08-04T21:21:39Z

This is our current froala config with the inactive undo and redo buttons up higher on the same level as Bold, Italic and the other controls - also with the white background rather than blue.

In my testing, undo using Quill erases the entirety of the text entered, which could be disastrous if "saved".

michaelchadwick · 2025-08-06T00:22:19Z

@dartajax the blue background and undo/redo issues should be fixed.

@jrjohnson I also threw in the "hide insert link popup if you click away from it" fix.

jrjohnson

Some code changes, two behavior things I noticed:

Needs to expand to fill full space:
Froala:

Quill:

And when the add link popup is open it's hard to close. Needs a x button to click, but I think escape in the input should also close it. Clicking outside works, that's nice.

packages/ilios-common/addon-test-support/ilios-common/helpers/quill-editor.js

jrjohnson · 2025-08-06T22:31:49Z

packages/ilios-common/addon-test-support/ilios-common/helpers/quill-editor.js

+}
+export async function quillEditorValue(element) {
+  const editor = await getEditorInstance(element);
+  return editor.root.innerHTML.split('  ').join(' &nbsp;').replaceAll('<p><br></p>', '');


This needs a comment or link. I'm guessing this is the only way to get at the value here, but it seems weird to reach into the HTML and that there isn't an API in quill to get the current value of the editor.

There is a call to get the contents: https://quilljs.com/docs/api#getcontents, but it doesn't work as well as what I used.

There are three ways to get at what's in the editor (I had just added the exclamation point at the end):

packages/ilios-common/addon/components/html-editor.gjs

jrjohnson · 2025-08-06T22:36:30Z

packages/ilios-common/addon/components/html-editor.gjs

+        if (!this.isDestroyed && !this.isDestroying) {
+          this.editorHasNoRedo = !this.editor.history.stack.redo.length;
+          this.editorHasNoUndo = !this.editor.history.stack.undo.length;
+          // make sure to retain multiple spaces


I agree this is what the code does, but maybe a deeper comment on why is needed? Why not just let quill collapse spaces?

The reason for this code is because Froala also retains multiple spaces, but Quill needs this extra bit to achieve parity.

jrjohnson · 2025-08-06T22:38:28Z

packages/ilios-common/addon/utils/load-quill-editor.js

+export async function loadQuillEditor() {
+  const { default: QuillEditor } = await import('quill');
+
+  // Quill doesn't include redo/undo icons by default, so gotta hack 'em in


Could we use what's in font awesome for this? I'm not worried about style yet, but I don't love carrying some random SVG stuff here.

I tried Fontawesome but the icons don't match the rest of the toolbar buttons.

The <svg> markup is not random, as it comes from Quill itself: node_modules/quill/assets/icons/[undo|redo].svg. Why this isn't wired up already, I do not know (nor does anyone else using Quill that I could find). Perhaps an upstream PR is needed?

I put a comment in the code about this, and reproduced the link I followed here so you know where this method came from: slab/quill#885 (comment)

Ah, how about we pull this svg out of node_modules and into /public and use it directly? My objection is just to the svg in the code that's a little bit hard to figure out where it's from or when to update it.

michaelchadwick · 2025-08-11T23:09:58Z

@jrjohnson Editor instance now fills container, and link popup closes on escape key. Froala doesn't currently have an 'X'-type close button, so I didn't think to add it to Quill. However, it could be added.

michaelchadwick · 2025-08-14T22:28:25Z

@jrjohnson The best thing I came up with so far for loading the redo/undo svg files is here 1f80596

jrjohnson · 2025-08-15T22:41:54Z

I'm good with the fetch process. Works for me. Waiting for tests to pass, but I'm all in favor. Think it's worth a second review from @stopfstedt as well.

stopfstedt

code reviewed and click-tested. LGTM.

dartajax

A couple of thing regarding inserting links ... I will put them in separate comments though. Here's one thing I noticed.

dartajax · 2025-08-25T16:41:42Z

https://deploy-preview-8739--ilios-frontend.netlify.app/courses/2318/sessions/nytimes.com

I inserted the link "nytimes.com" into a session description field. The URL above will always get you zoinked.

michaelchadwick · 2025-08-25T18:44:43Z

@dartajax I added in some logic to hopefully turn protocol-less links like that into protocol-rich links.

michaelchadwick · 2025-08-25T18:46:55Z

@dartajax the "Open in new tab" option was initially put in there, unchanging, because Quill doesn't have a mechanism to put a link in without opening a new tab/window. However, I wanted to make the dialog with as much parity to Froala as possible.

That being said, I could spend more time trying to reverse engineer their logic and make that toggle work, or I could just remove it entirely and the User Guide could mention the change from Froala to Quill.

michaelchadwick · 2025-08-26T21:37:16Z

Look into adding the link target toggle functionality.

michaelchadwick · 2025-08-27T00:36:55Z

@dartajax I added the functionality to make a link open in a new tab or not, so that's taken care of. Please give it a whirl to make sure it works. Still need to add tests, though.

dartajax

I will leave this one as a comment rather than a change request although it may end up being that as well.

There may be a few of these also as I have noticed some issues.

This is in Froala ...

After clicking the edit link (as shown above), you get the following ...

With Quill what happens? ...

Click edit as shown above ...

The only thing that can be edited is the link itself and not whether it opens in a new tab or what the text display value is. Froala allows for editing of this information.

But it gets worse or weirder. When you click "Save" ...

After clickiing "Save" as shown above ...

Return to the link and see this ...

It is true if you cancel the operation and don't save any changes, the original link will still be there but there may be other text changes that needed to be made and that should not cause the link to be erased.

…links into editor

… fields

… that editinplace was showing

…using

…t figure out how to access quill internal object

…r the Virtual Learning Link style

…more like offering save method

…b for proper space encoding

…ff easier later

…ked valid (enough)

…ant to quill

…tack and unavailable for undoing

…1000 to 500

…to history after user stops typing

… tests dont break

michaelchadwick · 2025-09-15T16:23:37Z

@dartajax Do you want me to work further on the Word document copy/paste minor discrepancy?

jrjohnson · 2025-09-16T04:53:16Z

This may be unrelated, but I see siteimprove is picking up Role with implied hidden content has keyboard focus on a demo quill edit link when it's within our expanding text widget. I'm wondering if something about the HTML output is slightly different and now triggering an error where we haven't had one before.

stale

jrjohnson reviewed Aug 4, 2025

View reviewed changes

packages/frontend/app/index.html Outdated Show resolved Hide resolved

dartajax reviewed Aug 4, 2025

View reviewed changes

michaelchadwick requested a review from dartajax August 6, 2025 00:21

michaelchadwick marked this pull request as ready for review August 6, 2025 18:25

michaelchadwick requested a review from stopfstedt as a code owner August 6, 2025 18:25

jrjohnson previously requested changes Aug 6, 2025

View reviewed changes

michaelchadwick force-pushed the frontend-6353-replace-froala-with-quill branch from b6a3c7f to 13aadd4 Compare August 11, 2025 19:50

michaelchadwick requested a review from jrjohnson August 11, 2025 23:10

michaelchadwick force-pushed the frontend-6353-replace-froala-with-quill branch from 1f80596 to 7caa346 Compare August 14, 2025 22:27

michaelchadwick force-pushed the frontend-6353-replace-froala-with-quill branch from 7caa346 to ebb89eb Compare August 15, 2025 22:23

michaelchadwick force-pushed the frontend-6353-replace-froala-with-quill branch 2 times, most recently from d9af9eb to 5119b38 Compare August 25, 2025 15:09

stopfstedt approved these changes Aug 25, 2025

View reviewed changes

stopfstedt assigned dartajax Aug 25, 2025

dartajax reviewed Aug 25, 2025

View reviewed changes

michaelchadwick force-pushed the frontend-6353-replace-froala-with-quill branch from f51ae84 to 23ca15e Compare August 26, 2025 17:49

michaelchadwick requested a review from dartajax August 27, 2025 00:36

michaelchadwick added the DO NOT MERGE label Aug 27, 2025

dartajax reviewed Aug 27, 2025

View reviewed changes

michaelchadwick added 22 commits September 12, 2025 16:22

added integration tests for link popup and its accuracy in inserting …

f642a8d

…links into editor

addLink is now a task and YupValidation has been added to popup input…

99454ae

… fields

fix quill existing link tooltip editing bug and hide ql-preview input…

8559b27

… that editinplace was showing

remove convenience variable as not useful enough and potentially conf…

79f9149

…using

added test for checking edited links, but skipped for now because can…

e73904d

…t figure out how to access quill internal object

added proper url YupValidation to popup URL value and modeled it afte…

f2ffa34

…r the Virtual Learning Link style

switched test skip to todo so it shows up in browser testing

59a2fbf

pnpm-lock.yaml re-creation

69c1cbf

fixed test by changed yup's ensure() to required(); refactored to be …

d34207a

…more like offering save method

added some labels to the session acceptance test

3330665

switched to using getSemanticHTML() and massaging output going into d…

f008fc2

…b for proper space encoding

removed debug option as it was set to the default already

cf6eb94

changed popupValidations to validations to make searching for yup stu…

eb84763

…ff easier later

added another integration test to check if editor data sent to db loo…

15671be

…ked valid (enough)

updated eslint-disable to just use next-line

1e7bf5f

removed old froala destroyed/destroying checks as those are not relev…

cb9324a

…ant to quill

clear quill instance history on load so existing text is not on the s…

027d94a

…tack and unavailable for undoing

match quill editor font-size with old froala editor font-size

d32f0ab

set quill's user-stopped-typing-to-record-an-undo delay from default …

ec5f5f9

…1000 to 500

make quill history undo act like Froala using a 500ms cutoff to save …

d904ea3

…to history after user stops typing

undo/redo buttons transition color when enabling/disabling like froala

59cb45a

make sure editor exists before cutting off history so that acceptance…

1b47120

… tests dont break

michaelchadwick force-pushed the frontend-6353-replace-froala-with-quill branch from 3774c2f to 1b47120 Compare September 18, 2025 21:59

dartajax added the run ui tests Run the expensive UI tests label Sep 18, 2025

dartajax approved these changes Sep 18, 2025

View reviewed changes

dartajax merged commit 065e2a4 into ilios:master Sep 18, 2025
38 checks passed

michaelchadwick deleted the frontend-6353-replace-froala-with-quill branch September 19, 2025 17:36

Replace Froala with Quill #8739

Replace Froala with Quill #8739

Uh oh!

Conversation

michaelchadwick commented Aug 4, 2025

Uh oh!

netlify bot commented Aug 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for ilios-frontend ready!

Uh oh!

Uh oh!

dartajax left a comment

Choose a reason for hiding this comment

Uh oh!

dartajax commented Aug 4, 2025

Uh oh!

michaelchadwick commented Aug 6, 2025

Uh oh!

jrjohnson left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jrjohnson Aug 6, 2025

Choose a reason for hiding this comment

Uh oh!

michaelchadwick Aug 11, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jrjohnson Aug 6, 2025

Choose a reason for hiding this comment

Uh oh!

michaelchadwick Aug 11, 2025

Choose a reason for hiding this comment

Uh oh!

jrjohnson Aug 6, 2025

Choose a reason for hiding this comment

Uh oh!

michaelchadwick Aug 11, 2025

Choose a reason for hiding this comment

Uh oh!

jrjohnson Aug 12, 2025

Choose a reason for hiding this comment

Uh oh!

michaelchadwick commented Aug 11, 2025

Uh oh!

michaelchadwick commented Aug 14, 2025

Uh oh!

jrjohnson commented Aug 15, 2025

Uh oh!

stopfstedt left a comment

Choose a reason for hiding this comment

Uh oh!

dartajax left a comment

Choose a reason for hiding this comment

Uh oh!

dartajax commented Aug 25, 2025

Uh oh!

michaelchadwick commented Aug 25, 2025

Uh oh!

michaelchadwick commented Aug 25, 2025

Uh oh!

michaelchadwick commented Aug 26, 2025

Uh oh!

michaelchadwick commented Aug 27, 2025

Uh oh!

dartajax left a comment

Choose a reason for hiding this comment

Uh oh!

michaelchadwick commented Sep 15, 2025

Uh oh!

jrjohnson commented Sep 16, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

netlify bot commented Aug 4, 2025 •

edited

Loading