Rich Text Editor Migration Guide

Migrate from @gohighlevel/ghl-text-editor to @platform-ui/rte.

Overview

This guide provides step-by-step instructions for migrating your application from the legacy GHL-UI Rich Text Editor (@gohighlevel/ghl-text-editor) to the new HighRise Rich Text Editor (@platform-ui/rte).

Documentation

For complete API documentation and advanced usage examples, visit the @platform-ui/rte documentation.

Migration Steps

1. Update Package Imports

Replace the legacy package imports with the new @platform-ui/rte package.

- import { UIRichTextEditor } from '@gohighlevel/ghl-text-editor'
- import { Editor } from '@tiptap/vue-3'

+ import { HLTextEditor, Editor } from '@platform-ui/rte'

Tip

The Editor type is now exported directly from @platform-ui/rte, eliminating the need to import from @tiptap/vue-3.

2. Update Component Usage

Replace UIRichTextEditor component references with HLTextEditor.

- <UIRichTextEditor :editor="editor" />

+ <HLTextEditor :editor="editor" />

3. Update Slot Names

The toolbar slot has been renamed to header for better semantic clarity.

- <UIRichTextEditor :editor="editor">
-   <template #toolbar>
-     <RTEControlBold :editor="editor" />
-   </template>
- </UIRichTextEditor>

+ <HLTextEditor :editor="editor">
+   <template #header>
+     <RTEControlBold :editor="editor" />
+   </template>
+ </HLTextEditor>

Backward Compatibility

Extensions & Controls

All existing extensions and controls from @gohighlevel/ghl-text-editor remain fully compatible and available with @platform-ui/rte. No changes are required to your extension configurations or control implementations.

Summary of Changes

Category	Legacy (@gohighlevel/ghl-text-editor)	New (@platform-ui/rte)
Package	@gohighlevel/ghl-text-editor	@platform-ui/rte
Component	UIRichTextEditor	HLTextEditor
Toolbar Slot	#toolbar	#header
Editor Import	@tiptap/vue-3	@platform-ui/rte

Need Help?

If you encounter any issues during migration, reach out to the Platform-UI Team here.