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 (

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: https://github.com/Automattic/isolated-block-editor/issues/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!

{ 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