Preserve Marks

Preserve marks are used to preserve the marks of the text when a new line is added. Using of preserveMarks inside onSelectionUpdate hook will help in preserving the existing marks when a new line is added.

Top

Vue

<template>
  <HLTextEditor :editor="editor">
    <template #header>
      <RTEControlHistory :editor="editor" type="undo" />
      <RTEControlHistory :editor="editor" type="redo" />
      <RTEControlToolbarSeparator />
      <RTEControlBold :editor="editor" />
      <RTEControlUnderline :editor="editor" />
    </template>
  </HLTextEditor>
</template>

TS

import { ref } from 'vue'
import {
  AllExtensions,
  Editor,
  HLTextEditor,
  RTEControlHistory,
  RTEControlToolbarSeparator,
  RTEControlBold,
  RTEControlUnderline,
} from '@platform-ui/rte'

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

const editor = new Editor({
  content: 'Refer to Notes on how to use it Better',
  extensions: [AllExtensions.configure({}), History],
  onSelectionUpdate: ({ editor }) => {
    preserveMarks(editor)
  },
  onUpdate({ editor }) {
    content.value = editor.getText()
    HTML.value = editor.getHTML()
  },
})