React

Welcome to the React-specific documentation for On-Codemerge, a flexible web editor designed for smooth integration into React applications.

Getting Started with React

To incorporate On-Codemerge into your React project, begin by installing it.

Installation

Execute the following command in your React project directory to install on-codemerge:

npm i --save on-codemerge

React Integration Example

Here is a straightforward example demonstrating how to integrate On-Codemerge into a React project:

MyEditorComponent.jsx

import React, { useEffect, useRef, useState } from 'react';
import EditorCore from 'on-codemerge';
import TextStylingButton from 'on-codemerge/textStylingButton';
import TableButton from 'on-codemerge/tableButton';

const MyEditorComponent = ({ value, onValueChange }) => {
  const editorRef = useRef(null);
  const [editor, setEditor] = useState(null);

  useEffect(() => {
    if (editorRef.current && !editor) {
      const newEditor = new EditorCore(editorRef.current);
      newEditor.registerModule(new TextStylingButton());
      newEditor.registerModule(new TableButton());
      // ... register other modules

      newEditor.subscribeToContentChange((newContent) => {
        console.log('Content changed:', newContent);
        if (onValueChange) {
          onValueChange(newContent);
        }
      });

      setEditor(newEditor);
    }

    // Set initial content
    if (editor && value) {
      editor.setContent(value);
    }
  }, [editor, value]);

  return <div ref={editorRef}></div>;
};

export default MyEditorComponent;

In this React component, we use the useRef hook to create a reference to the DOM element that will host the editor. The useEffect hook is then utilized to instantiate the editor with EditorCore and attach it to the referenced element. Modules such as TextStylingButton and TableButton are registered to add functionality to the On-Codemerge editor. The subscribeToContentChange method is used to handle content changes, allowing for responsive and dynamic content editing within your React application.