medium-editor
medium-editor copied to clipboard
Medium-Editor in NextJs not initializing it seems
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
would like to see how to resolve this
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;