BUG : The facebook plugin is not working in the grapes js

[Sudhin35]

GrapesJS version

• [X] I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome v9

Reproducible demo link

Not there

Describe the bug

How to reproduce the bug?

1. Install the Grapes js in react app and run it
2. Make the facebook plugin components and import it in grapes js ( get the facebook page listing code from https://developers.facebook.com/docs/plugins/page-plugin/)
3. Run the application
4. Drag and drop the facebook component in editor

What is the expected behavior? After dropping the facebook component it should display the facebook page in editor

What is the current behavior? After dropping the facebook component , it is not displaying the facebook page But after the tab reload the facebook page is displayed in the editor

If is necessary to execute some code in order to reproduce the bug, paste it here below:

//Editor Code

const editor = grapesjs.init({
      container: "#builder",
      plugins: [

      ], 
      pluginsOpts: {
        "custom-gjs-basic-plugin": {
          id: self.state.id,
        },
      },
      fromElement: 1,
      allowScripts: 1,
      avoidInlineStyle: 0,
      protectedCss: ``,
      cssIcons: null,
      canvas: {
        styles: [builderCSS],
        scripts: [],
      },
      canvasCss: `.gjs-selected {outline: 2px solid #ff1430 !important;outline-offset: -2px !important;}.gjs-hovered{}`,
      storageManager: {
        id: "gjs_",
        type: "remote",
        urlStore: this.API_URL + "update_builder/" + this.state.id,
        urlLoad: this.API_URL + this.state.id,
        params: {draft: "1",},
        headers: { Authorization: localStorage.getItem("token")},
      },
      assetManager: {
        storageType: "",
        storeOnChange: true,
        storeAfterUpload: true,
        upload: process.env.REACT_APP_ASSET_PATH, //for temporary storage
        assets: [],
        uploadName: "file",
        uploadFile: function (e) {
          var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;
          var formData = new FormData();
          for (var i in files) {
            formData.append("upload", files[i]);
          }
          PageService.contentUpload(formData)
            .then((response) => {
              var imageUpload = response.data.path.replace(/[//:-]/g, "");
              var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpe?g|png|gif|bmp)$/;
              if (regex.test(imageUpload.toLowerCase())) {
                editor.AssetManager.add(response.data.path);
              } else {
                alert("Please upload valid images.");
              }
            })
            .catch((error) => {
              alert("Please upload valid images.");
            });
        },
      },
      pageManager: true,
      layerManager: {
        appendTo: ".layers-container",
      },
      traitManager: {
        appendTo: ".traits-container",
      },
      selectorManager: {
        appendTo: ".selectors-container",
        componentFirst: true,
      },
      styleManager: {
        appendTo: ".styles-container",
        clearProperties: 1,
      },
})

// Facebook component
editor.setComponents(`<div id="fb-root"></div>
              <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v13.0" nonce="aZMwnOeb"></script>
              <div class="fb-page" style="width:100%" data-href="https://www.facebook.com/facebook" data-tabs="" data-width="" 
              data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
                <blockquote cite="https://www.facebook.com/facebook" class="fb-xfbml-parse-ignore">
                <a href="https://www.facebook.com/facebook">Meta</a></blockquote></div>`)

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[Sudhin35]

@artf Please help me on this

[artf]

I see no issue when I run editor.setComponents(...FB HTML..)

Please provide a reproducible demo.

[Sudhin35]

@artf Thanks for the reply but you have added editor.setComponents(...FB HTML..) by default and then loaded the editor

Please create a component of FB HTML and Drag& drop the component in editor , it wont load

This way i have tried

const blockManager = editor.BlockManager;
 blockManager.add('facebook-block', {
    label: 'Facebook',
    category: "Basic",
    content: '<div id="fb-root"></div>
              <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v13.0" nonce="aZMwnOeb"></script>
              <div class="fb-page" style="width:100%" data-href="https://www.facebook.com/facebook" data-tabs="" data-width="" 
              data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
                <blockquote cite="https://www.facebook.com/facebook" class="fb-xfbml-parse-ignore">
                <a href="https://www.facebook.com/facebook">Meta</a></blockquote></div>',
  });

[artf]

but you have added editor.setComponents(...FB HTML..) by default and then loaded the editor

No, I used the API directly from the console and it worked.

Please create a component of FB HTML and Drag& drop the component in editor , it wont load

As you're using an HTML string without any root element (eg. wrapping div) the code is parsed and executed in order to understand where the component could be placed (without a wrapping element all children are executed, like FB script). From my understanding, the FB code wasn't made to execute itself multiple times, so when you actually drop it in the canvas, their JS doesn't work. To avoid any kind of parsing on drag, you can place the HTML code inside a component definition.

editor.BlockManager.add('facebook-block', {
  label: 'Facebook',
  category: 'Basic',
  content: {
    components: `
      <div id="fb-root"></div>
    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v13.0" nonce="aZMwnOeb"></script>
    <div class="fb-page" style="width:100%" data-href="https://www.facebook.com/facebook" data-tabs="" data-width=""
    data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
      <blockquote cite="https://www.facebook.com/facebook" class="fb-xfbml-parse-ignore">
      <a href="https://www.facebook.com/facebook">Meta</a></blockquote></div>`
  },
});

But in case you remove the component and drop the block again, it won't work, but that is due to the FB script.