Indent

This is the Indent extension. It allows you to increase or decrease the indentation of text blocks like paragraphs and headings.

Default Usage

Default usage of the indent extension with both increase and decrease indent buttons.

Vue

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

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

  const editor = new Editor({
    content:
      '<p>Click on this paragraph and use the indent buttons to adjust indentation.</p>',
    extensions: [Indent, RequiredExtensions.configure({})],
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
  })
</script>

With Headings and Paragraphs

Indent works with both headings and paragraphs.

Vue

<template>
  <HLTextEditor :editor="editor">
    <template #header>
      <RTEControlIndent :editor="editor" />
    </template>
  </HLTextEditor>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import {
    RequiredExtensions,
    Editor,
    HLTextEditor,
    RTEControlIndent,
    Indent,
  } from '@platform-ui/rte'

  const editor = new Editor({
    content:
      '<h1>Heading 1</h1><h2>Heading 2</h2><p>Paragraph text</p><p>Another paragraph</p>',
    extensions: [Indent, RequiredExtensions.configure({})],
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
  })
</script>

Commands

// Increase indent
editor?.commands.increaseIndent()

// Decrease indent (outdent)
editor?.commands.decreaseIndent()

Props

Prop	Type	Default	Description
editor*	Editor	-	The editor instance
type	'indent' | 'outdent'	'indent'	The type of indent control
indentTooltipLabel	string	undefined	Custom tooltip label for indent button
outdentTooltipLabel	string	undefined	Custom tooltip label for outdent button
tooltipPosition	Placement	'top'	The position of the tooltip
language	Language	'en-US'	The language for localization
ariaLabel	string	null	Accessibility label

Notes

The RTEControlIndent component renders both increase and decrease indent buttons together. The component automatically:

• Detects the current indent level and disables buttons at min/max limits
• Disables indent controls for incompatible element types
• Preserves font family when switching between different text blocks
• Supports indent values from 40px to 960px in increments