Review or Edit in CodeSandbox

Open the branch inWeb Editor •VS Code •Insiders

OpenPreview

🦋 Changeset detected

Latest commit:e4291ad

The changes in this PR will be included in the next version bump.

Not sure what this means?Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

The latest updates on your projects. Learn more aboutVercel for Git ↗︎

Can't we useuseEditorSelector instead of overridingapply?

Can't we useuseEditorSelector instead of overridingapply?

If i understand correctly, we could only select props from the editor object, and trigger re-renders, whenever any node value or the editors selection changed, when usinguseEditorSelector.

My version is more fine grained, it will only react to node operations, not to text operations, nor to selection operations. Also it will react faster, immediately after and operation was applied, it doesn't wait for operations to be flushed to theonChange event. It also makes use of the PathRef feature, which belongs to the slate core and should be really performant.

But after this has been said, i am not too familiar yet with theuseEditorSelector capabilities yet. Maybe there would be a way of reaching similar performance? But as far as i saw, it can only react toonChange, 'onValueChange,onSelectionChangeand to changes of props of theeditor` object.

What could be quite nice, would actually be something like that:

import{useEffect,useMemo,useState}from'react';import{Editor,typeNode}from'slate';import{ReactEditor,useSlateStatic}from'slate-react';exportconstuseNodePath=(node:Node)=>{consteditor=useSlateStatic();const[,setCacheKey]=useState(0);constpathRef=useMemo(()=>{constpath=ReactEditor.findPath(editor,node);if(path){returnEditor.pathRef(editor,path,{affinity:'backward',onChange:()=>{setCacheKey((prev)=>prev+1);},});}return{current:null,unref:()=>{},};// eslint-disable-next-line react-hooks/exhaustive-deps},[node]);useEffect(()=>()=>{pathRef.unref();},[pathRef],);returnpathRef.current;};

Of course the change handler on pathRefs would have to be implemented by slate-react.

Actually the hook could go into that package then. Or we could even think about a hook calledusePathRef.

What do you think about that@zbeyens ?

Something like that:ianstormtaylor/slate#5930

Yes that's better. I'm working on the onNodeChange prop right now.

I get the feeling, that using the following might be sufficient 😅

constkey=editor.api.findKey(element);const{ path, selection}=useEditorSelector((editor)=>({path:editor.api.findPath(element),selection:editor.selection,}),[key],{equalityFn:(a,b)=>{constisPathEqual=a.path&&b.path ?PathApi.equals(a.path,b.path) :a.path===b.path;constisSelectionEqual=a.selection&&b.selection                    ?RangeApi.equals(a.selection,b.selection)                    :a.selection===b.selection;returnisPathEqual&&isSelectionEqual;},},);

Perhaps we could add more parameters likeoperations (notoperation, sinceonChange can be called after many operations) touseEditorSelector so this could be optimized to a subset of operations. This needs to be patched first thoughianstormtaylor/slate#5863 (comment)

Perhaps we could add more parameters likeoperations (notoperation, sinceonChange can be called after many operations) touseEditorSelector so this could be optimized to a subset of operations. This needs to be patched first thoughianstormtaylor/slate#5863 (comment)

Couldn't we just useeditor.operations for that?

Yes if that's synced