Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

useDecorate return default method,not the override in custom in some case #4277

Closed
liangxiwei opened this issue May 21, 2021 · 8 comments · Fixed by #4394 or #4421
Closed

useDecorate return default method,not the override in custom in some case #4277

liangxiwei opened this issue May 21, 2021 · 8 comments · Fixed by #4394 or #4421
Labels

Comments

@liangxiwei
Copy link
Contributor

Description
user can add decorate method on Editable,and it's not work with editor's children because it will use default.

Recording
you can add console.log in use-decorate.ts like this:
export const DecorateContext = createContext<(entry: NodeEntry) => Range[]>( () => { console.log("editor's children call.") return [] } )

Sandbox
no
Steps
no
Expectation
no
Environment

  • Slate Version: [e.g. 0.63]

Context
not need

@liangxiwei liangxiwei added the bug label May 21, 2021
@liangxiwei liangxiwei changed the title useDecorate return default method,not the override in sourcecoude useDecorate return default method,not the override in custom in some case May 21, 2021
@ulion
Copy link
Contributor

ulion commented Jun 5, 2021

I think #4152 removed Children component which caused the editor's children using incorrect decorate function.
useDecorate was fine with Children component which prevent unnecessary re-render of Elements when only the decorate method changed.
But now without Children component, indeed all Elements' and old Children's related code got re-run/render when decorate function updated anyway. performance get worse anyway.

@liangxiwei
Copy link
Contributor Author

component

yes,u r right

@jaked
Copy link
Contributor

jaked commented Jul 24, 2021

I think this happens because in Editable, the useChildren method is called before DecorateContext.Provider is rendered, so the useDecorate call sees the default value of the context.

A simple fix would be to add a component wrapper in Editable (so useChildren is called inside the render of DecorateContext.Provider).

@ulion
Copy link
Contributor

ulion commented Jul 24, 2021

not really meaningful, since without Children component, useDecorate is indeed useless than before (directly pass the decorate func down to Element). on the other side, changing decorate function is not such a good idea in some cases, it is still too expensive because it almost re-renders all, but in some cases (e.g. remote caret) we do only want a few specific elements got re-rendered.

@jaked
Copy link
Contributor

jaked commented Jul 24, 2021

OK, my suggestion was just to address the regression (decorate is not called on all nodes in the document) in a simple way. I don't think this change had the desired effect; useChildren still runs before DecorateContext.Provider is rendered. To avoid the problem, useChildren needs to be called in the render of a component contained in DecorateContext.Provider.

It sounds like maybe you want to revert the context change? That would of course fix the problem also.

@ulion
Copy link
Contributor

ulion commented Jul 25, 2021 via email

@jaked
Copy link
Contributor

jaked commented Jul 25, 2021

Thanks for the explanations!

@jaked
Copy link
Contributor

jaked commented Jul 26, 2021

Another possible fix would be to change useChildren so it wraps each child in a Child component, and call useDecorate etc. inside this component. This would still achieve the goal of #3966 since a separate component would be returned for each child; but useDecorate would be called at the right time.

As far as re-rendering goes, it seem like this approach would be the same as the original Children component.

dylans added a commit that referenced this issue Aug 10, 2021
…4421)

* fix #4394 without adding extra layers of render tree

* oops unused import

* Add changeset

Co-authored-by: Dylan Schiemann <dylan@dojotoolkit.org>
This was referenced Aug 10, 2021
dylans added a commit to dylans/slate that referenced this issue Sep 13, 2021
… render tree (ianstormtaylor#4421)

* fix ianstormtaylor#4394 without adding extra layers of render tree

* oops unused import

* Add changeset

Co-authored-by: Dylan Schiemann <dylan@dojotoolkit.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
3 participants