Please Explain how to set/test a blank state

[thepian]

How do I set state to blank?

How do I test if the state is blank?

[Rebulus]

As I see in this comment, it is const emptyState = Plain.deserialize(''). I hope this helps you 😊
But, maybe, it is good point to clarify the empty state.

[thepian]

I think it would be really helpful to document as I for one spent several hours trying to figure this out. Now that you give me the example I feel dumb for not thinking of it, but when you're learning the mind plays a lot of tricks on you. My solution to illustrate was much more involved...

        return Raw.deserialize({
            nodes: [
                {
                    kind: 'block',
                    type: 'paragraph',
                    nodes: [
                        { kind: 'text', text: '' },
                    ]
                },
            ]
        }, {terse: true});

Does the terse flag apply for the Plain serialiser ?

[oyeanuj]

@thepian

Does the terse flag apply for the Plain serialiser ?

Nope, only for Raw.

@ianstormtaylor What is the recommended way to initialize or set an empty state using Raw?

[ianstormtaylor]

@oyeanuj the code sample @thepian has above would be how you'd do it, depending on what your "default" block is for your editor.

Open to PRs that make the docs easier to find this info!

[thepian]

Actually I find a potential bug relating to this. My current state constructor function uses the Plain serialiser to create a blank value.

    makeState(value) {
        if (value) {
            return Raw.deserialize(value || { nodes: [] }, { terse: true });
        }

        return Plain.deserialize('', { terse: true });
    }

When I added line as a block type I could no longer provoke blank content, so the placeholder never shows up. The line type seems to be hardcoded. I think that the blank state needs to be special, or an isBlank function needs to be a configuration point.

[mxstbr]

Running into the same issue as @thepian at the moment, seems like adding a line block type breaks the placeholder. 😕

[PierBover]

In case anyone stumbles here from Google this worked for me:

import Plain from 'slate-plain-serializer';
const emptyState = Plain.deserialize('');

[DominikSerafin]

The line issue seems to be fixed now (I'm on Slate 0.44.x).

And for people that would like to avoid additional dependency, the Plain.deserialize('') is equivalent to Value.create(emptyValue) or Value.fromJSON(emptyValue), where emptyValue is as below:

var emptyValue = {
  'document': {
    'nodes': [
      {
        'object': 'block',
        'type': 'line',
        'nodes': [
          {
            'object': 'text',
            'leaves': [
              {
                'text': ''
              },
            ]
          }
        ]
      },
    ]
  }
}

---

[davidwieler]

Update to @DominikSerafin's answer;
As of slate@0.46, the leaves property of Text nodes has been removed, so his emptyValue will fire a depreciation warning in the console.

I use:

const emptyValue = {
    document: {
        nodes: [
            {
                object: 'block',
                type: 'paragraph',
                nodes: [
                    {
                        object: 'text',
                        text: ''
                    }
                ]
            }
        ]
    }
}

Feel free to change the type from paragraph to text if you don't want to start off with a <p> tag.

[10thfloor]

Is there an example of code anywhere that demonstrates clearly how to clear the editor?
I can't find one, and the above code does not work.

[hanselke]

Hi,

so i was looking for a way to clear the editor when a button was pressed.

solution was

const blankSlateValue = [{ type:"paragraph", children: [{ text:"" }] }] setValue(blankSlateValue)

this uses the default setValue method in the slatejs example

[uriva]

didn't work for me, got

Uncaught Error: Cannot resolve a DOM point from Slate point: {"path":[0,0],"offset":5}

[uriva]

this worked:

event.preventDefault();
Transforms.select(editor, Editor.start(editor, []));
setValue([
  {
    type: "paragraph",
    children: [{ text: "" }],
  },
]);

[Deliaz]

The only way it works for me:

const point = { path [0, 0], offset: 0 };
editor.selection = { anchor: point, focus: point }; // clean up selection
editor.history = { redos: [], undos: [] }; // clean up history
setEditorValue([{ type:"paragraph", children: [{ text:"" }] }]); // reset to empty state

From this article