Lists

This is the List extension. It allows you to create various types of lists including bullet lists, numbered lists, and task lists.

Bullet Lists

Create unordered lists with different bullet styles: disc (default), circle, or square.

Vue

<template>
  <HLTextEditor :editor="editor">
    <template #header>
      <RTEControlList :editor="editor" listType="bulletList" />
      <RTEControlList :editor="editor" listType="circleList" />
      <RTEControlList :editor="editor" listType="squareList" />
    </template>
    <template #footer>
      <div>Footer</div>
    </template>
  </HLTextEditor>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import {
    RequiredExtensions,
    Editor,
    HLTextEditor,
    RTEControlList,
    OrderedList,
    BulletList,
    ListItem,
  } from '@platform-ui/rte'

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

  const editor = new Editor({
    content: '<p>Click any list button to create a list</p>',
    extensions: [
      OrderedList,
      BulletList,
      ListItem,
      RequiredExtensions.configure({}),
    ],
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
  })
</script>

Ordered Lists

Create numbered lists with different numbering styles.

Vue

<template>
  <HLTextEditor :editor="editor">
    <template #header>
      <RTEControlList :editor="editor" listType="orderedList" />
      <RTEControlList :editor="editor" listType="lowerAlphaList" />
      <RTEControlList :editor="editor" listType="upperAlphaList" />
      <RTEControlList :editor="editor" listType="lowerRomanList" />
      <RTEControlList :editor="editor" listType="upperRomanList" />
      <RTEControlList :editor="editor" listType="lowerGreekList" />
    </template>
  </HLTextEditor>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import {
    RequiredExtensions,
    Editor,
    HLTextEditor,
    RTEControlList,
    OrderedList,
    BulletList,
    ListItem,
  } from '@platform-ui/rte'

  const editor = new Editor({
    content: '<p>Create ordered lists with different numbering styles</p>',
    extensions: [
      OrderedList,
      BulletList,
      ListItem,
      RequiredExtensions.configure({}),
    ],
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
  })
</script>

Task Lists

Create checkbox lists for tasks and to-do items.

Vue

<template>
  <HLTextEditor :editor="editor">
    <template #header>
      <RTEControlList :editor="editor" listType="taskList" />
    </template>
  </HLTextEditor>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import {
    RequiredExtensions,
    Editor,
    HLTextEditor,
    RTEControlList,
    TaskList,
    TaskItem,
  } from '@platform-ui/rte'

  const editor = new Editor({
    content: '<p>Create task lists with checkboxes</p>',
    extensions: [
      RequiredExtensions.configure({}),
      TaskList,
      TaskItem.configure({ nested: true }),
    ],
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
  })
</script>

Commands

// Bullet Lists
editor?.chain().focus().toggleCustomBulletList({ type: 'disc' }).run()
editor?.chain().focus().toggleCustomBulletList({ type: 'circle' }).run()
editor?.chain().focus().toggleCustomBulletList({ type: 'square' }).run()

// Ordered Lists
editor?.chain().focus().toggleCustomOrderedList({ type: 'decimal' }).run()
editor?.chain().focus().toggleCustomOrderedList({ type: 'lower-alpha' }).run()
editor?.chain().focus().toggleCustomOrderedList({ type: 'upper-alpha' }).run()
editor?.chain().focus().toggleCustomOrderedList({ type: 'lower-roman' }).run()
editor?.chain().focus().toggleCustomOrderedList({ type: 'upper-roman' }).run()
editor?.chain().focus().toggleCustomOrderedList({ type: 'lower-greek' }).run()

// Task List
editor?.chain().focus().toggleTaskList().run()

Imports

import {
  RequiredExtensions,
  Editor,
  HLTextEditor,
  RTEControlList,
  OrderedList,
  BulletList,
  ListItem,
  TaskList,
  TaskItem,
} from '@platform-ui/rte'

Props

Prop	Type	Default	Description
editor *	Editor	-	The editor instance
listType	ListType	'bulletList'	The type of list
tooltipLabel	string	-	The tooltip label
tooltipPosition	Placement	'top'	The tooltip position
language	Language	'en-US'	The language for localization

List Types

The listType prop accepts the following values:

Bullet Lists

• bulletList - Standard bullet (disc) - •
• circleList - Circle bullets - ○
• squareList - Square bullets - ▪

Ordered Lists

• orderedList - Decimal numbers - 1, 2, 3
• lowerAlphaList - Lowercase letters - a, b, c
• upperAlphaList - Uppercase letters - A, B, C
• lowerRomanList - Lowercase Roman numerals - i, ii, iii
• upperRomanList - Uppercase Roman numerals - I, II, III
• lowerGreekList - Lowercase Greek letters - α, β, γ

Task Lists

• taskList - Checkbox list for tasks (Requires TaskList and TaskItem extensions)

Slots

Slot	Description	Default
icon	The icon to display	MaterialFormatListBulletedFillIcon depends on the listType