tiny-single-react-ui: squashed commit rebased, based on PR #275 #285
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
Closed
|
We've moved the prototypes to a docs folder, you'd need to do another rebase to move it there, sorry for the hassle. |
mtias
added
Design
[Type] Technical Prototype
|
No problem. I've made a new PR #294 . |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
Please see PR #294 which replaces this one.
We decided to move the code from #275 directly to the WordPress/gutenberg project and rebase directly on the new master. Original description below.
Hi all, we have a prototype going for #229.
You can see it at https://intronic.github.io/gutenberg/tinymce-single-react-ui/
What is in the demo:
One single instance of tiny with the UI in React+Redux, with CSS modules
The UI is per #215
What works
Block Menu
clicking in a block will highlight the outer border of the block, and bring up a block-change menu icon at the top right.
clicking in different blocks brings up the menu for that block
hover over different blocks highlights that block with a vertical bar, but doesnt change the focus
hover over the block-change icon and the block-align menu will show
click the block-change icon and a drop-down of different block types will be shown
the block-menu icon changes depending on the type of block (currently only P/H/Blockquote - not IMG, etc)
Inline style Menu
the inline menu shows up only when a range is selected and it appears above the selected text (similar to medium)
the inline menu button states show the state of the highlighted text (eg, bold)
using the keyboard to toggle the highlight text bold or italic will also toggle the button states
Key difference in the code
UI actions, UI state transitions, and UI rendering, and styling are all decoupled so changing the UI is simpler
Most of the issues in #190 will be addressed once all the editor actions are linked up, as contenteditable is controlled by a single instance of TinyMCE
What is not completed yet
linking the button click handlers to the tiny commands (eg, none of the buttons are functional)
positioning the block highlight after scrolling the page
the original spec called for the inline menu to be black with white text to distinguish it from the block-menu, but it currently is still white background and black text
lots of other stuff
Cheers,
Mike, Maurizio & Anna