Develop Reference

Gatsby Static Image(gatsby-plugin-image) inside MDX

Recently I have started working with Gatsby and right now I'm trying things with MDX, In my MDX file i can work with Gatsby Image throught GraphQL, but I want to use Static Image from gatsby-plugin-image and I'm getting errors like this:
react_devtools_backend.js:2557 Image not loaded
https://images.unsplash.com/photo-1597305877032-0668b3c6413a?w=1300
When i try to implement this image inside .tsx it works so I'm wondering if it is possible or not.
gatsby-config
"gatsby-remark-images",
{
resolve: "gatsby-plugin-mdx",
options: {
defaultLayouts: {
default: require.resolve("./src/components/common/Layout.tsx")
},
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-images`,
options: {},
},
],
}
},
{
resolve: "gatsby-source-filesystem",
options: {
name: "images",
path: `${__dirname}/src/images/`,
},
__key: "images",
},
Then in test.mdx I'm trying to use Static Image like this:
<StaticImage
src={'https://images.unsplash.com/photo-1597305877032-0668b3c6413a?w=1300'}
alt={''}
width={3840}
height={1000}
layout={'constrained'}
/>

You can't use gatsby-plugin-image directly in an MDX document. This post on the Gatsby blog explains how to use it indirectly by passing in image reference props via your Frontmatter.
Personally I've been able to do it like so:
This example only loads local images, refer to the blog post for how to reference remote ones as it's more complex.
Template Component
import React from "react";
import { graphql } from "gatsby";
import { MDXRenderer } from "gatsby-plugin-mdx";
import Layout from "../components/layout";
const Game = ({ data }) => {
const { mdx } = data;
const { frontmatter, body } = mdx;
return (
<Layout title={frontmatter.title}>
<span className="date">{frontmatter.date}</span>
<MDXRenderer localImages={frontmatter.embeddedImagesLocal}>
{body}
</MDXRenderer>
</Layout>
);
};
export const pageQuery = graphql`
query($slug: String!) {
mdx(slug: { eq: $slug }) {
slug
body
frontmatter {
date(formatString: "MMMM DD, YYYY")
title
embeddedImagesLocal {
childImageSharp {
gatsbyImageData
}
}
}
}
}
`;
export default Game;
MDX Document
---
title: Death Stranding
author: Hideo Kojima
date: 2021-05-06
template: game
embeddedImagesLocal:
- '../images/20210513035720_1.jpg'
---
import { getImage, GatsbyImage } from 'gatsby-plugin-image';
A great game from Hideo Kojima.
<GatsbyImage alt='Sam in a destroyed mall' image={getImage(props.localImages[0])} />

You can use the gatsby-remark-images plugin with gatsby-plugin-mdx and it handles the images for you.
Install the plugin, then in gatsby-config.js, update the gatsby-plugin-mdx to something like this:
{
resolve: 'gatsby-plugin-mdx',
options: {
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 900,
},
},
],
plugins: [`gatsby-remark-images`]
},
},
Then images work as expected using the ![alt](url) markdown format.
Unfortunately the maxWidth is fixed across the site which wasn't ideal for me. I'm using the #bonobolabs/gatsby-remark-images-custom-widths fork which lets you specify the image width in the MDX file with an HTML style img tag:
<img src="./image.jpg" alt="My image" width="500px"/>
I believe it's only 'width' that is the extra property this gives you.

How can I display images in React.js app from a json file?

I’m developing a little website/portfolio on React.js and I’m having some issues to display images that are stored in a json file.
The console shows the files but we can’t see the images in the browser !
Can anyone lend me a hand please ?
Here’s my json file:
export const GaleriesData = [
{
id: 1,
tableaux: [
“../assets/img/galeries/aformaimediata/aformaimediata1.jpg”,
...
“../assets/img/galeries/aformaimediata/aformaimediata8.jpg”,
],
},
{
id: 2,
tableaux: [
“../assets/img/galeries/espiritoarte/espiritoarte1.jpg”,
...
“../assets/img/galeries/espiritoarte/espiritoarte10.jpg”,
],
},
];
And here’s my component:
import React, { useState } from ‘react’;
import FbImageGrid from ‘react-facebook-photo-grid’;
import { GaleriesData } from ‘../data/galeriesData.js’
const Galerie = (props) => {
const [currentGalerie] = useState(GaleriesData);
const galerie = currentGalerie[props.galerieNumber].tableaux;
return (
<div>
<FbImageGrid images={galerie} maxWidth={800} />
</div>
)
}
export default Galerie

I can't comment because of the 50 reputation thing. But you do know that the import of the image for example, ../assets/img/galeries/aformaimediata/aformaimediata1.jpg is relative to where the JSON file is, not to React component?

EditorJS in NextJS not able to load plugins

I am trying to get EditorJS working in NextJS. The editor loads fine without plugins, having the only paragraph as a block option. However, when I attempt to add plugins via tools prop console throws the following warning:
editor.js?9336:2 Module Tools was skipped because of TypeError: Cannot read property 'prepare' of undefined
When I click on the editor in the browser, it is throwing:
Uncaught TypeError: Cannot read property 'holder' of undefined
I have tested editor plugins in the normal React app, and they load fine. Meaning that the problem is in EditorJS and NextJS import and handling of plugins. I have tried to import editor and plugins in componentDidMount hook using require but had the same problem as with NextJS dynamic imports. Attempted to get component using React ref but found that currently NextJS has problems with getting components' refs, Tried suggested workaround but still had no result. The instance of the editor is not available until onChange is triggered, so plugins just cannot hook into the editor due to that 'prepare' property or the whole editor are being undefined until an event on editor has happened, but the editor outputs into the console that it is ready.
My component's code:
import React from "react";
import dynamic from "next/dynamic";
const EditorNoSSR = dynamic(() => import("react-editor-js"), { ssr: false });
const Embed = dynamic(() => import("#editorjs/embed"), { ssr: false });
class Editor extends React.Component {
state = {
editorContent: {
blocks: [
{
data: {
text: "Test text",
},
type: "paragraph",
},
],
},
};
constructor(props) {
super(props);
this.editorRef = React.createRef();
}
componentDidMount() {
console.log(this.editorRef.current);
console.log(this.editorInstance);
}
onEdit(api, newData) {
console.log(this.editorRef.current);
console.log(this.editorInstance);
this.setState({ editorContent: newData });
}
render() {
return (
<EditorNoSSR
data={this.state.editorContent}
onChange={(api, newData) => this.onEdit(api, newData)}
tools={{ embed: Embed }}
ref={(el) => {
this.editorRef = el;
}}
instanceRef={(instance) => (this.editorInstance = instance)}
/>
);
}
}
export default Editor;
Is there any solution to this problem? I know SSR is challenging with client side rendering of components that access DOM, but there was condition used that checked whether window object is undefined, however, it does not look like an issue in my situation.
UPDATE:
I have found a solution but it is rather not a NextJS way of solving the problem, however, it works. It does not require a react-editorjs and implemented as creation of EditorJS instance as with normal EditorJS.
class Editor extends React.Component {
constructor(props) {
super(props);
this.editor = null;
}
async componentDidMount() {
this.initEditor();
}
initEditor = () => {
const EditorJS = require("#editorjs/editorjs");
const Header = require("#editorjs/header");
const Embed = require("#editorjs/embed");
const Delimiter = require("#editorjs/delimiter");
const List = require("#editorjs/list");
const InlineCode = require("#editorjs/inline-code");
const Table = require("#editorjs/table");
const Quote = require("#editorjs/quote");
const Code = require("#editorjs/code");
const Marker = require("#editorjs/marker");
const Checklist = require("#editorjs/checklist");
let content = null;
if (this.props.data !== undefined) {
content = this.props.data;
}
this.editor = new EditorJS({
holder: "editorjs",
logLevel: "ERROR",
tools: {
header: Header,
embed: {
class: Embed,
config: {
services: {
youtube: true,
coub: true,
},
},
},
list: List,
inlineCode: InlineCode,
code: Code,
table: Table,
quote: Quote,
marker: Marker,
checkList: Checklist,
delimiter: Delimiter,
},
data: content,
});
};
async onSave(e) {
let data = await this.editor.saver.save();
this.props.save(data);
}
render() {
return (
<>
<button onClick={(e) => this.onSave(e)}>Save</button>
<div id={"editorjs"} onChange={(e) => this.onChange(e)}></div>
</>
);
}
}
This implementation works in NextJS
I will update code if I find a better solution.
UPDATE 2:
The answer suggested by Rising Odegua is working.

You have to create a seperate component and then import all your tools there:
import EditorJs from "react-editor-js";
import Embed from "#editorjs/embed";
import Table from "#editorjs/table";
import List from "#editorjs/list";
import Warning from "#editorjs/warning";
import Code from "#editorjs/code";
import LinkTool from "#editorjs/link";
import Image from "#editorjs/image";
import Raw from "#editorjs/raw";
import Header from "#editorjs/header";
import Quote from "#editorjs/quote";
import Marker from "#editorjs/marker";
import CheckList from "#editorjs/checklist";
import Delimiter from "#editorjs/delimiter";
import InlineCode from "#editorjs/inline-code";
import SimpleImage from "#editorjs/simple-image";
const CustomEditor = () => {
const EDITOR_JS_TOOLS = {
embed: Embed,
table: Table,
marker: Marker,
list: List,
warning: Warning,
code: Code,
linkTool: LinkTool,
image: Image,
raw: Raw,
header: Header,
quote: Quote,
checklist: CheckList,
delimiter: Delimiter,
inlineCode: InlineCode,
simpleImage: SimpleImage
};
return (
<EditorJs tools={EDITOR_JS_TOOLS} />
);
}
export default CustomEditor;
Then in your NextJS page, use a dynamic import like this:
let CustomEditor;
if (typeof window !== "undefined") {
CustomEditor = dynamic(() => import('../src/components/CustomEditor'));
}
And you can use your component:
return (
{CustomEditor && <CustomEditor />}
)
Source : https://github.com/Jungwoo-An/react-editor-js/issues/31

How to configure the upload adapter in CKEditor 5 with ReactJS?

EDIT: I've opened an issue on Github: https://github.com/ckeditor/ckeditor5-editor-classic/issues/98
I've spent about 2 days trying to figure this out.
The editor works fine, but when I try to add an image there's an error:
filerepository-no-upload-adapter: Upload adapter is not defined. Read
more:
https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-filerepository-no-upload-adapter
I browsed the documentation for hours, but I could not figure out a solution. You can see below the steps in the documentation I tried to follow.
This is my code:
import React, { Component } from 'react';
import CKEditor from '#ckeditor/ckeditor5-react';
import ClassicEditor from '#ckeditor/ckeditor5-build-classic';
console.log(ClassicEditor.builtinPlugins.map( plugin => plugin.pluginName ));
class EditorComponent extends Component {
constructor(props) {
super(props);
this.state = {
id: props.id,
content: props.content,
handleWYSIWYGInput: props.handleWYSIWYGInput,
editor: ClassicEditor
}
}
render() {
return (
<div className="Editor-content">
<CKEditor
editor={ this.state.editor }
data={this.state.content}
onInit={ editor => {
// You can store the "editor" and use when it is needed.
console.log( 'Editor is ready to use!', editor );
} }
onChange={ ( event, editor ) => {
const data = editor.getData();
//this.state.handleWYSIWYGInput(this.props.id, data);
console.log( { event, editor, data } );
console.log(this.state.content);
} }
onBlur={ editor => {
console.log( 'Blur.', editor );
} }
onFocus={ editor => {
console.log( 'Focus.', editor );
} }
/>
</div>
);
}
}
export default EditorComponent;
If you open the link in the error it says:
If you see this warning when using one of the CKEditor 5 Builds it
means that you did not configure any of the upload adapters available
by default in those builds.
See the comprehensive "Image upload overview" to learn which upload
adapters are available in the builds and how to configure them.
Then you can follow this link: https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/image-upload.html
Which will give you a few options to configure the upload adapter. I'd like to use CKFinder, hence: https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/ckfinder.html
And then you read this:
This feature is enabled by default in all builds.
So I suppose the feature is present in all builds, but still needs to be "configured". How do I do this in ReactJS?
I tried to implement the code linked in the page, but the syntax is not working in ReactJS and anyway adding import CKFinder from '#ckeditor/ckeditor5-ckfinder/src/ckfinder'; would generate another error:
ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated.
Read more:
https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules
The code in the documentation's page:
import CKFinder from '#ckeditor/ckeditor5-ckfinder/src/ckfinder';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ CKFinder, ... ],
// Enable the "Insert image" button in the toolbar.
toolbar: [ 'imageUpload', ... ],
ckfinder: {
// Upload the images to the server using the CKFinder QuickUpload command.
uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json'
}
} )
.then( ... )
.catch( ... );
How can I make it work?

In order to make it work you should add only:
config={{ckfinder: {
// Upload the images to the server using the CKFinder QuickUpload command
// You have to change this address to your server that has the ckfinder php connector
uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json'
}}}
Adding this part of code will stop showing up the upload adapter error. This won't upload pictures until you set up the server side. You can follow these instructions to install the php connector: https://ckeditor.com/docs/ckfinder/ckfinder3-php/quickstart.html
The full code:
import React, { Component } from 'react';
import CKEditor from '#ckeditor/ckeditor5-react';
import ClassicEditor from '#ckeditor/ckeditor5-build-classic';
console.log(ClassicEditor.builtinPlugins.map( plugin => plugin.pluginName ));
class EditorComponent extends Component {
constructor(props) {
super(props);
this.state = {
id: props.id,
content: props.content,
handleWYSIWYGInput: props.handleWYSIWYGInput,
editor: ClassicEditor
}
}
render() {
return (
<div className="Editor-content">
<CKEditor
editor={ this.state.editor }
data={this.state.content}
config={{ckfinder: {
// Upload the images to the server using the CKFinder QuickUpload command.
uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json'
}}}
onInit={ editor => {
// You can store the "editor" and use when it is needed.
console.log( 'Editor is ready to use!', editor );
} }
onChange={ ( event, editor ) => {
const data = editor.getData();
//this.state.handleWYSIWYGInput(this.props.id, data);
console.log( { event, editor, data } );
console.log(this.state.content);
} }
onBlur={ editor => {
console.log( 'Blur.', editor );
} }
onFocus={ editor => {
console.log( 'Focus.', editor );
} }
/>
</div>
);
}
}
export default EditorComponent;

I think you are confused about how to configure the ckeditor setting in React. Mostly people are like me at the start but to do configuration in the ckeditor for react component you have to follow it like this. I take config as an object which take another object inside that's how we add and remove plugins.
Here's an example in the documentation of CKeditor 5.
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html#using-ckeditor-5-source
<CKEditor
data="<p>Editor' content</p>"
config={ {
plugins: [ CKFinder, ... ],
toolbar: [ 'imageUpload', ... ],
ckfinder: {
uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json'
}
} }
/>

Warning: React does not recognize the `previousStep` prop on a DOM element

import React, { Component } from 'react';
import ChatBot from 'react-simple-chatbot';
import { Switch, Route, BrowserRouter } from 'react-router-dom';
import Dropzone from 'react-dropzone';
class Form extends Component {
constructor(props){
super(props);
this.state = {
// some other states
file: ''
};
}
onDrop(acceptedFiles){
var file = acceptedFiles[0];
const reader = new FileReader();
reader.onload = () => {
const fileAsBinaryString = reader.result;
this.setState({
file: fileAsBinaryString
});
//console.log(fileAsBinaryString);
}
reader.readAsBinaryString(file);
//console.log(file);
}
render() {
return(
<ChatBot
steps={[
{
id: '1',
message: 'You can add custom components',
trigger: '2',
},
{
id: '2',
component: (
<div>
<Dropzone onDrop={this.onDrop.bind(this)} />
</div>
),
end: true,
},
]}
/>
)
}
}
I am trying to use react-dropzone within react-simple-chatbot, but when I upload a file it shows 2 warnings:
React does not recognize the previousStep prop on a DOM element.
React does not recognize the triggerNextStepenter image description here prop on a DOM element.
I am able to find similar problems but their solutions are not working out for me. How should I make it work?
Edit: I have added an example similar to my approach.

Hello Dear your question is not not clear to me as it lacks lots of information,It would have better if you put your code here. I don't know did you follow react-dropzone documentation. In their documentation they cleared how to use it in your application. Try to do below procedure. In my case it is working without showing any warning.
import Dropzone from 'react-dropzone'
//OTHERS IMPORT FILE
// ... ... ...
class AddEmployee extends Component {
constructor(props) {
super(props);
this.state = {
photo: ""
}
}
// OTHERS FUNCTIONS
// ... ... ....
onDrop(files) {
const file = files.find(f => f)
let reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = () => {
this.setState({
photo: reader.result,
})
}
}
render() {
return (
// OTHERS DIV
// ... ... ... ...
<div className="dropzone">
<Dropzone onDrop={(e) => this.onDrop(e)}>
{this.state.photo != "" ? <img width={195} height={195} src={this.state.photo} /> : <p>Try dropping some photo here or click to select files to upload</p>
}
</Dropzone>
</div>
// OTHERS DIV
// ... ... ... ...
)
}
}