FIX: Empty Links shows on frontend #2302
Conversation
Codecov Report
@@ Coverage Diff @@
## master #2302 +/- ##
=========================================
+ Coverage 25.9% 25.9% +<.01%
=========================================
Files 157 157
Lines 4849 4848 -1
Branches 820 817 -3
=========================================
Hits 1256 1256
- Misses 3033 3035 +2
+ Partials 560 557 -3
Continue to review full report at Codecov.
|
| linkValue: props.formats.link ? props.formats.link.value : '', | ||
| isEditingLink: false, | ||
| }; | ||
| super( props ); |
There was a problem hiding this comment.
I guess we should always prefer super( ...arguments ) to avoid errors when we use the context feature?
There was a problem hiding this comment.
No problems, i will revert this.
blocks/editable/index.js
Outdated
| isAddingLink: false, | ||
| isEditingLink: false, | ||
| newLinkValue: '', | ||
| }, |
There was a problem hiding this comment.
Why can't we keep this state in the formatToolbar instead. Seems more related to the link modal than the Editable.
There was a problem hiding this comment.
These all need to be reset in onNodeChange which FormatTooblar has no knowledge of. This also removes the need for trying to reconcile state in componentWillReceiveProps and the setTimeout hack that was in addLink. I can't think of a cleaner way to do this but happy to take suggestions!
There was a problem hiding this comment.
I have a preference over componentWillReceiveProps. It's a better Separation of Concerns IMO but I can live with it. Thoughts @aduth?
There was a problem hiding this comment.
First reaction before digging in: I don't see it as a win to drop some lines and logic from FormatToolbar if it means we add more code and responsibilities to the already-bloated Editable.
There was a problem hiding this comment.
I'm not super familiar with this code, but it seems like we're trying to force this component to be treated as a controlled component, maintaining the value as it's changed? This seems like a good use case for an uncontrolled component, meaning the link toolbar starts with an empty initial value when first shown, and only at the point that we decide we want to confirm a link being added do we trigger the onAddLink callback.
Can you explain why this is necessary? I'm a bit reluctant about this change for a few reasons:
|
|
@aduth @youknowriad I removed the CSS class and selector, I was recommended to try this in order that the editor keeps its selection but it seems that focussing the editor before applying/removing formatting fixes this anyway. Have also moved the |
|
@youknowriad I tried removing the |
Fixes #2080
Changed the Toolbar to only create a link when the URL has been entered, instead of creating the link up front and then setting the URL.
I needed to lift the state for the link functionality from
FormatToolbartoEditableas this needs to be reset fromonNodeChange. This allowedFormatToolbarto be simplified a lot as we don't have to guess what has happened incomponentWillReceiveProps.A remaining issue is that when typing into
UrlInput, the cursor position is reset to the end if typing in the middle. This is caused by theupdateSuggestionsfunction which does an api call and sets the state causing a re-render. I believe that moving this to a separate component will fix the issue. (Using the separate component's render cycle instead of re-rendering the input which is confusing react as to where the cursor should be)Fixes #1069 (I put this in the same PR as its right in the same area)
Added CSS class and custom selector to TinyMCE so when the Toolbar is used, it doesn't loose focus. Also before applying formatting, focus the TinyMCE instance. This meant that the bookmark was no longer needed in state.