Setup

Generally, the default setup of rhino-editor should be enough. However, in the interest of leveraging the underlying rich text editor, let’s look at how we can add, modify, or remove extensions and extend the underlying web component.

Configuring Extensions

First, we need to change how we import the editor.

JavaScript 
import "rhino-editor/exports/styles/trix.css"
import { TipTapEditor } from "rhino-editor/exports/elements/tip-tap-editor.js"

You’ll notice we don’t want to auto-register the <rhino-editor> component. Instead, we want to extend it, then register it.

Now we need to extend the existing editor.

JavaScript 
import "rhino-editor/exports/styles/trix.css"
import { TipTapEditor } from "rhino-editor/exports/elements/tip-tap-editor.js"

class MyEditor extends TipTapEditor {
  constructor () {
    super()
    this.starterKit = {
      ...super.starterKit,
      heading: {
        // Enable all heading levels
        levels: [1, 2, 3, 4, 5, 6],
      },
    }
    this.rhinoStarterKit = {
      ...super.rhinoStarterKit,
      gallery: false
    }
  }
}

MyEditor.define("my-editor")

Adding Extensions

Now let’s see how we would add extensions:

JavaScript 
import { TipTapEditor } from "rhino-editor/exports/elements/tip-tap-editor.js"

// https://tiptap.dev/api/extensions/character-count
import CharacterCount from "@tiptap/extension-character-count"
import { html } from "lit"

class ExtendedEditor extends TipTapEditor {
  extensions () {
    this.characterCountLimit = 240
    return [
      // Uses all existing extensions so we're only appending
      ...super.extensions(),

      // Adds character counter
      CharacterCount.configure({
        limit: this.characterCountLimit,
      })
    ]
  }

  render () {
    return html`
      ${super.render()}

      <p style="color: gray;">
        ${this.editor?.storage.characterCount.characters()}/${this.characterCountLimit} characters
        <br />
        ${this.editor?.storage.characterCount.words()} words
      </p>
    `
  }
}

ExtendedEditor.define("extended-rhino-editor")
HTML 
<!-- index.html -->
<extended-rhino-editor></extended-rhino-editor>

The above will now have a character counter in place for the editor! This can be applied to any extensions. You could even wipe out all existing extensions and replace them all with your own if you wanted!

Character Count Example