History

This is the History extension. It allows you to undo and redo changes in the editor with support for keyboard shortcuts.

Usage

The history control provides both undo and redo buttons for navigating through document changes.

Vue

<template>
  <HLTextEditor :editor="editor">
    <template #header>
      <RTEControlHistory :editor="editor" type="undo" />
      <RTEControlHistory :editor="editor" type="redo" />
    </template>
    <template #footer>
      <div>Footer</div>
    </template>
  </HLTextEditor>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import {
    RequiredExtensions,
    Editor,
    HLTextEditor,
    RTEControlHistory,
    History,
  } from '@platform-ui/rte'

  const content = ref()
  const HTML = ref()

  const editor = new Editor({
    content:
      '<p>Make some changes to this text and use the undo/redo buttons</p>',
    extensions: [History, RequiredExtensions.configure({})],
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
  })
</script>

Commands

// Undo last change
editor?.commands.undo()

// Redo last undone change
editor?.commands.redo()

// Check if undo is available
editor?.can().undo()

// Check if redo is available
editor?.can().redo()

Imports

import {
  RequiredExtensions,
  Editor,
  HLTextEditor,
  RTEControlHistory,
  History,
} from '@platform-ui/rte'

History Extension

depth

The amount of history events that are collected before the oldest events are discarded. Defaults to 100.

Default: 100

newGroupDelay

The delay between changes after which a new group should be started (in milliseconds). When changes aren’t adjacent, a new group is always started.

Default: 500

History.configure({
  depth: 10,
  newGroupDelay: 1000,
})

Props

Prop	Type	Default	Description
editor *	Editor	-	The editor instance
type *	'undo' | 'redo'	'undo'	The type of history action
tooltipLabel	string	-	The tooltip label
tooltipPosition	Placement	'top'	The tooltip position
language	Language	'en-US'	The language for localization

Slots

Slot	Description	Default
icon	The icon to display	UndoIcon or RedoIcon