Blockquote

This is the Blockquote extension. It allows you to make text a blockquote.

Usage

Default usage of the blockquote extension and its control button.

Blockquote

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

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

const editor = new Editor({
  content: 'Refer to Notes on how to use it Better',
  extensions: [Blockquote, RequiredExtensions.configure({})],
  onUpdate({ editor }) {
    content.value = editor.getText()
    HTML.value = editor.getHTML()
  },
})
</script>

Commands

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

Imports

import {
  RequiredExtensions,
  Editor,
  HLTextEditor,
  RTEControlBlockQuote,
  Blockquote,
} from '@platform-ui/rte'

Props

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

Slots

Slot	Description	Default
icon	The icon to display	MaterialFormatQuoteFillIcon