Rhino Editor

Rhino Editor is designed as a drop-in replacement for Trix, the standard WYSIWYG editor for Rails. While Trix is lightweight, Rhino Editor is intended for developers who need advanced features and extensibility that Trix cannot easily provide.

Key advantages include:

• ActionText Compatibility: You can continue using Rails ActionText while providing a richer editing experience.
• Advanced Features: Supports Real Time Collaboration, Code Syntax Highlighting, and Table Editing out of the box.
• Extensibility: Built on top of TipTap and ProseMirror, allowing you to use any existing TipTap or ProseMirror community extensions.

Tradeoffs to consider:

• Bundle Size: Rhino Editor is larger than Trix (approximately ~100kb gzipped vs Trix's ~40kb gzipped).
• Shadow DOM: Rhino Editor uses Shadow DOM for components like the toolbar and link insertion dialogs, which may require specific approaches for styling and extension.

To modify the configuration or extensions of a <rhino-editor> element, you must wait for the element to connect to the DOM. There are three primary patterns for intercepting the editor instance:

1. rhino-before-initialize event: Fires when the <rhino-editor> element connects to the DOM, but before the TipTap instance is created. Use this for early configuration like setting extensions or starterKitOptions.
2. rhino-initialize event: Fires after the TipTap instance has been created. Use this if you need to interact with the initialized editor state.
3. customElements.whenDefined("rhino-editor"): A standard Web Components approach. This ensures the element is defined, but the TipTap instance may or may not have been created yet when the callback executes.

Common modification tasks include setting the extensions array, calling addExtensions(), or updating starterKitOptions.

import "rhino-editor/exports/styles/trix.css"
import "rhino-editor"

// Example using rhino-before-initialize
document.addEventListener("rhino-before-initialize", (e) => {
  const rhinoEditor = e.target
  rhinoEditor.extensions = [MyExtension]
  rhinoEditor.addExtensions(MyOtherExtension)
  rhinoEditor.starterKitOptions = { ...rhinoEditor.starterKitOptions, rhinoGallery: false }
})

If JavaScript load order makes it difficult to catch the rhino-before-initialize or rhino-initialize events, you can use the defer-initialize attribute on the <rhino-editor> element.

When this attribute is present, the editor will not start or create the TipTap instance until the attribute is manually removed. This allows you to reliably set up all event listeners and configurations before the editor begins its lifecycle.

Workflow:

1. Add defer-initialize to your <rhino-editor> tag.
2. Set up your rhino-before-initialize or rhino-initialize event listeners.
3. Remove the defer-initialize attribute via JavaScript to trigger initialization.

<rhino-editor defer-initialize></rhino-editor>

<script type="module">
  // 1. Setup your event listeners to modify the editor
  document.addEventListener("rhino-before-initialize", (e) => {
    // configuration logic here
  })

  // 2. The editor will initialize and start the TipTap instance once the attribute is removed
  document.querySelectorAll("rhino-editor").forEach((el) => el.removeAttribute("defer-initialize"))
</script>

Rhino Editor uses an event and slot-based system for its built-in bubble menu, making it easier to customize than extension-based alternatives. You can override different parts of the bubble menu using specific slots within the <rhino-editor> component:

• Entire Toolbar: Use slot="bubble-menu-toolbar" with a <role-toolbar> to replace the whole menu.
• Inner Items: Use slot="bubble-menu-toolbar-items" to replace only the buttons inside the toolbar.
• Prepend/Append Items: Use slot="before-bubble-menu-toolbar-items" or slot="after-bubble-menu-toolbar-items" to add items to the start or end of the existing list.
• Additional Toolbars: Use slot="additional-bubble-menu-toolbar" with one or more <role-toolbar> elements to add entirely new toolbar groups.

Note on Slot Naming: The bubble menu supports all slots available to the base Rhino Editor toolbar, but they must be prefixed with bubble-menu__. For example, to customize the strike icon, use slot="bubble-menu__strike-icon" instead of slot="strike-icon".

<rhino-editor>
  <!-- Replace the entire toolbar -->
  <role-toolbar slot="bubble-menu-toolbar">
    <!-- Custom content -->
  </role-toolbar>

  <!-- Add items before the existing ones -->
  <div slot="before-bubble-menu-toolbar-items">
    <button tabindex="-1" data-role="toolbar-item">New Item</button>
  </div>

  <!-- Add a completely new toolbar group -->
  <role-toolbar id="custom-toolbar" slot="additional-bubble-menu-toolbar">
    <button data-role="toolbar-item" tabindex="-1">Custom Action</button>
  </role-toolbar>
</rhino-editor>