SumX Editor (`@sumx/sumx-editor`)

SunEditor-based rich text editor for SumX ERP: compose HTML in forms, store sanitized HTML, and render it safely in read-only views. Built for Next.js Pages Router apps with client-only SunEditor loading (no SSR breakage).

Install


pnpm add @sumx/sumx-editor @sumx/ui suneditor isomorphic-dompurify react-easy-crop

Package	Role
`@sumx/sumx-editor`	`SumXEditor`, `RichTextContent`, sanitizers, variable picker
`@sumx/ui`	`Button`, `Dialog`, `Input`, `DropdownMenu`, `Slider`, `cn` (used by editor chrome)
`suneditor`	Peer — WYSIWYG engine (v3.x)
`react-easy-crop`	Peer — optional image crop dialog hook
`isomorphic-dompurify`	Transitive via editor (sanitization)

Monorepo / local kit:


pnpm run sumx:local   # portal
pnpm install

Pin feed version in sumx-deps.config.json (e.g. @sumx/sumx-editor: 0.1.0, @sumx/ui: 0.1.2).

Interactive demo

Documentation map

Topic	Page
Next.js wiring, dynamic import, styles, feature usage	Portal integration
Toolbar presets, variables, images, `editorOptions`	Toolbar, variables & media
Exports, props, ref handle, hooks	Package API
`sanitizeRichHtml`, DOMPurify profile, `RichTextContent`	Sanitization & XSS
SSR errors, missing styles, feed/local	Troubleshooting

Architecture

SumXEditor (index.tsx) — thin forwardRef shell. Loads sumx-editor-core only inside useEffect so SunEditor never runs on the Node SSR graph.
sumx-editor-core.tsx — mounts SunEditor, toolbar presets, variable slot, image events; sanitizes on every change via sanitizeEditorHtml.
RichTextContent — read-only HTML with the same sanitizer before dangerouslySetInnerHTML.

Quick start

Edit (form):


'use client';
 
import { useRef } from 'react';
import SumXEditor, { type SumXEditorHandle } from '@sumx/sumx-editor';
 
export function EmailBodyField({ value, onChange }: { value: string; onChange: (html: string) => void }) {
  const editorRef = useRef<SumXEditorHandle>(null);
 
  return (
    <SumXEditor
      ref={editorRef}
      value={value}
      onChange={onChange}
      toolbarPreset="email"
      placeholder="Write your message…"
      height={280}
    />
  );
}

Read (preview / detail):


import RichTextContent from '@sumx/sumx-editor/rich-text-content';
 
<RichTextContent html={storedHtml} emptyPlaceholder="—" />;

Portal checklist:

dependencies: @sumx/sumx-editor, @sumx/ui (dev: feed or sumx:local).
next.config.js: transpilePackages: [..., '@sumx/sumx-editor'].
src/styles/globals.scss: @import '@sumx/sumx-editor/styles.scss';
src/styles/tailwind.css: @source for @sumx/sumx-editor (see integration).

Subpath exports

Import	Module
`@sumx/sumx-editor`	Default `SumXEditor`, hooks, types, sanitizers
`@sumx/sumx-editor/rich-text-content`	`RichTextContent` (tree-shake read views)
`@sumx/sumx-editor/sanitize-rich-html`	`sanitizeRichHtml`, `RICH_HTML_SANITIZE_CONFIG`
`@sumx/sumx-editor/styles.scss`	Editor + variable chip SCSS

@sumx/ui — Input, DropdownMenu, Dialog, etc.
Packages overview
Local development

SumX Editor (@sumx/sumx-editor)