Text Alignment

This is the Text Alignment extension. It allows you to align text to the left, center, right, or justify.

Default Usage

Default usage showing all four text alignment options: left, center, right, and justify.

Vue

<template>
  <HLTextEditor :editor="editor">
    <template #header>
      <RTEControlTextAlignment :editor="editor" align="left" />
      <RTEControlTextAlignment :editor="editor" align="center" />
      <RTEControlTextAlignment :editor="editor" align="right" />
      <RTEControlTextAlignment :editor="editor" align="justify" />
    </template>
    <template #footer>
      <div>Footer</div>
    </template>
  </HLTextEditor>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import {
    RequiredExtensions,
    Editor,
    HLTextEditor,
    TextAlign,
    Heading,
    RTEControlTextAlignment,
  } from '@platform-ui/rte'

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

  const editor = new Editor({
    content:
      '<p>This is left aligned text (default)</p><p>Click on a paragraph and use alignment buttons</p>',
    extensions: [TextAlign, Heading, RequiredExtensions.configure({})],
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
  })
</script>

Works with Headings and Paragraphs

Text alignment works with both headings and paragraphs.

Vue

<template>
  <HLTextEditor :editor="editor">
    <template #header>
      <RTEControlTextAlignment :editor="editor" align="left" />
      <RTEControlTextAlignment :editor="editor" align="center" />
      <RTEControlTextAlignment :editor="editor" align="right" />
      <RTEControlTextAlignment :editor="editor" align="justify" />
    </template>
  </HLTextEditor>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import {
    RequiredExtensions,
    Editor,
    HLTextEditor,
    RTEControlTextAlignment,
    TextAlign,
    Heading,
  } from '@platform-ui/rte'

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

Imports

import {
  RequiredExtensions,
  Editor,
  HLTextEditor,
  RTEControlTextAlignment,
  TextAlign,
  Heading,
} from '@platform-ui/rte'

Commands

// Set text alignment
editor?.chain().focus().setTextAlign('left').run()
editor?.chain().focus().setTextAlign('center').run()
editor?.chain().focus().setTextAlign('right').run()
editor?.chain().focus().setTextAlign('justify').run()

// Unset text alignment (reset to default)
editor?.chain().focus().unsetTextAlign().run()

Props

Prop	Type	Default	Description
editor *	Editor	-	The editor instance
align	'left' | 'center' | 'right' | 'justify'	'left'	The alignment type
tooltipLabel	string	left based on the alignment	Custom tooltip label
tooltipPosition	Placement	'top'	The tooltip position
language	Language	'en-US'	The language for localization
ariaLabel	string	null	Accessibility label

Icons

Each alignment type automatically displays the appropriate icon:

• Left: AlignLeftIcon
• Center: AlignCenterIcon
• Right: AlignRightIcon
• Justify: AlignJustifyIcon