-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
The RichText __experimentalGetPropsForEditableTreePreparation API break the selection in the editor #23428
Comments
|
I've recently ran into this problem too. But in my case, the selection issue was triggered because of using the provided import { registerFormatType } from '@wordpress/rich-text';
import './style.css';
const FORMAT_NAME = 'asblocks/caret';
export const settings = {
title: 'AsBlocks caret',
tagName: 'mark',
className: 'asblocks-caret',
attributes: {
id: 'id',
className: 'class',
},
edit() {
return null;
},
__experimentalGetPropsForEditableTreePreparation(select) {
// Just this will trigger the problem, it's not even necessary to call a selector function for it to happen.
select('core/block-editor')
return {
carets: [],
};
},
__experimentalCreatePrepareEditableTree() {
return ( formats ) => {
return formats;
};
},
};
registerFormatType( FORMAT_NAME, settings ); if instead of using the provided Not sure if this makes any sense at all, I'm not that familiar with the internals of Hope this helps to track down the root issue here. Let me know if I can provide any more information or help in any other way to debug this. EDIT: I've finally had to undo this workaround, as it causes the format to not be applied consistently (I understand now that not using the provided select is causing the format to not re-render when it should) |
I've just created a pure Gutenberg example, based on one of the existing storybooks. Here are the steps to reproduce the problem:
Hope this helps. Let me know if there's anything else I can help with. Thanks! 23428.mp4 |
@msurdi I do notice a problem that I can recreate consistently. If I try to select across two paragraphs, the selection disappears when I stop the selection. If I change the code to the following, everything works again as expected:
So it seems to me that this is a excessive rererendering problem, caused by returning a new array on every call ( I think what you need to do is ensure that |
Hi @ellatrix , thanks for your help with this.
That's not the branch where I modified the example, the branch where the modified example reproducing the problem exists is this one. I think you'll need to clone this other repository as I don't have permissions to create branches in this one.
Do you mean the video on my previous comment? I've just passed the link to this issue to several people and they can watch it fine. I can send it to you or upload it in some other way if you still can't.
That might be another problem. The problem I'm describing here happens within a single paragraph, as long as it has an anchor in the middle of the selection.
I've just updated this example to just not return anything from this function (well, an empty object). The problem I describe still happens, even with a
I've tried this (by making carets a top/module level constant) and the problem is still there. As I've just mentioned above, I'm also returning |
I know, I just created one with the same example but to test in the normal setup. I think I understand the problem now. This API is just not made for returning an object with multiple select results. It's made for only a single result. I'll see what I can do to allow it. |
@msurdi Does this solve your problem? https://github.com/WordPress/gutenberg/pull/42596/files |
It does solve the problem in the storybook example I provided, so I'm pretty sure it will fix it too in the real application. I'm trying to get a custom build of this branch into our app so I can confirm 100% it does. But if these changes cause no harm and you want to merge that's good too, I'm pretty confident this solves it. Thanks a lot! |
Yes, I'm pretty confident. I wanted to add an e2e test, but it seems incredibly hard to write a test case that consistently fails in trunk. I tried to subscribe the test annotation format to the block editor store, which should cause a lot of re-renders on select, but the tests still pass. |
So the problem here was subscribing to the block editor store, which will cause the useSelect callback to run a lot (on selection) and return a new object every time for each |
I solves the problem in the example I provided, but I'm still facing the exact same issue on our real use case. But this is still making things better I think. I'll keep investigating what the problem could be and if it just something else we might be doing wrong on our application side. If I managed to get another minimal example I'll reopen the issue. Thanks again for your help. |
There's something extremely confusing to me in all of this, and it is that the problem exists only when selecting text from right to left. If you do the selection for left to right it works fine. |
@msurdi I'm pretty sure that's because |
Yes, I was just looking at this, and found out that the root issue of that unnecessary creation of new arrays (despite the memoization) was because of unnecessary changes of the I've already done a small refactor of what we return from Thanks! |
I'm using the "block-editor" package on third-party project. (asblocks)
and when I add this custom RichText format (it does nothing, it's just an empty format), I can't select text reliably anymore:
Nothing that If I remove the
__experimentalGetPropsForEditableTreePreparation
function, the text selection works properly.Screenshot of broken text selection:
cc @ellatrix
The text was updated successfully, but these errors were encountered: