JSPM

@fvc/richtext

1.6.9-rc.0
    • ESM via JSPM
    • ES Module Entrypoint
    • Export Map
    • Keywords
    • License
    • Repository URL
    • TypeScript Types
    • README
    • Created
    • Published
    • Downloads 207
    • Score
      100M100P100Q129461F

    Package Exports

    • @fvc/richtext
    • @fvc/richtext/types

    Readme

    @fvc/richtext

    @fvc/richtext provides a WYSIWYG rich text editor built on top of @cyber-wysiwyg/richtexteditor. It extends the base editor with HTML sanitization, a template dropdown, a custom link modal, and design-system integration for FE-VIS applications. The variant prop switches between a full toolbar editor and a compact input appearance.

    Installation

    bun add @fvc/richtext

    Peer Dependencies

    The package expects these dependencies to be available in the consuming application:

    bun add react antd @fvc/button @fvc/icons @cyber-wysiwyg/richtexteditor

    Import

    import { Richtext } from '@fvc/richtext';

    Quick Start

    import { Richtext } from '@fvc/richtext';
import { useState } from 'react';

export function NoteEditor() {
  const [value, setValue] = useState('');

  return <Richtext value={value} onChange={setValue} />;
}

    Common Usage

    Basic Editor

    <Richtext value={content} onChange={setContent} />

    Input Variant

    The input variant renders a compact single-line editor suitable for short text fields.

    <Richtext variant="input" value={value} onChange={setValue} />

    Error State

    <Richtext error value={value} onChange={setValue} />

    Auto Sanitization

    HTML from untrusted sources is sanitized automatically when autoSanitize is enabled.

    <Richtext autoSanitize value={untrustedHtml} onChange={setValue} />

    Template Dropdown

    Inject predefined text snippets from a map of label→value pairs.

    <Richtext
  enableTemplateDropdown
  templateDropdownLabel="Templates"
  templateMap={{
    Greeting: 'Dear {{name}},',
    Signature: 'Kind regards,\n{{sender}}',
  }}
  value={value}
  onChange={setValue}
/>

    Custom Toolbar

    Pass a function to extend the default toolbar settings.

    <Richtext
  toolbarSettings={(defaults) => ({
    ...defaults,
    items: [...defaults.items, 'SourceCode'],
  })}
  value={value}
  onChange={setValue}
/>

    Props

    Extends all RichTextEditor props except toolbarSettings (see the custom toolbar example above).

    Prop Type Default Description
    variant 'editor' | 'input' 'editor' Switches between full toolbar editor and compact input mode.
    error boolean — Applies error styling to the editor border.
    autoSanitize boolean — Sanitizes HTML via DOMPurify on every value change.
    enableTemplateDropdown boolean — Shows the template insertion dropdown in the toolbar.
    templateMap Record<string, string> — Map of display label → template string to inject.
    templateDropdownLabel string — Label shown on the template dropdown button.
    toolbarSettings ToolbarSettings | ((defaults: ToolbarSettings) => ToolbarSettings) — Toolbar config or function that receives and mutates defaults.
    className string — Additional CSS class names on the wrapper element.
    testId string — Maps to data-testid on the root element.

    TypeScript

    The package ships with type definitions. No @types/ install needed.

    import type { RichTextProps, TemplateMap, LinkModalProps } from '@fvc/richtext/types';

    Consumer Example

    import { Richtext } from '@fvc/richtext';
import { useState } from 'react';

export function ArticleEditor({ onSave }) {
  const [body, setBody] = useState('');

  return (
    <Richtext
      autoSanitize
      enableTemplateDropdown
      templateDropdownLabel="Insert snippet"
      templateMap={{
        Opening: '<p>Dear reader,</p>',
        Closing: '<p>Thank you for reading.</p>',
      }}
      toolbarSettings={(defaults) => ({
        ...defaults,
        items: defaults.items.filter((i) => i !== 'SourceCode'),
      })}
      value={body}
      onChange={setBody}
    />
  );
}

    Testing

    Use testId to target the editor root in tests.

    <Richtext testId="article-editor" value={value} onChange={setValue} />
    screen.getByTestId('article-editor');

    Development

    bun run lint
bun run type-check
bun run test
bun run build