customize editor.js in react

Question

Hello guys I'm new to react I have a project it's basically a website like Notion and I'm using editor.js but I want to add customization to the blocs like text size, font style and others to each bloc. So is that possible and how? I really did not try much I just added editor.js and I made some blocs like heading and text.

Answer 1

Yes, it's possible to add customization options like text size, font style, and others to each block in your editor.js-based project in React

Here's a simplified example of how you might approach this:

import React, { useState } from 'react';
import EditorJS from '@editorjs/editorjs';

const CustomizableEditor = () => {
  const [editor, setEditor] = useState(null);

  useEffect(() => {
    const editorInstance = new EditorJS({
      // Initialize editor with your custom blocks and configurations
      // Refer to editor.js documentation for details
    });
    setEditor(editorInstance);

    return () => {
      if (editorInstance) {
        editorInstance.destroy();
      }
    };
  }, []);

  const handleFontSizeChange = (fontSize) => {
    // Handle font size change logic here
  };

  const handleFontStyleChange = (fontStyle) => {
    // Handle font style change logic here
  };

  return (
    <div>
      {/* UI for customizations */}
      <div>
        <label>Font Size:</label>
        <select onChange={(e) => handleFontSizeChange(e.target.value)}>
          <option value="small">Small</option>
          <option value="medium">Medium</option>
          <option value="large">Large</option>
        </select>
      </div>
      <div>
        <label>Font Style:</label>
        <select onChange={(e) => handleFontStyleChange(e.target.value)}>
          <option value="normal">Normal</option>
          <option value="italic">Italic</option>
          <option value="bold">Bold</option>
        </select>
      </div>

      {/* Editor container */}
      <div id="editorjs" />
    </div>
  );
};

export default CustomizableEditor;