How to clear all text in Slate.JS editor

Question

For the life of me, I can't figure out how to clear all of the text in an Editor component from slate.js.

I have tried:

Transforms.delete(editor, {}); -> doesn't do anything

editor.deleteBackward("line"); -> only deletes one line, not all

I have also tried manually rerendering the editor component and that unfortunately doesn't update it to its initial state :(

I have been tearing through the slate js docs and can't find anything anywhere! If anyone has any ideas, would be very happy.

This is how editor is implemented:

  const editor = useMemo(() => withHistory(withReact(createEditor())), []);

 <Editable
      key={stateKey}
      onKeyDown={(event: any) => handleKeyDown(event)}
      style={{ overflowWrap: "anywhere", width: "100%" }}
      onPaste={(e) => {
        if (e.clipboardData) {
          if (e.clipboardData.files.length > 0) {
            setFiles([...files, ...Array.from(e.clipboardData.files)]);
            e.preventDefault();
          }
        }
      }}
      decorate={decorate}
      renderLeaf={renderLeaf}
      placeholder="What's happening?"
    />

rantao · Accepted Answer · 2023-02-28 00:20:41Z

7

You can mutate editor.children and set it to an "empty" value.

const editor = useMemo(() => withHistory(withReact(createEditor())), []);

editor.children = [
    {
        type: "paragraph",
        children: [{ text: "" }]
    }
];

Note: Slate needs a minimum of an array with one empty text node to render correctly.

UPDATE Feb 2023: You will also need to reset the selection and history objects within the editor.

const point = { path: [0, 0], offset: 0 }
editor.selection = { anchor: point, focus: point };
editor.history = { redos: [], undos: [] }; 
editor.children = [{
    type: "paragraph",
    children: [{ text: "" }]
}];

edited Feb 28, 2023 at 0:20

answered Oct 17, 2022 at 19:16

rantao

1,8604 gold badges17 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Steven Schwartz Over a year ago

Error: Cannot resolve a DOM point from Slate point: {"path":[0,0],"offset":15} Is what happens, any thoughts?

Mr.Grease Over a year ago

This causes a error to be thrown

Uncaught Error: Cannot find a descendant at path [0,0,0] in node: {"children":[{"type":"paragraph","children":[{"text":""}]}],"operations":[],"selection":{"anchor":{"path":[0,0,0],"offset":3},"focus":{"path":[0,0,0],"offset":3}},"marks":null}

.

rantao Over a year ago

@Mr.Grease see my latest update.

Yhom Torke Over a year ago

@rantao why is editor.selection = { anchor: point, focus: point }; necessary? This resolved inconsistent "cannot resolve dom" error that slate throws

rantao Over a year ago

@YhomTorke you want to reset all of the related data pertaining to the previous note, so you have a 'clean slate' ;) for the new note

somkid · Accepted Answer · 2023-01-08 02:03:08Z

6

You can use

   import { Transforms } from "slate";

   // useref
   const editorRef = useRef()
   if (!editorRef.current) editorRef.current = withHistory(withReact(createEditor()))
   const editor = editorRef.current

   const reset = () =>{
      // loop delete all
      editor.children.map(item => {
        Transforms.delete(editor, { at: [0] })
      })
    
      // reset init 
      editor.children = [
      {
         type: "p",
         children: [{ text: "" }]
      }];
   }

edited Jan 8, 2023 at 2:03

answered Jan 8, 2023 at 1:58

somkid

612 silver badges3 bronze badges

Collectives™ on Stack Overflow

How to clear all text in Slate.JS editor

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related