This package is part of the Lexion framework-agnostic rich text editor.

Lexion is a framework-agnostic, headless rich text editor platform built on ProseMirror, designed to provide a shared core, reusable extensions, and framework-specific adapters.

@lexion-rte/react

React adapter for Lexion.

Overview

@lexion-rte/react exports LexionEditorView, a component that wraps ProseMirror wiring for React.

It supports:

• controlled mode (value)
• uncontrolled mode (defaultValue)
• custom external editor instances
• read-only mode
• automatic ProseMirror base white-space safeguards to avoid console CSS warnings

Install

pnpm add @lexion-rte/react react react-dom

Component Props

LexionEditorViewProps:

• editor?: LexionEditor
• value?: JSONDocument
• defaultValue?: JSONDocument
• onChange?: (value, editor) => void
• onReady?: (editor) => void
• readOnly?: boolean
• className?: string
• style?: CSSProperties

Uncontrolled Example

import { LexionEditorView } from "@lexion-rte/react";

export function EditorScreen() {
  return <LexionEditorView defaultValue={initialDoc} />;
}

Controlled Example

import { useState } from "react";
import type { JSONDocument } from "@lexion-rte/core";
import { LexionEditorView } from "@lexion-rte/react";

export function ControlledEditor({ initial }: { initial: JSONDocument }) {
  const [value, setValue] = useState(initial);

  return (
    <LexionEditorView
      value={value}
      onChange={(nextValue) => setValue(nextValue)}
      readOnly={false}
    />
  );
}

External Editor Instance Example

import { useMemo } from "react";
import { LexionEditor } from "@lexion-rte/core";
import { starterKitExtension } from "@lexion-rte/starter-kit";
import { LexionEditorView } from "@lexion-rte/react";

export function SharedEditor() {
  const editor = useMemo(() => new LexionEditor({ extensions: [starterKitExtension] }), []);
  return <LexionEditorView editor={editor} />;
}

Notes

• In controlled mode, pass updated value back on every onChange call.
• The component renders the same footer message as other adapters.
• The editor root enforces required ProseMirror white-space styles, so users should not see the prosemirror.css warning.