Toolbar, variables & media

Configuration surface for SumXEditor: toolbar presets, merge fields, images, and SunEditor init overrides.

Set toolbarPreset on SumXEditor. The kit maps presets to SunEditor button lists via getSunEditorButtonList.

Preset	Typical use	Highlights
`minimal`	Short notes	Undo/redo, basic inline, link
`standard`	General ERP rich text	Fonts, colors, lists, table, link, code view
`full`	Long-form content	Full SunEditor set + preview, fullscreen
`email`	Transactional email bodies	Email-oriented blocks, no table

Media buttons are controlled separately:

Prop	Default	Effect
`showImageButton`	`false` unless upload hooks / flag	Adds `image` to toolbar
`showVideoButton`	`false`	Adds `video` to toolbar


<SumXEditor
  toolbarPreset="email"
  showImageButton
  onImageUploadBefore={cropHandler}
  onChange={setHtml}
  value={html}
/>

Custom button list

Export and extend in advanced cases:


import { getSunEditorButtonList } from '@sumx/sumx-editor';
 
const buttons = getSunEditorButtonList('standard', {
  includeImage: true,
  includeVideo: false,
});

Pass merged options through editorOptions.buttonList only if you intentionally override the preset wiring in core (prefer toolbarPreset + media flags first).

Layout & chrome props

Prop	Type	Description
`height`	`number \| string`	Editor body height (px or CSS length)
`maxHeight`	`number \| string`	Max body height
`placeholder`	`string`	Empty-state hint
`showToolbar`	`boolean`	Hide SunEditor toolbar when `false`
`className`	`string`	Root wrapper
`editorClassName`	`string`	Passed into SunEditor init
`toolbarClassName`	`string`	Variable slot / chrome
`invalid`	`boolean`	Red border on wrapper (`border-destructive`)
`disabled`	`boolean`	Disables SunEditor UI
`readOnly`	`boolean`	Read-only body; toolbar may still show for copy
`toolbarAddon`	`ReactNode`	Slot beside variable picker

Merge fields (variables)

Types:


type SumXEditorVariableOption = {
  label: string;
  value: string;       // inserted HTML token, e.g. {{employee.name}}
  description?: string;
  id?: string;
};
 
type SumXEditorVariableGroup = {
  groupKey: string;
  groupLabel: string;
  options: SumXEditorVariableOption[];
};

Usage:


<SumXEditor
  variableGroups={[
    {
      groupKey: 'employee',
      groupLabel: 'Employee',
      options: [
        { label: 'Full name', value: '{{employee.fullName}}' },
        { label: 'Email', value: '{{employee.email}}' },
      ],
    },
  ]}
  onChange={setHtml}
  value={html}
/>

Prop	Description
`variableGroups`	Groups shown in Variables dropdown
`variablesEnabled`	Force show/hide picker; default `true` when groups exist

Inserted tokens render as .sumx-editor-variable chips (styled in styles.scss). Sanitizer allows data-sumx-variable attribute.

Imperative insert (ref):


editorRef.current?.insertVariable('{{vendor.name}}');

Standalone picker (custom toolbar):


import { SumXEditorVariablePicker } from '@sumx/sumx-editor';
 
<SumXEditorVariablePicker
  groups={groups}
  onInsert={(opt) => editorRef.current?.insertVariable(opt.value)}
  toolbarChrome
/>

Image upload & crop

Handlers

Callback	When
`onImageUploadBefore`	Before insert — return modified `ImageInfo`, `false` to cancel, or async
`onImageUpload`	After create/update/delete
`onImageUploadError`	SunEditor error string

Legacy signatures are adapted to SunEditor 3 events internally.

Crop hook


import SumXEditor, { useSumxEditorImageCropUploadBefore } from '@sumx/sumx-editor';
 
function EditorWithCrop() {
  const onImageUploadBefore = useSumxEditorImageCropUploadBefore();
 
  return (
    <SumXEditor
      showImageButton
      onImageUploadBefore={onImageUploadBefore}
      onChange={setHtml}
      value={html}
    />
  );
}

The hook opens an @sumx/ui Dialog with react-easy-crop, then returns a blob/file SunEditor can insert.

`editorOptions` (SunEditor init)

Pass partial SunEditor.InitOptions merged after preset defaults:


<SumXEditor
  editorOptions={{
    charCounter: true,
    charCounterMax: 5000,
    resizingBar: true,
  }}
  onChange={setHtml}
  value={html}
/>

Hot reload options on an existing instance:


editorRef.current?.resetEditorOptions({ height: '400px' });

Save shortcut


<SumXEditor onSave={async () => { await saveDraft(); }} ... />

Maps to SunEditor onSave (Ctrl/Cmd+S and save toolbar action when present).

Legacy nested `props`

Older screens may pass props={{ placeholder, variableGroups, … }}. Root-level props win on conflict. Prefer flat props for new code.

Package API — full prop and ref tables
Sanitization