Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

library not working properly in reactjs "^18.2.0" #242

Open
harshc99 opened this issue Oct 16, 2023 · 10 comments
Open

library not working properly in reactjs "^18.2.0" #242

harshc99 opened this issue Oct 16, 2023 · 10 comments

Comments

@harshc99
Copy link

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.

editorIssue
editorissue2

@johngodley
Copy link
Member

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
Copy link
Author

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

@johngodley
Copy link
Member

All examples can be found in the readme.

@harshc99
Copy link
Author

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;
image

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

image

@johngodley
Copy link
Member

You can find details about that here: #225

Some of those errors look like build problems.

@harshc99
Copy link
Author

@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
Copy link
Member

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
Copy link
Author

harshc99 commented Oct 19, 2023

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

image

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

@johngodley
Copy link
Member

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
Copy link

welsipieters commented Oct 23, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants