Tiptap RTE: Optimize umb-input-tiptap initialization and rendering
#21070
+22
−10
Conversation
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
The inner awaits in Promise.all([await ..., await ...]) made the operations sequential anyway. Since #loadEditor() depends on _extensions being populated, sequential execution is correct - this change makes the intent clearer. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Instead of calling .flat() on every render to check if toolbar/statusbar have items, compute the boolean once when values are set in #loadEditor(). This avoids unnecessary array operations during render cycles. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Instead of calling unsafeCSS() on each style during every render cycle, collect and process styles once in #loadEditor() and store the result in _extensionStyles. This avoids repeated CSS processing during renders. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]> # Conflicts: # src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/input-tiptap.element.ts
Contributor
There was a problem hiding this comment.
Pull request overview
This PR optimizes the Tiptap RTE component's initialization and rendering performance through three targeted improvements: simplifying the sequential extension loading pattern, caching toolbar/statusbar visibility checks to avoid repeated array operations, and pre-computing extension styles during initialization rather than on every render.
Key Changes:
- Replaced redundant
Promise.allwrapper with clear sequential awaits infirstUpdated() - Added cached
#hasToolbarand#hasStatusbarflags to avoid.flat()operations on every render - Consolidated extension styles into a single
CSSResultGroupcomputed once during initialization
src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/input-tiptap.element.ts
Show resolved
Hide resolved
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Description
Following on from PR #21068, I asked Claude to review the "input-tiptap.element.ts" file to see if there were any performance or optimization recommendations that could be made. It came up with...
Promise.allwith sequential awaits to clarify the intentional execution order.flat()calls on every renderTest plan
🤖 Generated with Claude Code