fq-editor-v2

v1.0.1

Published

8 days ago

A rich contenteditable editor for React with markdown shortcuts, code blocks, callouts, math (LaTeX), lists, and more.

Downloads

0High
0Medium
0Low

fenrirqutrub

rich-text-editor contenteditable react-editor markdown latex katex code-highlight callout wysiwyg bangla

fq-editor

A powerful, lightweight rich-text editor for React built on contenteditable. Supports markdown-style shortcuts, syntax-highlighted code blocks, callouts, LaTeX math, custom lists, and more — with full dark mode support.

Install

npm install fq-editor

Quick Start

import { Editor } from "fq-editor";
import { useState } from "react";

function App() {
  const [content, setContent] = useState("");

  return (
    <Editor
      value={content}
      onChange={setContent}
      placeholder="Start writing..."
      rows={10}
    />
  );
}

Props

| Prop | Type | Default | Description | | ------------- | ----------------------- | -------------------- | ------------------------------ | | value | string | "" | HTML content (controlled) | | onChange | (val: string) => void | — | Called on every content change | | placeholder | string | "Write something…" | Placeholder text | | rows | number | 8 | Min height in line units | | className | string | "" | Extra CSS classes on wrapper | | disabled | boolean | false | Make editor read-only |

Keyboard Shortcuts & Markdown Syntax

Inline Formatting (auto-converts on type)

| Syntax | Result | | ---------- | ----------------- | | **text** | Bold | | _text_ | Italic | | __text__ | Underline | | ~~text~~ | ~~Strikethrough~~ | | ^text^ | Superscript | | ~text~ | Subscript | | !!text!! | Remove formatting |

Color & Highlight

| Syntax | Result | | ----------------- | ----------------- | | ::red::text:: | Red colored text | | ::blue::text:: | Blue colored text | | ==text== | Yellow highlight | | ==green==text== | Green highlight | | ;;24;;text;; | Font size 24px |

Block Triggers (type trigger + Space)

| Trigger | Block created | | ------------ | -------------------- | | # | H1 heading | | ## | H2 heading | | ### | H3 heading | | #### | H4 heading | | > | Blockquote | | * or - | Bullet list | | 1. | Numbered list | | a. | Alphabetic list | | A. | Uppercase alpha list | | i. | Roman numeral list | | ক. | Bangla list | | ```js | JS code block | | ```py | Python code block | | [!note] | Note callout | | [!warning] | Warning callout | | [!tip] | Tip callout | | [pre] | Pre-line block | | [center] | Center-aligned block | | [right] | Right-aligned block |

Callout Colors

All Tailwind color names work: [!red], [!blue], [!green], [!amber], [!violet], [!emerald], [!rose], [!sky], etc.

Also semantic names: [!note], [!info], [!tip], [!success], [!warning], [!danger], [!bug], [!example], [!quote]

Code Blocks

Supported languages with syntax highlighting: js, ts, py, java, go, rust, bash, sql, html, css

Math (LaTeX via KaTeX)

| Syntax | Result | | --------------------- | ------------ | | $\frac{1}{2}$ | Inline math | | [math]E=mc^2[/math] | Display math |

KaTeX is loaded automatically from CDN on demand.

Navigation Keys

| Key | Action | | ------------------------- | ------------------------- | | Tab | Indent block / list item | | Shift+Tab | Outdent | | Esc | Exit code block / callout | | Shift+Enter | Exit block, add paragraph | | Enter (empty list item) | Exit list |

Rendering Saved Content (Article / Read-only View)

When displaying saved HTML content, use the article utilities:

import { useEffect, useRef } from "react";
import {
  injectArticleStyles,
  processArticleCodeBlocks,
  applyArticleTheme,
  watchThemeChanges,
  renderMathInContainer,
} from "fq-editor";

function ArticleBody({ html }: { html: string }) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    injectArticleStyles();
  }, []);

  useEffect(() => {
    if (!ref.current) return;
    ref.current.innerHTML = html;
    processArticleCodeBlocks(ref.current);
    applyArticleTheme();
    renderMathInContainer(ref.current);
    const cleanup = watchThemeChanges();
    return cleanup;
  }, [html]);

  return <div ref={ref} className="article-body" />;
}

Dark Mode

The editor respects data-theme="dark" on <html> or <body>, or the .dark class, or prefers-color-scheme: dark.

// Toggle dark mode
document.documentElement.setAttribute("data-theme", "dark");

Or use the utility:

import { updateEditorTheme } from "fq-editor";
updateEditorTheme("dark"); // or "light"

Exports

import {
  Editor, // Main editor React component (default export too)
  injectArticleStyles, // Inject CSS for article display
  processArticleCodeBlocks, // Convert editor code blocks → static read-only
  applyArticleTheme, // Apply current theme to code blocks
  watchThemeChanges, // Watch for theme changes (returns cleanup fn)
  renderMathInContainer, // Render KaTeX math in a container
  loadKaTeX, // Preload KaTeX
  getThemeTokens, // Get current theme color tokens
  updateEditorTheme, // Force dark/light theme
} from "fq-editor";

License

MIT