library not working properly in reactjs "^18.2.0"

[harshc99]

I am trying to install isolated-block-editor library by i am not able to use it properly and facing an error.

Does anybody have a solution for this issue, please share proper guidelines for this.

[johngodley]

Well, you've got several problems there. One is it doesn't look like you are passing the correct configuration, and the other is the same as this #225

This is unrelated to React 18

[harshc99]

can you provide me the demo code and how can i properly configure the setup

[johngodley]

All examples can be found in the readme.

[harshc99]

i did follow exact same step but still facing the same isuue

here is my code:
import React, { useState } from "react";
import IsolatedBlockEditor from "@automattic/isolated-block-editor";

const CustomEditor = () => {
const [content, setContent] = useState("");
console.log("content", content);

const settings = {
toolbar: false,
blocks: {
disallowBlocks: [],
},
};

const saveContent = (html) => {
setContent(html);
};

return (

<IsolatedBlockEditor
settings={ settings }
onSaveContent={ ( html ) => saveContent( html ) }
onError={ () => document.location.reload() }
>

);
};

export default CustomEditor;

when i remove this line onError={ () => document.location.reload() } then it will show mr this error

[johngodley]

You can find details about that here: #225

Some of those errors look like build problems.

[harshc99]

@johngodley can you help me how can i insert the image form my local machine currently i can only insert image URL but i want to insert/upload image to the local machine

here is the refrence code

import React, { useState } from "react";
import IsolatedBlockEditor from '@automattic/isolated-block-editor';
import reducer from '@wordpress/preferences/build-module/store/reducer';
import * as selectors from '@wordpress/preferences/build-module/store/selectors';
import * as actions from '@wordpress/preferences/build-module/store/actions';
import {MediaUpload} from '@wordpress/media-utils';
import './custom.css'
import '@automattic/isolated-block-editor/build-browser/core.css';

const CustomEditor = () => {
const [content, setContent] = useState("");
console.log("contentStetter", content);

const handleMediaUpload = (media) => {
  setContent(content + ``);
};

const settings = {
  iso: {
    moreMenu: false,
    customStores: [
      {
        name: 'core/preferences',
        config: {
          reducer: reducer,
          selectors: selectors,
          actions: actions,
        },
        mediaUpload: <MediaUpload onMediaUpload={handleMediaUpload} />
      }
    ],
  },
};

return (
  <div >
    <h1>Editor!</h1>
    <IsolatedBlockEditor
      style={{height: "100%"}}
      settings={ settings }
      onLoad={ ( parser, rawHandler ) => {
        console.log( 'parser: ', parser )
        console.log( 'rawHandler: ', rawHandler )
      } }
      onSaveContent={ ( content ) => {
        console.log( 'onContentSave', content )
      } }
      onError={ () => {
        console.log( 'error' )
      } }
    ></IsolatedBlockEditor>
  </div>
);

};

export default CustomEditor;

[johngodley]

Details can be found here: https://github.com/Automattic/isolated-block-editor/#media-uploader

This looks very wrong:

const handleMediaUpload = (media) => {
setContent(content + ``);
};

You will need to look at Gutenberg itself for how to handle media.

[harshc99]

i am trying to implement the insert/upload image but its not working properly i cant figure it out how can i implement the code

here the refrence code

import React, { useState } from "react";
import { MediaUpload } from "@wordpress/media-utils";
import IsolatedBlockEditor from "@automattic/isolated-block-editor";
import reducer from "@wordpress/preferences/build-module/store/reducer";
import * as selectors from "@wordpress/preferences/build-module/store/selectors";
import * as actions from "@wordpress/preferences/build-module/store/actions";
import "./custom.css";
import "@automattic/isolated-block-editor/build-browser/core.css";
import { addFilter, removeFilter } from "@wordpress/hooks";
import { mediaUpload } from "@wordpress/editor";

const CustomEditor = () => {
const settings = {
iso: {
moreMenu: false,
customStores: [
{
name: "core/preferences",
config: {
reducer: reducer,
selectors: selectors,
actions: actions,
},
},
],
},
};
settings.editor.mediaUpload = mediaUpload;
React.useEffect(() => {
addFilter(
"editor.MediaUpload",
"your-namespace/media-upload",
() => MediaUpload
);

return () => {
  removeFilter("editor.MediaUpload", "your-namespace/media-upload");
};

}, []);

return (

Editor!

<IsolatedBlockEditor
style={{ height: "100%" }}
settings={settings}
onLoad={(parser, rawHandler) => {
console.log("parser: ", parser);
console.log("rawHandler: ", rawHandler);
}}
onSaveContent={(content) => {
console.log("onContentSave", content);
}}
onError={() => {
console.log("error");
}}
>

);
};

export default CustomEditor;

i am facing this issue

@johngodley can you please share me the code so i can implement this library

[johngodley]

Sorry but I don't have any code to share here. Maybe you can look at https://github.com/Automattic/blocks-everywhere which uses this library.

[welsipieters]

@harshc99 This seems to be similar to some of the problems we had on #228