Skip to content
This repository has been archived by the owner on Feb 6, 2023. It is now read-only.

Fix getting started link #1

Closed
lnmunhoz opened this issue Feb 22, 2016 · 2 comments
Closed

Fix getting started link #1

lnmunhoz opened this issue Feb 22, 2016 · 2 comments

Comments

@lnmunhoz
Copy link

The "Learn how to use Draft.js in your own project." link is broken.

@zpao
Copy link
Contributor

zpao commented Feb 22, 2016

Thanks for the heads up!

@zpao zpao closed this as completed Feb 22, 2016
facebook-github-bot pushed a commit that referenced this issue Aug 17, 2017
Summary:
bypass-lint
ignore-conflict-markers
ignore-signed-source
ignore-nocommit

Reviewed By: avikchaudhuri

fbshipit-source-id: 7aec3d925c8b0c4d9b45c372d99ab67179ad2ece
facebook-github-bot pushed a commit that referenced this issue Feb 16, 2018
Summary:
**tldr;** Handlers can get called after cWU and before cDU, and they use the
cached 'latestEditorState'. For them to get the fresh version of the state,
we need to update 'latestEditorState' in 'render' because that happens before
the handlers get called.

**The whole story;**
We are trying to remove cWU from `DraftEditor.react.js`. One thing which
currently happens there is that `latestEditorState` gets set to the
nextProps.editorState, so whatever is passed in by the parent. For more context
on the initial attempt at changing this, see
https://our.intern.facebook.com/intern/diff/D6873303/

This change introduced one bug that manifested in various ways - see T26034821
and T26020049. I'll focus on T26020049, which broke
`<AdsBulkTokenizedTextInputWithFieldsSelector>`.

`<AdsBulkTok...FieldsSelection>` has a button for adding a new token, and when
you hit that button it passes `<DraftEditor>` an updated editorState as a prop.
This triggers render #1, and during that render we update the browser
selection, which triggers `focus` and `blur` events. These each trigger another
render of `<DraftEditor>`; renders #2 and #3. Here is how it looks on a
timeline:
```
render #1
+
|
| cWU -> latestEditorState = FRESH_STATE
|
| render -> this.props.editorState = FRESH_STATE
| +
| |
| +--> triggers 'focus' event, calling 'handleFocus' with latestEditorState
|                   +
|                   |
+>cDU fires         | the 'handleFocus' call schedules render #2
                    | with latestEditorState, which is FRESH_STATE
                    |
render #2  <--------+
+
|
| cWU -> latestEditorState = FRESH_STATE
|
| render -> this.props.editorState = FRESH_STATE
|
+>cDU fires
```
When we move the update of latestEditorState to cDM, things go awry like this;
```
render #1
+
|
| cWU -> Nothing ... latestEditorState = STALE_STATE :(
|
| render -> this.props.editorState = FRESH_STATE
| +
| |
| +--> triggers 'focus' event, calling 'handleFocus' with latestEditorState
|                                                +
|                                                |
+>cDU -> latestEditorState = FRESH_STATE         | the 'handleFocus' call schedules render #2
                                                 | with latestEditorState, which is STALE_STATE :(
                                                 |
render #2 <--------------------------------------+
+
|
| cWU -> nothing updates
|
| render -> this.props.editorState = STALE_STATE :(  because this was passed in above
|
+>cDU fires and resets latestEditorState = STALE_STATE :(
```

So we can fix things by updating latestEditorState inside the `render` method,
like so;
```
render #1
+
|
| cWU -> Nothing ... latestEditorState = STALE_STATE :(
|
| render -> this.props.editorState = FRESH_STATE
| +         *and* set latestEditorState = FRESH_STATE
  |
| |
| +--> triggers 'focus' event, calling 'handleFocus' with latestEditorState
|                                                +
|                                                |
+>cDU -> latestEditorState = FRESH_STATE         | the 'handleFocus' call schedules render #2
                                                 | with latestEditorState, which is FRESH_STATE
                                                 |
render #2 <--------------------------------------+
+
|
| cWU -> nothing updates
|
| render -> this.props.editorState = FRESH_STATE which was passed in above
|
+>cDU fires and resets latestEditorState = FRESH_STATE
```

One possible issue would be if `render` fired and then was never completed, in
async. mode, but since Draft is intended to always be run in sync. mode I'm not
worried about that.

Reviewed By: mitermayer

Differential Revision: D6994261

fbshipit-source-id: 80986b853a57f64aa5aafbe667b4d94171d5271c
@nonoesp
Copy link

nonoesp commented Aug 20, 2018

This link is broken again — thought of commenting here instead of creating a new issue.

burdell pushed a commit to gather/draft-js that referenced this issue Aug 27, 2018
notherno referenced this issue in pixiv/draft-js Oct 25, 2018
* Add state for editor to restore partial blocks

* Partially update block with focus

* Update all blocks in selection

* Add console.log to debug

* Use Array.from()

* Fix condition for invariant

* Update single block, otherwise whole contents

* Remove console.log

* Remove invariant

* Pass options to update editorState

* Inverse condition and add comment

* Add comments and use default editorState
pablopunk pushed a commit to superdesk/draft-js that referenced this issue Sep 17, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants