-
Notifications
You must be signed in to change notification settings - Fork 27
Replace Froala with Quill #8739
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
dartajax
merged 67 commits into
ilios:master
from
michaelchadwick:frontend-6353-replace-froala-with-quill
Sep 18, 2025
Merged
Changes from all commits
Commits
Show all changes
67 commits
Select commit
Hold shift + click to select a range
6eec647
added utility to load quill editor
michaelchadwick 0f155d2
merge qunit-dom dependency update
michaelchadwick ecbfbc4
added translations for toolbar buttons and link popup
michaelchadwick 9d8c0ce
add helper function for loading quill editor
michaelchadwick 0976dbe
HtmlEditor component now uses QuillEditor
michaelchadwick 9159c71
update course and programYear routes to use QuillEditor
michaelchadwick 2666628
updated HtmlEditor integration test to use QuillEditor
michaelchadwick 6922e38
make unit test for quill editor utilty
michaelchadwick 4e09650
globally add css for Quill...for now
michaelchadwick 016e30f
pull in local node Quill CSS instead of using cdn
michaelchadwick 3aa775b
remove froala loaders
michaelchadwick b77dbaa
remove froala helper unit test
michaelchadwick 6fc6912
remove froala npm package
michaelchadwick 1a63482
normalized the colors used for HtmlEditor in variable and format
michaelchadwick 5710fae
fixed some pathing bugs
michaelchadwick 4758140
update lock file post-froala
michaelchadwick 8abd8dd
fixed toolbar alignment; made disabled undo/redo button correct color
michaelchadwick ec86ace
editor undo/redo now disabled unless there is actionable history
michaelchadwick f4038e1
fixed existing tests to work with Quill
michaelchadwick 8a5fd7c
made quill content editor a little less tall
michaelchadwick 2837804
make link popup insert button look more like froala's
michaelchadwick 8e24030
link insert popup now disappears when you click off of it
michaelchadwick a5ef39b
beefed up integration test to make sure full toolbar is there; link p…
michaelchadwick a972abd
remove old commented-put Froala method no longer needed
michaelchadwick 1d54565
updated comments about editor.root.innerHTML vs editor.getContents()
michaelchadwick 94b8094
removed unneeded tracking variable for editor loading
michaelchadwick 58a02d1
refactor undo/redo buttons import markup so it renders like other too…
michaelchadwick 5fe9989
added better comment explaining where undo/redo svg markup comes from…
michaelchadwick a08ac87
make Quill instances fill 100% of parent container
michaelchadwick a9f31d4
added some padding to popup input fields
michaelchadwick 2820c5e
link popup will close on escape key now
michaelchadwick d27a085
merged webpack dependency update
michaelchadwick c1013f0
import redo/undo svgs for quill in build stage
michaelchadwick 88c547d
add quill to test-app
michaelchadwick ae6be45
move redo/undo svg files from quill node_modules dir into ilios publi…
michaelchadwick fd2ba87
fixed missing dependency reference
michaelchadwick 543e92f
add quill to LTIs so they build
michaelchadwick 5364810
Import SVGs from Quill
jrjohnson c461dfb
add moderately-good user link parsing for more valid links
michaelchadwick 2a0bbc4
change inserted link default to be same window/tab
michaelchadwick ff63b04
override the base Link Blot so that target can be customized
michaelchadwick 6d34495
make it more obvious why I'm converting existing data so it can displ…
michaelchadwick 4c7e836
only allow the escape key to close popup, not open it
michaelchadwick 8607886
allow enter key to submit insert link modal
michaelchadwick bc614e9
re-focus on the editor if the link popup is closed via escape key
michaelchadwick f642a8d
added integration tests for link popup and its accuracy in inserting …
michaelchadwick 99454ae
addLink is now a task and YupValidation has been added to popup input…
michaelchadwick 8559b27
fix quill existing link tooltip editing bug and hide ql-preview input…
michaelchadwick 79f9149
remove convenience variable as not useful enough and potentially conf…
michaelchadwick e73904d
added test for checking edited links, but skipped for now because can…
michaelchadwick f2ffa34
added proper url YupValidation to popup URL value and modeled it afte…
michaelchadwick 59a2fbf
switched test skip to todo so it shows up in browser testing
michaelchadwick 69c1cbf
pnpm-lock.yaml re-creation
michaelchadwick d34207a
fixed test by changed yup's ensure() to required(); refactored to be …
michaelchadwick 3330665
added some labels to the session acceptance test
michaelchadwick f008fc2
switched to using getSemanticHTML() and massaging output going into d…
michaelchadwick cf6eb94
removed debug option as it was set to the default already
michaelchadwick eb84763
changed popupValidations to validations to make searching for yup stu…
michaelchadwick 15671be
added another integration test to check if editor data sent to db loo…
michaelchadwick 1e7bf5f
updated eslint-disable to just use next-line
michaelchadwick cb9324a
removed old froala destroyed/destroying checks as those are not relev…
michaelchadwick 027d94a
clear quill instance history on load so existing text is not on the s…
michaelchadwick d32f0ab
match quill editor font-size with old froala editor font-size
michaelchadwick ec5f5f9
set quill's user-stopped-typing-to-record-an-undo delay from default…
michaelchadwick d904ea3
make quill history undo act like Froala using a 500ms cutoff to save …
michaelchadwick 59cb45a
undo/redo buttons transition color when enabling/disabling like froala
michaelchadwick 1b47120
make sure editor exists before cutting off history so that acceptance…
michaelchadwick File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
55 changes: 0 additions & 55 deletions
55
packages/ilios-common/addon-test-support/ilios-common/helpers/froala-editor.js
This file was deleted.
Oops, something went wrong.
52 changes: 52 additions & 0 deletions
52
packages/ilios-common/addon-test-support/ilios-common/helpers/quill-editor.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import { findOne } from 'ember-cli-page-object/extend'; | ||
| import { loadQuillEditor } from 'ilios-common/utils/load-quill-editor'; | ||
| import { later } from '@ember/runloop'; | ||
|
|
||
| export async function fillInQuillEditor(element, html) { | ||
| const editor = await getEditorInstance(element); | ||
| editor.setContents(editor.clipboard.convert({ html })); | ||
| } | ||
| export async function quillEditorValue(element) { | ||
| const editor = await getEditorInstance(element); | ||
| // easiest way to get the HTML in an editor, maintain multiple spaces, and make sure it's empty empty, as Quill leaves `<p><br></p>` even if the editor is "empty" | ||
| // not using editor.getContents() as it returns custom Delta object that doesn't actually have the HTML markup: https://quilljs.com/docs/api#getcontents | ||
| return editor.root.innerHTML.split(' ').join(' ').replaceAll('<p><br></p>', ''); | ||
| } | ||
|
|
||
| export function pageObjectFillInQuillEditor(selector, options = {}) { | ||
| return { | ||
| isDescriptor: true, | ||
|
|
||
| get() { | ||
| return async function (html) { | ||
| const element = findOne(this, selector, options); | ||
| return fillInQuillEditor(element, html); | ||
| }; | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| export function pageObjectQuillEditorValue(selector, options = {}) { | ||
| return { | ||
| isDescriptor: true, | ||
|
|
||
| get() { | ||
| return async function () { | ||
| const element = findOne(this, selector, options); | ||
| return quillEditorValue(element); | ||
| }; | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| function getEditorInstance(element) { | ||
| return new Promise((resolve) => { | ||
| loadQuillEditor().then(({ QuillEditor }) => { | ||
| // eslint-disable-next-line ember/no-runloop | ||
| later(() => { | ||
| const ourInstance = QuillEditor.find(document.querySelector(`#${element.id}`)); | ||
| resolve(ourInstance); | ||
| }); | ||
| }); | ||
| }); | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
77 changes: 77 additions & 0 deletions
77
packages/ilios-common/addon-test-support/ilios-common/page-objects/components/html-editor.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import { | ||
| attribute, | ||
| clickable, | ||
| collection, | ||
| create, | ||
| fillable, | ||
| focusable, | ||
| isVisible, | ||
| isPresent, | ||
| property, | ||
| text, | ||
| } from 'ember-cli-page-object'; | ||
|
|
||
| const definition = { | ||
| scope: '[data-test-quill-html-editor]', | ||
| toolbar: { | ||
| scope: '[data-test-toolbar]', | ||
| bold: isPresent('[data-test-toolbar-bold]'), | ||
| italic: isPresent('[data-test-toolbar-italic]'), | ||
| subscript: isPresent('[data-test-toolbar-subscript]'), | ||
| superscript: isPresent('[data-test-toolbar-superscript]'), | ||
| listOrdered: isPresent('[data-test-toolbar-list-ordered]'), | ||
| listUnordered: isPresent('[data-test-toolbar-list-unordered]'), | ||
| link: { | ||
| scope: '[data-test-toolbar-link]', | ||
| insertLink: clickable(), | ||
| }, | ||
| undo: { | ||
| scope: '[data-test-toolbar-undo]', | ||
| disabled: attribute('disabled'), | ||
| goBack: clickable(), | ||
| }, | ||
| redo: { | ||
| scope: '[data-test-toolbar-redo]', | ||
| disabled: attribute('disabled'), | ||
| goForward: clickable(), | ||
| }, | ||
| }, | ||
| editor: { | ||
| scope: '[data-test-html-editor]', | ||
| content: { | ||
| scope: '.ql-editor', | ||
| edit: fillable(), | ||
| focus: focusable(), | ||
| textContent: text(), | ||
| htmlContent: property('innerHTML'), | ||
| linkTooltip: { | ||
| scope: '.ql-tooltip', | ||
| openEditor: clickable('.ql-action'), | ||
| edit: fillable('input'), | ||
| }, | ||
| }, | ||
| }, | ||
| popup: { | ||
| scope: '[data-test-insert-link-popup]', | ||
| errors: collection('.validation-error-message'), | ||
| activated: isVisible(), | ||
| form: { | ||
| url: { | ||
| scope: '[data-test-url]', | ||
| edit: fillable(), | ||
| }, | ||
| text: { | ||
| scope: '[data-test-text]', | ||
| edit: fillable(), | ||
| }, | ||
| linkNewTarget: isPresent('[data-test-link-new-target]'), | ||
| insert: { | ||
| scope: '[data-test-submit]', | ||
| submit: clickable(), | ||
| }, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export default definition; | ||
| export const component = create(definition); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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):
