@labmgm/rich-text

Tiptap-based rich text editor and HTML renderer.

pnpm add @labmgm/rich-text

Storybook (Rich text) · Source

Editor + Renderer

import { RichTextEditor, RichTextRenderer } from '@labmgm/rich-text';

<RichTextEditor
  defaultValue="<p>Hello</p>"
  onUpdate={(html) => setValue(html)}
  placeholder="Write something brilliant…"
  showToolbar
  minHeight={200}
/>

<RichTextRenderer html={savedHtml} />

Bundled extensions: StarterKit, Link, Image, Underline, Placeholder, Table, YouTube, Mention.

Advanced — custom editor wiring

import { useMgmEditor, mgmExtensions, Toolbar, EditorContent } from '@labmgm/rich-text';

const editor = useMgmEditor({
  extensions: mgmExtensions('Type here…'),
  content: initialHtml,
  onUpdate: ({ editor }) => save(editor.getHTML()),
});

<Toolbar editor={editor} />
<EditorContent editor={editor} />

useMgmEditor defaults to immediatelyRender: false, which is safe in Next.js and other SSR frameworks. Pass immediatelyRender: true only for a deliberately client-only integration.

Security

⚠️ Always sanitize HTML at the trust boundary before passing it to <RichTextRenderer> (e.g., DOMPurify, isomorphic-dompurify, rehype-sanitize). The renderer uses dangerouslySetInnerHTML directly.

License

MIT © MGM Laboratory