Editor

A production-ready, feature-rich WYSIWYG rich text editor powered by TipTap 3 and ProseMirror. Ships with 28 toolbar formatting tools, a floating bubble menu, slash commands (/), KaTeX mathematical equations, code syntax highlighting, YouTube/Vimeo video embeds, resizable images, and accessible keyboard shortcuts.

import { MarkonEditor } from '@nofinite/markon/react';

Interactive Preview

Key Features

• 28 Toolbar Actions: Headings (H1-H3), bold, italic, underline, strikethrough, alignment, lists, task checklists, blockquotes, code blocks, font families, font sizes, text & highlight colors.
• Contextual Bubble Menu: Automatically emerges above text selections or media items for lightning-fast inline styling and image layout adjustments.
• Slash Commands (/): Type / anywhere on an empty line to invoke a keyboard-navigable command palette to insert headers, tables, callouts, and embeds.
• Mathematical Equations: Seamless LaTeX rendering powered by KaTeX.
• Media Resizing: Drag handles and pre-set width buttons (25%, 50%, 100%, float left, float right) for embedded images and videos.
• Zero Configuration: Built-in styling with semantic token support and dark mode integration out of the box.

Usage

Basic Usage

import { useState } from 'react';
import { MarkonEditor } from '@nofinite/markon/react';

export default function MyEditor() {
  const [content, setContent] = useState('<p>Hello <strong>World</strong>!</p>');

  return (
    <MarkonEditor 
      value={content} 
      onChange={setContent} 
      placeholder="Start typing your story..." 
    />
  );
}

With Custom File Upload Handler

Handle drag-and-drop or file picker image uploads with an async cloud upload provider:

<Editor
  value={content}
  onChange={setContent}
  onUploadFile={async (file: File) => {
    const formData = new FormData();
    formData.append('file', file);
    const res = await fetch('/api/upload', { method: 'POST', body: formData });
    const { url } = await res.json();
    return url;
  }}
/>

Keyboard Shortcuts

Best Practices

Do

• Provide an onUploadFile callback when using image uploads to prevent heavy base64 strings from bloating your database.
• Utilize the placeholder prop to guide users when the document is empty.
• Rely on semantic tokens for dark mode compatibility.

Don't

• Do not wrap the editor in unstyled containers with overflow: hidden that may clip the floating Bubble Menu or slash command list.
• Avoid passing un-sanitized external HTML into the editor if rendering raw untrusted user input elsewhere.

API Reference