Clear Format

This is the Clear Format (Reset Styles) control. It allows you to remove all formatting from selected text or the entire document.

Clear Selected Format

Clear formatting from selected text only (default behavior).

Vue

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

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

  const editor = new Editor({
    content:
      '<p><strong>Bold text</strong>, <em>italic text</em>, and <u>underlined text</u>. Select text and click the clear format button.</p>',
    extensions: [History, AllExtensions.configure({})],
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
  })
</script>

Clear Document Format

Clear formatting from the entire document.

Vue

<template>
  <HLTextEditor :editor="editor">
    <template #header>
      <RTEControlHistory :editor="editor" type="undo" />
      <RTEControlHistory :editor="editor" type="redo" />
      <RTEControlToolbarSeparator />
      <RTEControlBold :editor="editor" />
      <RTEControlItalic :editor="editor" />
      <RTEControlUnderline :editor="editor" />
      <RTEControlToolbarSeparator />
      <RTEControlResetStyles :editor="editor" reset="document" />
    </template>
  </HLTextEditor>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import {
    AllExtensions,
    Editor,
    HLTextEditor,
    RTEControlResetStyles,
    RTEControlBold,
    RTEControlItalic,
    RTEControlUnderline,
    RTEControlHistory,
    RTEControlToolbarSeparator,
    History,
  } from '@platform-ui/rte'

  const editor = new Editor({
    content:
      '<p style="text-align: center;"><strong>Bold centered text</strong>, <em>italic text</em>, and <u>underlined text</u>.</p>',
    extensions: [History, AllExtensions.configure({})],
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
  })
</script>

Commands

// Clear formatting from selected text
editor?.chain().focus().unsetAllMarks().run()

// Also reset text alignment
editor?.chain().focus().unsetAllMarks().unsetTextAlign().run()

// Also reset indent
editor?.chain().focus().unsetAllMarks().unsetTextAlign().resetIndent().run()

// Clear formatting from entire document
editor?.commands.selectAll()
editor?.chain().focus().unsetAllMarks().unsetTextAlign().resetIndent().run()
editor?.commands.blur()

Props

Prop	Type	Default	Description
editor *	Editor	-	The editor instance
reset	'document' | 'selected'	'selected'	Whether to clear selected text or entire doc
tooltipLabel	string	-	The tooltip label
tooltipPosition	Placement	'top'	The tooltip position
language	Language	'en-US'	The language for localization

Notes

• This is a destructive operation that cannot be undone except via the undo command
• Block-level elements (headings, paragraphs) are preserved
• Links and embedded content (images, videos) are not affected
• The operation maintains the document structure while removing styling
• Use the 'selected' mode for precise formatting removal
• Use the 'document' mode for quick document-wide style reset