Medium-Editor in NextJs not initializing it seems

[philmetzger]

Description

I am trying to use medium-editor 5.23.3 in NextJS like the following:

import React, { Component } from 'react';
import MediumEditor from 'medium-editor';

class Editor extends Component {
    render() {
        const editor2 = new MediumEditor('.editable');
        console.log(editor2);
        return (
            <div className="editor">
                <div className="editable" />
            </div>
        );
    }
}

export default Editor;

Now the console.log shows medium editor but I dont see anything on the page. The div is empty. I load this Editor component using NoSSR:

const EditorNoSSR = dynamic(() => import("../../components/common/Editor"), { ssr: false });

Any ideas?

Versions

• medium-editor: 5.23.3
• browser: Chrome
• OS:Ubuntu

[vbylen]

would like to see how to resolve this

[i-am-mani]

This works for me in NextJs

import * as React from "react";
import MediumEditor from "medium-editor";
import "medium-editor/dist/css/medium-editor.css";
import "medium-editor/dist/css/themes/default.css";
import classNames from "classnames";

const Article: React.FC = () => {
  const [editor, setEditor] = React.useState<any>();

  const onRefChange = React.useCallback((node) => {
    if (node === null) {
        setEditor(null)
    } else {
      if (editor == null) {
        const et = new MediumEditor(node);
        setEditor(et);
      }
    }
  }, []); // adjust deps

  return (
    <div className="w-full bg-[#21212B] text-white h-[500px] overflow-y-scroll px-4 py-3">
      <div
        className={classNames(
          "w-full h-full prose text-white",
          "prose-headings:text-white ",
          "prose-a:text-[#94C7E9]",
          "focus:outline-none"
        )}
        ref={onRefChange}
      ></div>
    </div>
  );
};
export default Article;