Text Pattern Highlight

This is the Text Pattern Highlight extension. It allows you to highlight text with a color highlighter.

Usage

You can use the ColorHighlighter extension to highlight text with a color highlighter.

Vue

<template>
  <HLTextEditor :editor="editor">
    <template #header>
      <RTEControlHistory :editor="editor" type="undo" />
      <RTEControlHistory :editor="editor" type="redo" />
      <RTEControlToolbarSeparator />
      <RTEControlBold :editor="editor" />
      <RTEControlItalic :editor="editor" />
      <RTEControlUnderline :editor="editor" />
    </template>
    <template #footer>
      <div>Footer</div>
    </template>
  </HLTextEditor>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import {
    AllExtensions,
    Editor,
    HLTextEditor,
    RTEControlHistory,
    RTEControlBold,
    RTEControlItalic,
    RTEControlUnderline,
    RTEControlToolbarSeparator,
    History,
    ColorHighlighter,
  } from '@platform-ui/rte'

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

  const editor = new Editor({
    content:
      '<p>Put double curly braces around text to highlight it with color highlighter</p>',
    extensions: [
      History,
      AllExtensions.configure({}),
      ColorHighlighter.configure({
        color: 'red',
        className: 'color-highlighter',
        pattern: /\{\{(.*?)\}\}/g,
      }),
    ],
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
  })
</script>

Options

Option	Type	Default	Description
color	string	'lightblue'	The color of the highlighted text
className	string	'pattern-highlight'	The class name of the highlighted text
pattern	RegExp	/\{\{([^{}]+)\}\}/g	The pattern to match the text to highlight