Undo redo in Vue Block Editor component

28 Jun 20256 minutes to read

The undo/redo feature in Block Editor enables users to revert or reapply changes made to the content, offering a safety net for edits and enhancing the overall editing experience.

Keyboard shortcuts

Action Windows Mac Description
Undo Ctrl + Z ⌘ + Z Reverts the last action.
Redo Ctrl + Y ⌘ + Y Reapplies the last undone action.

Configuring Undo/Redo stack

Block Editor allows up to 30 Undo/Redo actions by default. You can modify the number of undo/redo steps using the undoRedoStack property.

<template>
  <div id='container'>
    <ejs-blockeditor :blocks="blocksData" :undoRedoStack="20"></ejs-blockeditor>
  </div>
</template>

<script setup>
import { BlockEditorComponent as EjsBlockeditor  } from "@syncfusion/ej2-vue-blockeditor";

const blocksData = [
    {
        id: 'block-1',
        type: 'Heading1',
        content: [
            {
                type: ContentType.Text,
                content: 'Sample Heading'
            }
        ]
    },
    {
        id: 'block-2',
        type: 'Paragraph',
        content: [
            {
                type: ContentType.Text,
                content: 'This is a sample paragraph block.'
            }
        ]
    },
    {
        id: 'block-3',
        type: 'Paragraph'
    }
];

</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/fluent2.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/fluent2.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/fluent2.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/fluent2.css";
@import "../node_modules/@syncfusion/ej2-interactive-chat/styles/fluent2.css";
@import "../node_modules/@syncfusion/ej2-blockeditor/styles/fluent2.css";
</style>
<template>
  <div id='container'>
    <ejs-blockeditor :blocks="blocksData" :undoRedoStack="20"></ejs-blockeditor>
  </div>
</template>

<script>
import { BlockEditorComponent, ContentType } from "@syncfusion/ej2-vue-blockeditor";

export default {
  components: {
    'ejs-blockeditor': BlockEditorComponent,
  },
  data() {
    return {
      blocksData: [
          {
              id: 'block-1',
              type: 'Heading1',
              content: [
                  {
                      type: ContentType.Text,
                      content: 'Sample Heading'
                  }
              ]
          },
          {
              id: 'block-2',
              type: 'Paragraph',
              content: [
                  {
                      type: ContentType.Text,
                      content: 'This is a sample paragraph block.'
                  }
              ]
          },
          {
              id: 'block-3',
              type: 'Paragraph'
          }
      ]
    };
  },
  methods: {
    
  }
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
</style>