SG-Block-Editor | React WYSIWYG blocs editor

This is a simple, easy to use, WYSIWYG blocs editor to let user create HTML content. The data can be saved in database as a JSON object or directly in html (need to set up render functions for each block).

This editor comes with 3 default blocks : Image, Text, Group. You can add some more extraBlocks easyli or customize existing ones.

Live Demo

Installation

npm install
git submodule init
git submodule update
npm run dev

Usage

import { useRef } from "react";
import { BlockEditor } from "sg-block-editor";

const Editor = ({ defaultContent }) => {

    const editorRef = useRef(null);

    const handleEditorChange = () => {
        console.log("HTML Content", editorRef.current?.getHTMLValue());
        console.log("JSON Content", editorRef.current?.getJSONValue());
    };
    
    return (

        <BlockEditor 
            onChange={ handleEditorChange }
            data={ defaultContent }
            ref={ editorRef }
            extraBlocks={/* add an object that define extra blocks and it will be added/remplaced to default blocks */}
        />
    )
}

TODO : write on readme how to default block or even add some write on readme how to change default imageselector on ImageBlock

Props

Prop Name	Type	Description
data	BlockType[] | null | undefined	Initial content to populate the editor, in JSON format.
onChange	(data: BlockType[]) => void | undefined	Callback function that is called whenever the content of the editor changes.
ref	RefObject | undefined	Reference to access editor methods like getHTMLValue() and getJSONValue().
extraBlocks	Record<string, EditorBlock> | undefined	An object defining additional custom blocks or modifications to existing blocks.

Customization

Adding Custom Blocks

To add custom blocks, pass an extraBlocks object to the BlockEditor component.

import ImageIcon from 'icons';
import { useEditor } from 'sg-block-editor';

// example of a really simple render fn
const renderHTMLCustomBlock = (val) => val.html;

// example of a custom html block
const CustomBlock = ({ isActive, block}) => {
    
    const { updateBlock } = useEditor;
    const { value, blockID } = block;

    return (
        <div className="sg-block__customBlock">
            <pre>
                <code 
                    contenteditable="true"
                    onInput={ (e) => updateBlock(blockID, { value: html: e.target.innerHTML }) }
                >
                    {value.html}
                </code>
            </pre>
        </div>
    )
}

// Example of the extra blocks object to define the newly created custom block

const extraBlocks = {
    customBlock: {
        name: 'Custom Block',
        type: 'customBlock',
        icon: ImageIcon,
        render: renderHTMLCustomBlock,
        editor: CustomBlock,
        isResizable: false,
        hasSpacingOptions: true,
        defaultValue: {
            html: '<p>Default content</p>',
        },
        acceptChildren: false
    },
};

Modifying the Default Image Selector

You can customize the default image selector used in the ImageBlock by providing your own selector function.

import ImageBlock from 'sg-block-editor';
import defaultBlocks from 'sg-block-editor';

const CustomImageSelector = ({ children, value, onSelect, className }) => {

    const [currentImage, setCurrentImage] = useState(value);

    useEffect(() => {
        if (onSelect && currentImage && currentImage.src !== value?.src) onSelect(currentImage);
    }, [currentImage])

    const handleImageclick = () => {
        // Do some logic to open an image selector and set currentImage on selection
    }

    return (
        <div className={className} onClick={handleImageclick}>
            {children}
        </div>
    )
}

const CustomImageBlock = ({isActive, block}) => {
    return (
        <ImageBlock
            isActive={isActive}
            block={block}
            ImageSelector={CustomImageSelector}
        />
    )
};

const extraBlocks = {
    image: {
        ...defaultBlocks.image,
        editor: CustomImageBlock
    },
};

This customization allows you to integrate your own image selection logic, such as connecting to a third-party service or file uploader.

Todo

• Add HTML Render functions on default blocks
• Add Tests