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

Multiple colors via getColor (FindPattern utility)

Use ColorHighlighter directly when you want to compute highlight colors per match.

Vue

<template>
  <HLTextEditor :editor="multipleColorsEditor">
    <template #header>
      <RTEControlHistory :editor="multipleColorsEditor" type="undo" />
      <RTEControlHistory :editor="multipleColorsEditor" type="redo" />
      <RTEControlToolbarSeparator />
      <RTEControlBold :editor="multipleColorsEditor" />
      <RTEControlItalic :editor="multipleColorsEditor" />

      <RTEControlUnderline :editor="multipleColorsEditor" />
    </template>
    <template #footer>
      <div>
        Type keywords inside double curly braces: error, warning, success
      </div>
    </template>
  </HLTextEditor>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import {
    AllExtensions,
    Editor,
    HLTextEditor,
    RTEControlHistory,
    RTEControlBold,
    RTEControlItalic,
    RTEControlUnderline,
    RTEControlToolbarSeparator,
    History,
    ColorHighlighter,
    RequiredExtensions,
  } from '@platform-ui/rte'

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

  const multipleColorsEditor = new Editor({
    content: `<p>Try {{error}} {{warning}} {{success}} and {{default}} keywords for dynamic colors.</p>`,
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
    extensions: [
      History,
      RequiredExtensions,
      ColorHighlighter.configure({
        pattern: /\{\{(.*?)\}\}/g,
        color: 'lightblue',
        className: 'color-highlighter',
        getColor: getColor,
      }),
    ],
  })
</script>

Dynamic color via getColor

Vue

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

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

  const colorMode = ref(1)
  const changeColorMode = () => {
    colorMode.value = colorMode.value === 1 ? 2 : 1
    dynamicColorEditor.value?.chain().setMeta('highlightRefresh', true).run()
  }

  const matchText = ref('')
  const colorcode = ref('')

  const colorMode = ref(1)
  const getColor1 = (matchedText: string) => {
    if( matchText.value == matchedText ){
      return colorcode.value || 'lightblue'
    } else {
      return 'lightblue'
    }
  }

  watch([matchText,colorcode], (newVal) => {
    dynamicColorEditor.value?.chain().setMeta('highlightRefresh', true).run()
  })

  const dynamicColorEditor = new Editor({
    content: `<p>Try {{error}} {{warning}} {{success}} and {{default}} keywords for dynamic colors.</p>`,
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
    extensions: [
      History,
      RequiredExtensions,
      ColorHighlighter.configure({
        pattern: /\{\{(.*?)\}\}/g,
        color: 'lightblue',
        className: 'color-highlighter',
        getColor: getColor1,
      }),
    ],
  })
</script>

FindPattern utility options

These options apply to the FindPattern helper function.

Option	Type	Required	Description
doc	Node	Yes	ProseMirror document node used for scanning matches.
pattern	RegExp	Yes	Pattern used to find text ranges to highlight.
highlightColor	string	Yes	Default/fallback highlight color.
className	string	Yes	CSS class added to each highlight decoration.
getColor	(string: string) => string	No	Returns color for each match; falls back to highlightColor.