Overriding built-in components duplicating it

Technical Questions
,
1

Hi, I’m trying to override the built-in component Box, and it is just duplicating it.

image

This is my code
image

Originally what I need is to use forms but I want to hide the “basics” tab. But I think we cannot do this so I’m trying to override components. What’s wrong with this?

2

Hello @saura,

For overriding the Box component, try using the below code

const FakeBox = () => <div>Boxxx!!</div>;
Builder.registerComponent(FakeBox, {
  name: "Core:Box",
  override: true,
  canHaveChildren: true,
  inputs: [
    {
      name: 'children',
      type: 'uiBlocks',
      defaultValue: [],
      // showNoBlocks: false
      hideFromUI: true,
    },
    {
      name: 'verticalAlignContent',
      type: 'string',
      enum: ['top', 'bottom', 'middle'],
      defaultValue: 'top',
    },
  ],
  defaultStyles: {
    height: '100px',
  },
});

To hide the insertMenu, you can use the below code

Builder.register('editor.settings', { customInsertMenu: true });
1 Like
3

@manish-sharma is there documentation on what is available in editor.settings? Since it only applies to the editor (which is closed source) I can’t event find the code implementation.

4

Hello @JonathanLand,

You may find help at the below link

5

I tried your code to override the BOX it’s still not overwritten. Same component, not showing the “BOXXX!!!” Text as you can see in the image.

image
image748×192 50.7 KB

And the code

Builder.register('editor.settings', { customInsertMenu: true });

Deletes all the components from the sidebar.

6

Hello @saura,

There does seem to be some issue with overriding the default box component, we will investigate that further. Meanwhile, I would recommend creating your own custom Insert Menu.

For reference, please refer to the following forum post

Thank,