Subscript

This is the Subscript extension. It allows you to format text as subscript (text that appears slightly below the normal line).

Usage

Default usage of the subscript extension and its control button.

Subscript

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

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

const editor = new Editor({
  content:
    'Select text and click the subscript button. Great for chemical formulas like H<sub>2</sub>O',
  extensions: [Subscript, RequiredExtensions.configure({})],
  onUpdate({ editor }) {
    content.value = editor.getText()
    HTML.value = editor.getHTML()
  },
})
</script>

Imports

import {
  RequiredExtensions,
  Editor,
  HLTextEditor,
  RTEControlSubscript,
  Subscript,
} from '@platform-ui/rte'

Commands

editor?.chain().focus().toggleSubscript().run()

Props

Prop	Type	Default	Description
editor *	Editor	-	The editor instance
tooltipLabel	string	-	The tooltip label
tooltipPosition	Placement	'top'	The tooltip position
language	Language	'en-US'	The language
ariaLabel	string	Subscript	The aria label

Slots

Slot	Description	Default
icon	The icon to display	MaterialSubscriptIcon