custom component not able to display at first rendering in GrapesJs studio

[MdShadabAhamad]

I am not able to see my custom component at the first time of my react application rendering , when i try to search it on the block section then its appers and after seraching it can be visible in block section . you can find my code below:-
import React, { useRef, useState, useEffect } from 'react';
import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';

export default function App() {
const [editor, setEditor] = useState(null);
const editorRef = useRef(null);

const handleEditorReady = (editorInstance) => {
setEditor(editorInstance);
editorRef.current = editorInstance;

// Add custom component when editor is ready
addCustomComponent(editorInstance);

// Add custom styles and configure StyleManager
setupStyleManager(editorInstance);

// Ensure the 'Basic' category is open
openCategory(editorInstance, 'Basic');

};

useEffect(() => {
if (editor) {
const handleImport = () => {
const project = editor.getProject();
// You can still use project data here if needed
};

  editor.on('import:complete', handleImport);

  return () => {
    editor.off('import:complete', handleImport);
  };
}

}, [editor]);

const addCustomComponent = (editorInstance) => {
const blockManager = editorInstance.BlockManager;

// Add the custom block
blockManager.add('custom-block', {
  label: 'Custom Block',
  content: `<div class="my-custom-block">
    <div style="width: 100%; height: 200px; background-color: #eaeaea;">
      <!-- Image goes here -->
    </div>
    <div style="padding: 16px;">
      <p style="margin: 0; font-size: 14px; color: #888;">Date goes here</p>
      <h3 style="margin: 8px 0; font-size: 18px;">Title goes here</h3>
      <p style="margin: 0; font-size: 16px; color: #555;">Paragraph goes here</p>
    </div>
  </div>`,
  category: 'Basic', // Ensure this is correct
  visible: true, // Ensure block visibility
  activate: true,
});

// Force refresh the BlockManager
const blocks = blockManager.getAll();
blockManager.render(blocks);

};

const setupStyleManager = (editorInstance) => {
const styleManager = editorInstance.StyleManager;

styleManager.addSector('test', {
  name: 'Test',
  open: true,
  properties: [
    {
      name: 'Background Color1',
      property: 'background-color1',
      type: 'color',
    },
    {
      name: 'Padding1',
      property: 'padding1',
      type: 'number',
      units: ['px'],
      min: 0,
      default: '0',
    },
  ],
});

};

const openCategory = (editorInstance, categoryName) => {
const blockManager = editorInstance.BlockManager;
const category = blockManager
.getCategories()
.find((cat) => cat.get('id') === categoryName);

if (category) {
  category.set('open', true);
}

};

return (
<div style={{ height: '100vh', width: '100vw', margin: 0, padding: 0 }}>
<StudioEditor
ref={editorRef}
options={{
licenseKey:
'"Key"',
assets: {
onUpload: async ({ files }) => {
return files.map((file) => ({
src: URL.createObjectURL(file),
}));
},
onLoad: async () => {
return [{ src: 'https://via.placeholder.com/150' }];
},
onDelete: async ({ assets }) => {
return [{ src: 'https://via.placeholder.com/150' }];
},
},
storage: {
onLoad: async () => {
const mockProject = {
pages: [
{
html: '

Hello, World!

',
},
],
styles: [
'body { font-family: Arial, sans-serif; }',
'div { color: blue; }',
],
custom: {
js: "console.log('Hello, World!');",
},
};
return { project: mockProject };
},
autosaveChanges: 100,
autosaveIntervalMs: 10000,
},
}}
onReady={handleEditorReady}
/>

);
}

[artf]

#6081 (comment)

[MdShadabAhamad]

@artf , I have a question that , can we implement custom js in studio? means is there any embed js code functionality ?

[artf]

It's explained here: https://grapesjs.com/docs/modules/Components-js.html