HighRise-RTE

RTE - Migration Guide ​

ghl-text-editor -> @platform-ui/rte

Scope and versions ​

Quick start ​

  1. Change imports from @gohighlevel/ghl-text-editor to @platform-ui/rte
  2. Replace UIRichTextEditor with HLTextEditor
  3. Rename slot #toolbar to #header
  4. Replace UITextEditorToolbar with explicit controls inside #header
  5. Replace UIMenuWrapper with your own wrapper component or <div>

Changes overview ​

1) Import changes ​

imports changed from @gohighlevel/ghl-text-editor to @platform-ui/rte

diff
-import {
-  Editor,
-  UIRichTextEditor,
-  UITextEditorToolbar,
-  RTEControlBold,
-} from '@gohighlevel/ghl-text-editor'
+import {
+  Editor,
+  HLTextEditor,
+  RTEControlBold,
+} from '@platform-ui/rte'

2) Component rename ​

component renamed from UIRichTextEditor to HLTextEditor

diff
-<UIRichTextEditor :editor="editor" />
+<HLTextEditor :editor="editor" />

3) Slot rename ​

slot renamed from #toolbar to #header

diff
-<UIRichTextEditor :editor="editor">
-  <template #toolbar>
-    <RTEControlBold :editor="editor" />
-    <RTEControlItalic :editor="editor" />
-  </template>
-</UIRichTextEditor>
+<HLTextEditor :editor="editor">
+  <template #header>
+    <RTEControlBold :editor="editor" />
+    <RTEControlItalic :editor="editor" />
+  </template>
+</HLTextEditor>

#footer is still supported in HLTextEditor.

4) UITextEditorToolbar removal ​

UITextEditorToolbar removed and can be replaced with explicit controls inside #header

diff
 <HLTextEditor :editor="editor">
-  <template #header>
-    <UITextEditorToolbar :editor="editor" />
-  </template>
+  <template #header>
+    <RTEControlHistory :editor="editor" type="undo" />
+    <RTEControlHistory :editor="editor" type="redo" />
+    <RTEControlToolbarSeparator />
+    <RTEControlBold :editor="editor" />
+    <RTEControlItalic :editor="editor" />
+    <RTEControlUnderline :editor="editor" />
+  </template>
 </HLTextEditor>

5) UIMenuWrapper removal ​

UIMenuWrapper removed and can be replaced with a local wrapper component or <div>

diff
-<UIMenuWrapper padding="{top: '8px', bottom: '8px', left: '8px', right: '8px'}" border-side="right">
-  <RTEControlBold :editor="editor" />
-  <RTEControlItalic :editor="editor" />
-</UIMenuWrapper>
+<div class="rte-menu-wrapper">
+  <RTEControlBold :editor="editor" />
+  <RTEControlItalic :editor="editor" />
+</div>
diff
+.rte-menu-wrapper {
+  padding: 8px;
+  border-right: 1px solid var(--hr-border-subtle, #e5e7eb);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}

Structured migration map ​

Use this section as deterministic transform rules.

yaml
migration:
  from:
    package: "@gohighlevel/ghl-text-editor"
    version: "2.19.7"
  to:
    package: "@platform-ui/rte"
    version: "1.2.0"

  transforms:
    imports:
      - replace_from: "@gohighlevel/ghl-text-editor"
        replace_to: "@platform-ui/rte"
    components:
      - old: "UIRichTextEditor"
        new: "HLTextEditor"
    slots:
      - old: "toolbar"
        new: "header"

  missing_in_target:
    - "UITextEditorToolbar"
    - "UIMenuWrapper"

  fallback_strategy:
    UITextEditorToolbar: "Compose controls manually inside HLTextEditor #header slot"
    UIMenuWrapper: "Replace with local wrapper component/div + CSS"

  verification:
    - "HLTextEditor renders"
    - "Header controls render in #header slot"
    - "No UITextEditorToolbar import remains"
    - "No UIMenuWrapper usage remains"

Final verification checklist ​

  • Search shows no imports from @gohighlevel/ghl-text-editor
  • Search shows no UIRichTextEditor usages
  • Search shows no #toolbar slot usages in RTE integration
  • Search shows no UITextEditorToolbar and UIMenuWrapper usages