Clear the content of the editor

Sometimes you want to programmatically remove all content from the editor in order to start from a blank editor.

The first thing to do is to get a reference to the Editor. This is explained on Get Editor reference.

This example will create a ClearButton that clears the content of the Editor. We will assume that you chose to get the reference to the Editor via the getEditor API.

<script lang="ts">
  import { getEditor } from 'svelte-lexical';
  const editor = getEditor();
</script>

<button>
  Clear the content
</button>

Now we want to call a function that will clear the content when the button is clicked. For this, we need to add an onclick listener on the button and then use the editor.update(..) API to give lexical a callback that it will call in a next update cycle to update the state of the editor.

<script lang="ts">
        import { getEditor } from 'svelte-lexical';
        const editor = getEditor();
        function clearContent() {
          // code to be added here
        }
</script>

<button>
<button on:click={() => editor.update(clearContent)}>
        Clear the content
</button>

When editor.update(..) is called, the given callback has to build a new editor state and for this, we need to use the corresponding APIs. In order to clear the content, one way is to call .clear() on the RootNode of the content. So we need to first add a method that will give us access to the root node :

<script lang="ts">
        import { getEditor } from 'svelte-lexical';
        import { getEditor, $getRoot as getRoot } from 'svelte-lexical';
        const editor = getEditor();
        function clearContent() {
          // code to be added here
        }
</script>

<button on:click={() => editor.update(clearContent)}>
        Clear the content
</button>

Next, in order to finalize the ClearButton component, we have to fill the clearContent method with the necessary call to root.clear().

<script lang="ts">
        import { getEditor, $getRoot as getRoot } from 'svelte-lexical';
        const editor = getEditor();
        function clearContent() {
          // code to be added here
          const root = getRoot();
          root.clear();
        }
</script>

<button on:click={() => editor.update(clearContent)}>
        Clear the content
</button>

The ClearButton is now in its final state. Let’s add the button to MyEditor.svelte

<script lang="ts">
  import {
    Composer, ContentEditable, getEditor,
    HorizontalRuleNode, HorizontalRulePlugin, RichTextPlugin
  } from 'svelte-lexical';
  import { theme } from 'svelte-lexical/dist/themes/default';
  import MyToolbar from './MyToolbar.svelte';
  import ClearButton from './ClearButton.svelte';

  const initialConfig = {
    theme: theme,
    namespace: 'pg_demo',
    nodes: [HorizontalRuleNode],
    onError: (error: Error) => {
      throw error;
    }
  };
</script>

<Composer {initialConfig}>
  <div class="editor-shell svelte-lexical">
    <MyToolbar />
    <ClearButton/>
    <div class="editor-container">
      <div class="editor-scroller">
        <div class="editor">
          <ContentEditable />
        </div>
      </div>
      <RichTextPlugin />
      <HorizontalRulePlugin />
    </div>
  </div>
</Composer>

As a pure educational scenario, and in order to show you that there is a lot more than .clear() in the lexical/svelte-lexical API, here is another version of the ClearButton: instead of calling .clear(), we select all the nodes under the root node of the Editor - just like a user would select all the text inside the editor - and then remove the selection.

Here is the modified version of the ClearButton button :

<script lang="ts">
        import { getEditor, $getRoot as getRoot } from 'svelte-lexical';
        const editor = getEditor();
        function clearContent() {
          const root = getRoot();
          root.clear();
          const selection = root.select(0, root.getChildrenSize());
          selection.removeText();
        }
</script>

<button on:click={() => editor.update(clearContent)}>
        Clear the content
</button>

If you are interested in the available APIs on the root node, you can check

the available methods on the RootNote class in the lexical API (Lexical RootNode API)
and since RootNode inherits from ElementNode, the available methods on the ElementNote class in the lexical API (Lexical ElementNode API)

For information, the .clear() method that we used earlier is defined by the ElementNode class.