react-text-forge

ReactTextForge

ReactTextForge est un éditeur de texte basé sur React et Slate.js.

📌 Pourquoi ReactTextForge ?

ReactTextForge est conçu pour offrir une expérience d'édition de texte riche, légère, modulaire et facile à intégrer dans des applications React/TypeScript. Contrairement à CKEditor, il est optimisé pour :

• Une intégration transparente avec les projets modernes (React 18+, TypeScript).
• Une personnalisation poussée (toolbar, styles, raccourcis clavier).
• Une architecture extensible pour ajouter des fonctionnalités spécifiques.

⚙️ Prérequis

• Node.js v25+
• React v19+
• TypeScript v4.9+
• Slate.js v0.112+

Installation

Pour installer ReactTextForge, utilisez la commande suivante :

npm install react-texte-forge

Utilisation

Voici un exemple pour utiliser ReactTextForge par défaut dans votre application React :

import React, { useState } from "react";
import ReactTextForge from "./components/ReactTextForge";

export default function App() {
    const [value, setValue] = useState({});

    return (
        <ReactTextForge value={value} setValue={setValue} />
    );
}

Par défaut, des couleurs sont données à l'éditeur: noire pour les images et les bordures, blanche pour l'arrière-plan Les couleurs acceptées sont de types rgb et HexaDécimal (exemple: pour le blanc, vous pouvez soit "#FFFFFF", "#ffffff", ou rgb(255, 255, 255)) Vous pouvez personnaliser ces couleurs comme ceci :

import React, { useState } from "react";
import ReactTextForge from "./components/ReactTextForge";

export default function App() {
    const [value, setValue] = useState({});

    return (
        <ReactTextForge value={value} setValue={setValue} imageColor='#FFFFFF' backgroundColor='#4a91e4' />
    );
}

Vous pouvez si vous le désirez ajouter vos propres raccourcis claviers comme ceci:

import React, { useState } from "react";
import ReactTextForge from "./components/ReactTextForge";

export default function App() {
    const [value, setValue] = useState({});

    /**
     * Indiquer en clé le raccourci définit et en valeur la fonction appliqué
     */
    const raccourcis = {
        'Ctrl+Shift+A': () => alert('Vous avez pressé Ctrl+Shift+A !'),
        'Alt+S': () => alert('Vous avez pressé Alt+S !')
    };

    return (
        <ReactTextForge value={value} setValue={setValue} raccourcis={raccourcis} />
    );
}

Licence

Ce projet est sous licence MIT.

Contact

Pour toute question ou suggestion, veuillez contacter : [e-mail]

Aperçu

Capture d'écran de l'interface de l'éditeur de texte ReactTextForge.