Skip to main content

Next.js

Welcome to the Next.js-specific documentation for On-Codemerge, a sophisticated web editor optimized for integration with Next.js, the React framework for building server-side rendered applications.

Getting Started with Next.js​

To include On-Codemerge in your Next.js project, start by installing the package.

Installation​

Run the following command in your Next.js project directory:

npm i --save on-codemerge

Next.js Integration Example​

Here’s how to integrate On-Codemerge into a Next.js project:

  1. Create a React Component: Since On-Codemerge is a web editor that will run in the browser, it's ideal to create a React component for it.
components/OnCodemergeEditor.jsx
import React, { useEffect, useRef } from 'react';
import EditorCore from 'on-codemerge';
import TextStylingButton from 'on-codemerge/textStylingButton';
import TableButton from 'on-codemerge/tableButton';

const OnCodemergeEditor = () => {
  const editorRef = useRef(null);

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

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

      // Optional: Set initial content
      editor.setContent("Initial content goes here");

      return () => editor.destroy();
    }
  }, []);

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

export default OnCodemergeEditor;

This component uses React hooks to initialize On-Codemerge. The useEffect hook handles the lifecycle of the editor, and the useRef hook is used to reference the DOM element where the editor will be mounted.

  1. Dynamic Import with Next.js: To ensure proper server-side rendering, dynamically import the editor component with SSR disabled.
pages/index.jsx
 import dynamic from 'next/dynamic';

 const OnCodemergeEditor = dynamic(() => import('../components/OnCodemergeEditor'), { ssr: false });

 const HomePage = () => {
   return (
     <div>
       <h1>My Next.js Page with On-Codemerge</h1>
       <OnCodemergeEditor />
     </div>
   );
 };

 export default HomePage;

In this setup, dynamic is used from Next.js to import the On-Codemerge editor component. Setting { ssr: false } ensures that the component is only rendered on the client side, avoiding conflicts with server-side rendering.

This approach ensures that On-Codemerge is seamlessly integrated into a Next.js application, providing a rich text editing experience in a server-side rendering context with the React framework.