Superscript

This is the Superscript extension. It allows you to format text as superscript (text that appears slightly above the normal line).

Usage

Default usage of the superscript extension and its control button.

Superscript

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

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

const editor = new Editor({
  content:
    'Select text and click the superscript button. Great for exponents like x<sup>2</sup> or ordinal numbers like 1<sup>st</sup>',
  extensions: [Superscript, RequiredExtensions.configure({})],
  onUpdate({ editor }) {
    content.value = editor.getText()
    HTML.value = editor.getHTML()
  },
})
</script>

Imports

import {
  RequiredExtensions,
  Editor,
  HLTextEditor,
  RTEControlSuperscript,
  Superscript,
} from '@platform-ui/rte'

Commands

// Toggle superscript
editor?.chain().focus().toggleSuperscript().run()

// Set superscript
editor?.commands.setSuperscript()

// Unset superscript
editor?.commands.unsetSuperscript()

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	Superscript	The aria label

Slots

Slot	Description	Default
icon	The icon to display	MaterialSuperscriptIcon