Lexical based editor #5058
Merged
Lexical based editor #5058
Conversation
This file contains 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
Started basic playground for testing lexical as a new WYSIWYG editor. Moved out tinymce to be under wysiwyg-tinymce instead so lexical is the default, but TinyMce code remains.
Structured UI logical to be fairly standard and mostly covered via a base class that handles context and core dom work.
Connected up to work with image form
With a bunch of default icons
Changed from using a decorator to using a helper that watches for image selections to then display a resize helper. Also changes resizer to use a ghost and apply changes on end instead of continuosly during resize.
- Updated selection change detection to be more accurate - Added UI refresh for extra actions - Fixed remove link deleting contents
- Improved node resizer positioning to be more accurate - Fixed drop handling not running within editor margin space - Made media dom update smarter to reduce reloads - Fixed media alignment, broken due to added wrapper
- Cleaned up dropdown lists to look integrated - Added icons for color picker clear and menu list items
Also updated media to be an inline element to align with old editor behaviour.
Needed a custom implementation due to hardcoded defaults for Lexical default indenting.
Added list nesting support to allow li > ul style nesting which lexical didn't do by default. Adds tab handling for inset/outset controls. Will be a range of edge-case bugs to squash during testing.
Kinda useless though due to Lexical reconciler :(
Imported at 0.17.1, Modified to work in-app. Added & configured test dependancies. Tests need to be altered to avoid using non-included deps including react dependancies.
- Updated tests to consider changes
Also removed duplicated dir functionality that remained in core.
- Prevented ui shortcuts running in editor - Added form modal closing on submit - Fixed ability to escape lists via enter on empty last item
- Updated toolbar to match existing editor, including dynamic RTL/LTR controls. - Updated text node handling to not include spans and extra classes when not needed. Added & update tests to cover.
ssddanbrown
force-pushed
the
lexical
branch
from
f730c3a to
1b9310e
Compare
# for free
to join this conversation on GitHub.
Already have an account?
# 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.
Playing with the idea of using Lexical as a new editor, to eventually replace TinyMCE.
A lot of work though, not looking forward to tables 😱.
Switching direct from TinyMCE would be a hard landing, as the schema/structure imposed does is more strict than what TinyMCE would accept in our configuration, and there's bound to be many differences.
Would want to release in parallel, first as opt-in, then opt-out, then remove TinyMCE.
Related to #4908