React integration

Clippy Editor provides React wrappers via <code>@lit/react</code>, enabling seamless use of the Web Components in a React application. Below are two examples — a simple editor and a composed editor with context, toolbar, gutter and validation list.

Example 1: simple editor

This example shows the ClippyEditor component — the most straightforward way to use the editor in React.

Example code

import { ClippyEditor } from '@nl-design-system-community/editor-react';

export function ReactEditorExample() {
  return (
    <ClippyEditor id="react-editor-1">
      <div slot="value">
        <h1>Heading level 1 in React editor</h1>
        <p>This is an example of the Clippy Editor with a Lit React wrapper</p>
      </div>
    </ClippyEditor>
  );
}

Example 2: context, content, gutter and validations

This example shows how ClippyContext, ClippyContent, ClippyToolbar, ClippyGutter and ClippyValidationsList can be used together for a fully configured editor.

Example code

import { ClippyContent } from '@nl-design-system-community/editor-react';
import { ClippyContext } from '@nl-design-system-community/editor-react';
import { ClippyGutter } from '@nl-design-system-community/editor-react';
import { ClippyToolbar } from '@nl-design-system-community/editor-react';
import { ClippyValidationsList } from '@nl-design-system-community/editor-react';

export function ReactContextExample() {
  return (
    <ClippyContext id="react-editor-2">
      <div slot="value">
        <h1>Heading level 1 in React editor</h1>
        <p>
          This is an example of the Clippy Editor <a href="#">with a Lit React wrapper</a>
        </p>
      </div>
      <ClippyContent>
        <ClippyToolbar
          config={[
            ['format-select', 'language-select'],
            ['bold', 'italic', 'underline', 'code'],
            ['link', 'image-upload', 'insert-table'],
          ]}
        />
        <ClippyGutter mode="list" />
      </ClippyContent>
      <ClippyValidationsList />
    </ClippyContext>
  );
}