Package API
Reference for @sumx/sumx-editor: default export, subpaths, types, ref handle, and hooks.
Default export — SumXEditor
import SumXEditor, { type SumXEditorHandle, type SumXEditorProps } from '@sumx/sumx-editor';Client component ('use client'). forwardRef → SumXEditorHandle.
SumXEditorProps
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Controlled HTML |
onChange | (html: string) => void | required | Fires with sanitized HTML |
onBlur | FocusEventHandler | — | Wrapper blur |
name | string | 'sumx-editor' | Hidden textarea name |
readOnly | boolean | — | Body read-only |
disabled | boolean | — | Disables editor UI |
invalid | boolean | — | Error border |
placeholder | string | — | Empty hint |
height | number | string | — | Body height |
maxHeight | number | string | — | Max body height |
showToolbar | boolean | true | SunEditor toolbar |
toolbarPreset | 'minimal' | 'standard' | 'full' | 'email' | 'standard' | Button layout |
showImageButton | boolean | — | Toolbar image button |
showVideoButton | boolean | — | Toolbar video button |
variableGroups | SumXEditorVariableGroup[] | — | Merge-field picker data |
variablesEnabled | boolean | auto | Force picker visibility |
toolbarAddon | ReactNode | — | Extra toolbar slot |
editorOptions | Partial<SunEditor.InitOptions> | — | Merged init options |
onSave | () => void | Promise<void> | — | Ctrl/Cmd+S / save button |
onImageUploadBefore | SumXEditorImageUploadBeforeHandler | — | Pre-insert hook |
onImageUpload | SumXEditorImageUploadHandler | — | Post-insert hook |
onImageUploadError | SumXEditorImageUploadErrorHandler | — | Upload error |
className | string | — | Root wrapper |
editorClassName | string | — | Editor init class |
toolbarClassName | string | — | Variable row class |
props | SumXEditorLegacyNestedProps | — | Deprecated nested bag |
SumXEditorHandle (ref)
| Method | Description |
|---|---|
insertVariable(value: string) | Insert HTML at caret |
focus() | Focus editor |
blur() | Blur editor |
getContents() | Current HTML (sanitized) |
isEmpty() | SunEditor isEmpty() |
setContents(html: string) | Set HTML without redundant onChange |
resetEditorOptions(options) | SunEditor resetOptions() |
const ref = useRef<SumXEditorHandle>(null);
ref.current?.setContents('<p>Reset</p>');
const empty = ref.current?.isEmpty();RichTextContent
Subpath: @sumx/sumx-editor/rich-text-content
import RichTextContent from '@sumx/sumx-editor/rich-text-content';
// or
import { RichTextContent } from '@sumx/sumx-editor';| Prop | Type | Default |
|---|---|---|
html | string | null | undefined | — |
className | string | — |
emptyPlaceholder | string | '-' |
Sanitization exports
| Export | Module |
|---|---|
sanitizeRichHtml, RICH_HTML_SANITIZE_CONFIG | @sumx/sumx-editor/sanitize-rich-html |
sanitizeEditorHtml | @sumx/sumx-editor (alias) |
Toolbar helper
import { getSunEditorButtonList } from '@sumx/sumx-editor';
getSunEditorButtonList(
preset: 'minimal' | 'standard' | 'full' | 'email',
opts?: { includeImage?: boolean; includeVideo?: boolean }
): SunEditor.UI.ButtonList;SumXEditorVariablePicker
Standalone dropdown (used inside core; also exported).
import { SumXEditorVariablePicker } from '@sumx/sumx-editor';| Prop | Type |
|---|---|
groups | SumXEditorVariableGroup[] |
onInsert | (option: SumXEditorVariableOption) => void |
disabled | boolean |
className | string |
toolbarChrome | boolean — compact SunEditor toolbar styling |
useSumxEditorImageCropUploadBefore
import { useSumxEditorImageCropUploadBefore } from '@sumx/sumx-editor';
const onImageUploadBefore = useSumxEditorImageCropUploadBefore();Returns a SumXEditorImageUploadBeforeHandler compatible with onImageUploadBefore.
Image handler types
type SumXEditorImageUploadBeforeHandler = (
files: File[],
info: Record<string, unknown>,
uploadHandler: (result: unknown) => void
) =>
| boolean
| void
| SunEditor.EventParams.ImageInfo
| false
| Promise<boolean | void | SunEditor.EventParams.ImageInfo | false>;
type SumXEditorImageUploadHandler = (
targetImgElement: HTMLImageElement,
index: number,
state: 'create' | 'update' | 'delete',
imageInfo: Record<string, unknown>,
remainingFilesCount: number
) => void;
type SumXEditorImageUploadErrorHandler = (
errorMessage: string,
result: unknown
) => void;Named type exports
export type {
SumXEditorHandle,
SumXEditorProps,
SumXEditorToolbarPreset,
SumXEditorVariableGroup,
SumXEditorVariableOption,
SumXEditorLegacyNestedProps,
SumXEditorImageUploadBeforeHandler,
SumXEditorImageUploadHandler,
SumXEditorImageUploadErrorHandler,
} from '@sumx/sumx-editor';styles.scss
Import in host global SCSS:
@import '@sumx/sumx-editor/styles.scss';Covers .sumx-editor, .sumx-editor-variable, list classes (.sumx-ul, .sumx-ol), and typography helpers inside the editor surface.
Peer dependencies
| Package | Version |
|---|---|
react, react-dom | ^19 |
@sumx/ui | ^0.1.2 |
suneditor | ^3.1 |
react-easy-crop | ^5 |
lucide-react | ≥0.400 (via UI / variable picker icons) |