Line Height

This is the Line Height extension. It allows you to adjust the line spacing (line height) of text blocks like paragraphs, headings, blockquotes, and list items.

Default Usage

Default usage of the line height extension with standard spacing options (1, 1.15, 1.5, 2).

Vue

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

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

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

Custom Line Height Options

You can provide custom line height options to match your design requirements.

Vue

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

  const customLineHeightOptions = [
    { label: '1.0', key: '1' },
    { label: '1.15', key: '1.15' },
    { label: '1.5', key: '1.5' },
    { label: '2.0', key: '2' },
    { label: '2.5', key: '2.5' },
    { label: '3.0', key: '3' },
  ]

  const editor = new Editor({
    content: '<p>Custom line height options example</p>',
    extensions: [LineHeight, RequiredExtensions.configure({})],
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
  })
</script>

Commands

// Set line height
editor?.chain().focus().setLineHeight('1.5').run()

// Reset to inherit
editor?.chain().focus().setLineHeight('inherit').run()

Imports

import {
  RequiredExtensions,
  Editor,
  HLTextEditor,
  RTEControlLineHeight,
  LineHeight,
} from '@platform-ui/rte'

Props

Prop	Type	Default	Description
editor *	Editor	-	The editor instance
lineHeightOptions	Array<{label: string, key: string}>	undefined	Custom line height options
tooltipLabel	string	-	Custom tooltip label
language	Language	'en-US'	The language for localization
to	string | HTMLElement	undefined	Target element for dropdown portal
ariaLabel	string	null	Accessibility label

Default Line Height Options

When no custom options are provided, the following default options are available:

• 1 - Single spacing
• 1.15 - Tight spacing
• 1.5 - Default spacing (standard)
• 2 - Double spacing

Slots

Slot	Description	Default
icon	The icon to display	MaterialFormatLineSpacingIcon