Inline Code

This is the Inline Code extension. It allows you to format text as inline code (monospace font within text).

Usage

Default usage of the inline code extension and its control button.

Inline Code

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

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

const editor = new Editor({
  content: 'Select text and click the code button to format it as inline code',
  extensions: [InlineCode, RequiredExtensions.configure({})],
  onUpdate({ editor }) {
    content.value = editor.getText()
    HTML.value = editor.getHTML()
  },
})
</script>

Commands

// Toggle inline code
editor?.chain().focus().toggleInlineCode().run()

Imports

import {
  RequiredExtensions,
  Editor,
  HLTextEditor,
  RTEControlCode,
  InlineCode,
} from '@platform-ui/rte'

Props

Prop	Type	Default	Description
editor *	Editor	-	The editor instance
type	'inline' | 'block'	'inline'	The type of code formatting
tooltipLabel	string	Code	The tooltip label
tooltipPosition	Placement	'top'	The tooltip position
language	Language	'en-US'	The language
ariaLabel	string	null	The aria label

Slots

Slot	Description	Default
icon	The icon to display	Code02Icon

Notes

• Inline code is rendered using the <code> HTML tag
• It applies monospace font styling to the selected text