Comments (22)
Using the require statement in the useEffect
hook solved this issue for me in Nextjs
. Thanks
import {useEffect} from 'react'
export default function editor() {
useEffect(() => {
const Editorjs = require('@editorjs/editorjs')
new Editorjs('editorjs')
}, [])
return(
<div id='editorjs'></div>
)
}
from react-editor-js.
This should work:
const EditorJs = dynamic(() => import("react-editor-js"), {
ssr: false,
loading: () => <p>loading editor.js ...</p>,
});
from react-editor-js.
NextJS has a function to ensure that React components work properly with dynamic imports. Something like this should work in theory:
import dynamic from "next/dynamic";
const EditorJs = dynamic(() => import("react-editor-js"));
// Use EditorJs as component
from react-editor-js.
This worked for me using the newest version.
Editor.tsx
import { useCallback, useRef } from "react";
import { createReactEditorJS } from "react-editor-js";
const Editor = () => {
const ReactEditorJS = createReactEditorJS();
const editorJS = useRef(null);
const handleInitialize = useCallback((instance) => {
editorJS.current = instance;
}, []);
const handleSave = useCallback(async () => {
const savedData = await editorJS.current.save();
}, []);
return <ReactEditorJS onInitialize={handleInitialize} />;
};
export default Editor;
index.tsx
import React from "react";
import dynamic from "next/dynamic";
const EditorJs = dynamic(() => import("./Editor"), {
ssr: false,
});
const index = () => {
return <EditorJs />;
};
export default index;
from react-editor-js.
I use import loadable from '@loadable/component'
example :
import loadable from '@loadable/component'
const EditorJs = loadable(() => import('~/utils/editors'))
from react-editor-js.
Make editor in another component and import it in your main page as a dynamic component
this is working fine while ssr and without any type error because importing react-editor-js as a dynamic component it loses its type definitions
eg: my Editor component ( RTE.tsx )
import EditorJs from "react-editor-js";
import { EDITOR_JS_TOOLS } from "./constants";
export default function RTE_Component() {
return (
<EditorJs
tools={EDITOR_JS_TOOLS}
data={[
time: 1556098174501,
blocks: [{ type: "header", data: { text: "Guides", level: 2 } }],
version: "2.12.4",
]}
inlineToolbar={true}
hideToolbar={true}
/>
);
}
my index.tsx
import dynamic from "next/dynamic";
import Head from "next/head";
const RTE_Component = dynamic(() => import("components/RTE"), { ssr: false });
export default function Home() {
return (
<>
<Head>Localhost - Home</Head>
<form action="http://localhost:3000/api/post" method="post">
<RTE_Component />
</form>
</>
);
}
from react-editor-js.
Update: While this is being patched you can add the following to your gatsby-node.js
file (if you're using Gatsby). If you aren't using Gatsby, you can use https://github.com/gregberge/loadable-components
exports.onCreateWebpackConfig = ({ stage, actions, loaders }) => {
if (stage === 'build-html') {
actions.setWebpackConfig({
module: {
rules: [
{
test: /react-editor-js/,
use: loaders.null(),
},
{
test: /@editorjs/,
use: loaders.null(),
},
],
},
});
}
};
You can read more about this code here: https://www.gatsbyjs.org/docs/debugging-html-builds/#fixing-third-party-modules
from react-editor-js.
I've been using NextJS and SSR with Editor JS and this works for me
import React, { useEffect, useRef, useState } from 'react';
import EditorJs from 'react-editor-js';
import List from '@editorjs/list';
import Paragraph from '@editorjs/paragraph';
const EDITOR_JS_TOOLS = {
paragraph: {
class: Paragraph,
inlineToolbar: true,
},
list: {
class: List,
inlineToolbar: true,
},
};
export default ({
id,
label,
labelStyle,
editorContainerStyle,
getValue,
Data,
}) => {
const instanceRef = useRef(null);
async function handleSave() {
// const savedData = await
instanceRef.current
.save()
.then((outputData) => {
function replaceAll(str, find, replace) {
function escapeRegExp(string) {
return string.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
}
return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}
let stringData = JSON.stringify(outputData);
let formattedData = replaceAll(stringData,'<b>','<strong>');
formattedData = replaceAll(stringData, '<b/>', '<strong/>');
getValue(formattedData);
})
.catch((error) => {
console.log('Saving failed: ', error);
});
}
console.log(Data)
return (
<div>
<style global jsx>
{`
.ce-block__content {
max-width: 100%;
margin: 0 5rem;
}
.ce-toolbar__content {
max-width: 100%;
margin: 0 3.5rem;
position: relative;
}
.editor-style {
border-radius: 0.25rem;
border-color: #ced4da;
}
`}
</style>
<label
htmlFor={id}
className={
typeof labelStyle === 'undefined' || labelStyle === null
? `label-style`
: `label-style {labelStyle}`
}>
{label}
</label>
<div
className={`border rounded ${
typeof editorContainerStyle !== undefined
? editorContainerStyle
: null
}`}>
<EditorJs
holder={id}
instanceRef={(instance) => (instanceRef.current = instance)}
data={
typeof Data === 'string' && Data.length !== 0
? console.log(JSON.parse(Data))
: Data
}
onChange={(e) => handleSave(e)}
tools={EDITOR_JS_TOOLS}>
<div id={id} />
</EditorJs>
</div>
</div>
);
};
from react-editor-js.
This is an open issue with @editorjs codex-team/editor.js#1036
from react-editor-js.
react-editor-js is support SSR partially.
const ReactEditorJS = createReactEditorJS();
<ReactEditorJS holder="ssrHolder" /> // works fine!
from react-editor-js.
Hey @Moikapy,
Can you please share the code? I copied your above snippet in an index.js
file for NextJS but got the below error -
Server Error
ReferenceError: window is not defined
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Thanks
from react-editor-js.
Hi! everyone.
By default, editor-js does not support SSR. But i think if modern fornt-end library, should help users not to care.
Therefore, this issue not close differently from other related issues (#31, #1), and will be updated asap.
Thanks!
from react-editor-js.
NextJS has a function to ensure that React components work properly with dynamic imports. Something like this should work in theory:
import dynamic from "next/dynamic"; const EditorJs = dynamic(() => import("react-editor-js")); // Use EditorJs as component
This will work @nithinkashyapn
from react-editor-js.
Hi guys, question, editor is ok now, but, when i try to load a plugin, app crashes, asking for "window" again
from react-editor-js.
@bilordigor the solution by @zakiAzfar helps with the plugins as well: plugins have to be imported and configured in the component imported dynamically with ssr disabled.
from react-editor-js.
Make the editorJS a child component, then you just need to import dynamically in your pages.
from react-editor-js.
I am also running into issues in running nextJs with this editorComponent.
I am running :
import dynamic from "next/dynamic";
const EditorJs = dynamic(() => import("react-editor-js"));
// Use EditorJs as component
and it should work, but it doesn't which is weird ...
RE:EDIT:
Actually it works now. I have downgraded to version 1.9.0. I was running in version 2. So maybe there is something wrong with version 2. Error is something like
Check your code at Editor.js:11. at Editor at LoadableImpl
from react-editor-js.
If I need initial data on ssr ?
from react-editor-js.
const tools = dynamic(() => import("./tools"), { ssr: false });
from react-editor-js.
How to do dynamic import in nextjs 13 beta version?
What would be the equivalent code in beta next 13 js?
// let CustomEditor = dynamic(() => import("../../components/tools"), {
// ssr: false,
// });
.....
codex-team/editor.js#2223 (comment)
const tools = dynamic(() => import("./tools"), { ssr: false });
from react-editor-js.
Anyone tried rendering multiple holders with dynamic divs/holder ids? - If I disable SSR I get TypeError:EditorJS is not a constructor.
from react-editor-js.
@Chiranjeev-droid
Wackiest solution, couldn't think of anything else though.
If anyone else knows better approach for Next 13-14, please share and tag me
"use client";
import { createReactEditorJS } from "react-editor-js";
import { EDITOR_JS_TOOLS } from "./tools";
import { useEffect } from "react";
import ReactDOM from "react-dom";
const ReactEditorJS = createReactEditorJS();
function Editor({ blocks }: any) {
useEffect(() => {
const holder = document.getElementById("holder");
if (!holder) return;
const Editor = (
<ReactEditorJS
tools={EDITOR_JS_TOOLS}
defaultValue={blocks}
placeholder={`Write from here...`}
minHeight={900}
inlineToolbar={true}
/>
);
const portalElement = ReactDOM.createPortal(Editor, holder);
// @ts-ignore
ReactDOM.createRoot(holder).render(portalElement);
}, [blocks]);
return <></>;
}
export default Editor;
P.S. Don't forget to set position of holder to relative
from react-editor-js.
Related Issues (20)
- Chrome: [Violation] Added non-passive event listener... breaking onChange
- React Editor JS in his second version does not render i18n correctly HOT 1
- Can't write anything in editorjs and it comes 0 height HOT 6
- Property or signature expected. TS1131 HOT 1
- Weird symbols appear instead....
- Cannot assign to read only property 'current' of object '#<Object>' HOT 1
- Using multiple ReactEditorJS instances
- How to add a new tool? HOT 1
- Option to add subscript and superscript
- Error: element with ID «editorjs» is missing. Pass correct holder's ID. HOT 4
- Not working with React.StrictMode HOT 7
- Unable to toggle readonly on 2.1.0
- How to change side of the block adding panel?
- How to get stored value?
- expose `renderFromHTML` into the `EditorCore` interface
- Width issue HOT 1
- Render custom tools
- Compatibility issue with react-router-dom
- a
- Scroll top on focusing input element HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-editor-js.