Megadraft

Une extension puissante pour Draft.js qui simplifie la création d'éditeurs riches et interactifs dans vos applications React.

Retour aux compétences Repository GitHub

Pour les non-initiés

Qu'est-ce que Megadraft ?

Megadraft est une extension de Draft.js qui vise à simplifier la création d'éditeurs de texte riches. Développé par Globo.com (l'un des plus grands groupes médias du Brésil), Megadraft ajoute une couche de convivialité et d'outils prêts à l'emploi au-dessus du puissant mais complexe Draft.js.

Imaginez Megadraft comme un kit de démarrage avancé qui vous donne immédiatement accès à une interface d'édition similaire à Medium, avec des fonctionnalités comme l'insertion d'images, de vidéos et la mise en forme de texte, le tout sans avoir à tout construire de zéro.

Pourquoi utiliser Megadraft plutôt que Draft.js directement ?

Rapidité de développement

Commencez rapidement avec une interface utilisateur prête à l'emploi, sans avoir à construire tous les composants d'interface vous-même.

Système de plugins

Ajoutez facilement des fonctionnalités comme l'insertion d'images, de vidéos ou de contenus personnalisés grâce à un système de plugins intuitif.

En résumé, Megadraft est idéal pour les équipes qui souhaitent intégrer rapidement une expérience d'édition de contenu riche dans leurs applications React, sans avoir à gérer toute la complexité inhérente à Draft.js.

Pour les développeurs

Fonctionnement technique

Megadraft est construit sur Draft.js et fournit des composants React prêts à l'emploi pour simplifier la construction d'éditeurs de texte riches. Son architecture est centrée autour de trois concepts principaux : l'éditeur de base, le système de plugins, et les options de personnalisation.

Implémentation de base

Éditeur de base

L'intégration de Megadraft dans une application React est simple. Voici comment créer un éditeur basique :

BasicMegadraftEditor.jsx

import React, { useState } from 'react';
import { 
  MegadraftEditor, 
  editorStateFromRaw, 
  editorStateToJSON 
} from 'megadraft';
import 'megadraft/dist/css/megadraft.css';

function MyEditor() {
  const [editorState, setEditorState] = useState(
    editorStateFromRaw(null)
  );

  const onChange = (newState) => {
    setEditorState(newState);
  };
  
  const saveContent = () => {
    const content = editorStateToJSON(editorState);
    console.log(content);
    localStorage.setItem('megadraftContent', content);
  };

  return (
    <div className="editor-container">
      <MegadraftEditor
        editorState={editorState}
        onChange={onChange}
        placeholder="Commencez à écrire..."
      />
      <button onClick={saveContent}>Sauvegarder le contenu</button>
    </div>
  );
}

export default MyEditor;

Création de plugins personnalisés

L'un des grands avantages de Megadraft est son système de plugins extensible. Voici comment créer un plugin personnalisé pour insérer des images :

CustomImagePlugin.jsx

import React from 'react';
import icons from 'megadraft/lib/icons';
import { insertDataBlock } from 'megadraft';

// Composant pour afficher l'image
export default class ImageBlock extends React.Component {
  render() {
    return (
      <div className="custom-image-block">
        <img src={this.props.data.src} alt={this.props.data.caption} />
        {this.props.data.caption && (
          <div className="image-caption">{this.props.data.caption}</div>
        )}
      </div>
    );
  }
}

// Configuration du plugin
export const ImageBlockConfig = {
  // Titre affiché dans la barre d'outils
  title: 'Image personnalisée',
  // Type unique pour ce block
  type: 'custom-image',
  // Icône dans la barre d'outils (utilise les icônes de Megadraft)
  icon: icons.ImageIcon,
  // Composant de rendu pour ce block
  block: ImageBlock,
  // Fonction appelée quand l'utilisateur clique sur l'icône
  buttonComponent: ({ onChange, editorState }) => {
    return (
      <button
        className="toolbar-button"
        onClick={(e) => {
          e.preventDefault();
          // En production, on utiliserait un sélecteur de fichier
          // ou un modal pour saisir l'URL, etc.
          const src = prompt('Entrez l'URL de l'image:');
          if (!src) return;
          
          const caption = prompt('Entrez une légende (optionnel):');
          
          const data = { src, caption };
          onChange(insertDataBlock(editorState, 'custom-image', data));
        }}
      >
        <icons.ImageIcon /> Image
      </button>
    );
  },
  // Options additionnelles pour le bloc de données
  options: {
    defaultData: {
      src: '',
      caption: '',
    },
  },
};

// Ajout du plugin à Megadraft
// Dans votre fichier principal:
// 
// import { MegadraftEditor } from 'megadraft';
// import { ImageBlockConfig } from './ImagePlugin';
// 
// const plugins = [ImageBlockConfig];
// 
// <MegadraftEditor
//   plugins={plugins}
//   editorState={editorState}
//   onChange={onChange}
// />

Personnalisation avancée

Megadraft est hautement personnalisable. Vous pouvez modifier l'apparence et le comportement de presque tous les aspects de l'éditeur :

CustomizedMegadraftEditor.jsx

import React, { useState } from 'react';
import { 
  MegadraftEditor, 
  editorStateFromRaw, 
  editorStateToJSON,
  Toolbar,
  PLUGINS 
} from 'megadraft';
import 'megadraft/dist/css/megadraft.css';
import './custom-megadraft.css'; // Nos personnalisations CSS

// Personnalisation des actions de la barre d'outils
const CUSTOM_ACTIONS = [
  { type: 'inline', label: 'B', style: 'BOLD', icon: 'BOLD' },
  { type: 'inline', label: 'I', style: 'ITALIC', icon: 'ITALIC' },
  { type: 'separator' },
  { type: 'block', label: 'H2', style: 'header-two', icon: 'H2' },
  { type: 'block', label: 'H3', style: 'header-three', icon: 'H3' },
  { type: 'block', label: 'Quote', style: 'blockquote', icon: 'BLOCKQUOTE' },
  { type: 'separator' },
  { type: 'block', label: '•', style: 'unordered-list-item', icon: 'UL' },
  { type: 'block', label: '1.', style: 'ordered-list-item', icon: 'OL' },
];

// Sélectionner seulement les plugins souhaités
const CUSTOM_PLUGINS = [
  PLUGINS.image,
  PLUGINS.video,
  // Custom plugin
  MyCustomPlugin
];

function CustomizableEditor() {
  const [editorState, setEditorState] = useState(
    editorStateFromRaw(null)
  );

  const onChange = (newState) => {
    setEditorState(newState);
  };

  // Personnalisation du composant Sidebar (barre latérale avec les plugins)
  const CustomSidebar = props => {
    return (
      <div className="custom-sidebar">
        <h3>Insérer du contenu</h3>
        {props.plugins.map((plugin, index) => {
          const Button = plugin.buttonComponent;
          return (
            <Button
              key={index}
              className="custom-sidebar-button"
              onChange={props.onChange}
              editorState={props.editorState}
            />
          );
        })}
      </div>
    );
  };

  return (
    <div className="custom-editor-container">
      <MegadraftEditor
        editorState={editorState}
        onChange={onChange}
        placeholder="Commencez à écrire..."
        actions={CUSTOM_ACTIONS} // Actions personnalisées
        plugins={CUSTOM_PLUGINS} // Plugins personnalisés
        Sidebar={CustomSidebar} // Composant personnalisé pour la barre latérale
        sidebarRendererFn={props => {
          // Personnaliser le comportement de la barre latérale
          // Retourne false pour ne pas afficher la sidebar dans certains cas
          return props.editorState.getSelection().isCollapsed();
        }}
        // Style personnalisé pour l'éditeur
        className="custom-megadraft-editor"
      />
    </div>
  );
}

export default CustomizableEditor;

Fonctionnalités principales de Megadraft

Barre d'outils riche - Formatage de texte (gras, italique, liens, etc.) et insertion de contenu multimédia
Système de plugins - Extensible via une API claire pour ajouter de nouvelles fonctionnalités
Blocs de contenu - Prise en charge native des images, vidéos et autres types de média
Barre latérale intuitive - Interface utilisateur pour accéder facilement aux plugins
Undo/Redo - Gestion de l'historique des modifications
Export/Import JSON - Sauvegarde et restauration de l'état de l'éditeur
Stylable - Hautement personnalisable via CSS

Comparaison avec Draft.js

Fonctionnalité	Draft.js	Megadraft
UI prête à l'emploi	❌ Nécessite développement manuel	✅ Interface complète incluse
Système de plugins	❌ À implémenter soi-même	✅ Inclus et extensible
Média enrichi	⚠️ Possible mais complexe	✅ Support natif pour images, vidéos, etc.
Courbe d'apprentissage	🔴 Abrupte	🟢 Modérée
Contrôle de bas niveau	✅ Contrôle total	⚠️ Parfois limité par les abstractions

Limites et considérations

Megadraft est moins activement maintenu que Draft.js lui-même
Le niveau d'abstraction peut parfois limiter certaines personnalisations avancées
La documentation est moins complète que celle de projets plus matures comme Slate.js
Les mises à jour de Draft.js peuvent parfois causer des problèmes de compatibilité

Applications concrètes