TipTap: Load stylesheet parallel to extensions#23024
Conversation
|
Claude finished @nielslyngsoe's task in 5m 56s —— View job PR ReviewTarget: Refactors Important
Approved with Suggestions for improvementThe parallelisation is sound and the consolidation of stylesheet logic is a clean improvement. Please address the Labels applied: |
| stylesheet.startsWith('http') || stylesheet.startsWith(this.#stylesheetRootPath) | ||
| ? stylesheet | ||
| : `${this.#stylesheetRootPath}${stylesheet}`; | ||
| this._stylesheets.add(linkHref); |
There was a problem hiding this comment.
[Important] _stylesheets is mutated via .add() — the object reference stays the same, so Lit's @state() change detection (===) never schedules a re-render for this mutation. If #loadStylesheetPath() happens to complete after _extensionStyles is set and the first render has already run, configured stylesheets silently never appear in the shadow DOM. In practice the context observable resolves faster than extension loading, but the code is fragile and the decorator implies reactivity it does not deliver for in-place Set mutations. Suggestion: replace the reference in one assignment so Lit detects the change correctly. For example: collect hrefs in a plain array then do this._stylesheets = new Set([...this._stylesheets, ...hrefs]);
There was a problem hiding this comment.
Pull request overview
Refactors <umb-input-tiptap> so that resolving the stylesheet root path and building the configured stylesheet <link> list runs in parallel with Tiptap extension loading, rather than blocking it.
Changes:
- Removes the
awaiton#loadStylesheetPath()infirstUpdated()so it executes concurrently with#loadExtensions()/#loadEditor(). - Moves the configured-stylesheets URL building from
#loadEditor()into#loadStylesheetPath()(after the root path observable resolves). - Promotes the
#stylesheetsprivate field to a reactive@state() _stylesheetsand updates#renderStyles()to read it.
| if (stylesheets?.length) { | ||
| stylesheets.forEach((stylesheet) => { | ||
| const linkHref = | ||
| stylesheet.startsWith('http') || stylesheet.startsWith(this.#stylesheetRootPath) | ||
| ? stylesheet | ||
| : `${this.#stylesheetRootPath}${stylesheet}`; | ||
| this._stylesheets.add(linkHref); | ||
| }); | ||
| } |
It should not be necessary to await loading of the stylesheet before loading TipTap Extensions. So this makes them load in parallel.
This item has been added to our backlog AB#68798