@editu/react

React 19 components and hooks for the Editu block-based Markdown editor.

Installation

npm install @editu/core @editu/react

Requirements

• React 19+
• React DOM 19+

Usage

Basic Setup

import { Editu } from "@editu/react";
import "@editu/core/styles.css";

function App() {
  return <Editu placeholder="Type '/' for commands..." />;
}

With Editor Control

import { EdituEditor, EdituBubbleMenu, useEdituEditor } from "@editu/react";
import "@editu/core/styles.css";

function App() {
  const editor = useEdituEditor({
    features: {
      image: { onUpload: async (file) => "https://example.com/image.png" },
    },
  });

  return (
    <>
      <EdituEditor editor={editor} />
      {editor && <EdituBubbleMenu editor={editor} />}
    </>
  );
}

Markdown Import/Export

import { useEdituEditor, useEdituMarkdown } from "@editu/react";

function App() {
  const editor = useEdituEditor();
  const { markdown, setMarkdown } = useEdituMarkdown(() => editor);

  return <EdituEditor editor={editor} />;
}

Components

| Component | Description | |-----------|-------------| | Editu | All-in-one editor with bubble menu and optional toolbar | | EdituEditor | Editor component | | EdituBubbleMenu | Floating formatting toolbar | | EdituBubbleMenuDefault | Default bubble menu layout | | EdituBubbleMenuButton | Bubble menu button | | EdituBubbleMenuDivider | Bubble menu divider | | EdituBubbleMenuColorPicker | Bubble menu color picker | | EdituSlashMenu | Slash command menu | | EdituSlashMenuItem | Slash command menu item | | EdituSlashMenuEmpty | Slash command empty state | | EdituBlockMenu | Block context menu (drag handle click) | | EdituToolbar | Fixed toolbar | | EdituToolbarDefault | Default toolbar layout | | EdituToolbarButton | Toolbar button | | EdituToolbarDivider | Toolbar divider | | EdituToolbarDropdown | Toolbar dropdown button | | EdituToolbarOverflow | Toolbar overflow menu | | EdituMentionMenu | @mention suggestion menu | | EdituLinkEditor | Link editing popover | | EdituNodeSelector | Node type selector | | EdituColorPicker | Color picker | | EdituFindReplace | Find and replace panel | | EdituSaveIndicator | Auto-save status indicator | | EdituEmbedView | Embed content viewer | | EdituIcon | Icon component | | EdituIconProvider | Custom icon provider | | EdituThemeProvider | Theme provider | | EdituProvider | Editor context provider | | EdituPortal | Portal component |

Hooks

| Hook | Description | |------|-------------| | useEdituEditor | Create and manage editor instance | | useEdituEditorState | Track editor state changes | | useEdituState | Trigger re-renders on editor updates | | useEdituMarkdown | Two-way Markdown synchronization | | useEdituAutoSave | Auto-save to localStorage or custom backend | | useEdituCollaboration | Real-time collaboration management | | useEdituComment | Comment and annotation management | | useEdituVersionHistory | Document version history | | useEdituContext | Access editor from context | | useEdituContextSafe | Access editor from context (returns null outside provider) | | useEdituTheme | Access theme from context | | useEdituIconContext | Access icon context |

Documentation

Full docs: editu.pefen.dev | Repository: github.com/pfncl/editu

License

MIT