Overwrite component

To facilitate users in customizing their components and functionalities, we have exported a significant number of components, mainly divided into three major blocks:

• SharedComponents mainly consists of some common blocks and components.

  const SharedComponents = {
    PreviewEmailDrawer: PreviewEmailDrawer,
    PreviewEmail: PreviewEmail,
    BlockSideBar: BlockSideBar,
    ConfigurationSideBar: ConfigurationSideBar,
    AttributePanel: AttributePanel,
    ColumnLayout: ColumnLayout,
    ConfigurationDrawer: ConfigurationDrawer,
    ConfigurationPanel: ConfigurationPanel,
    EditorTabs: EditorTabs,
    UniversalElementEditorDrawer: UniversalElementEditorDrawer,
    RichTextBar: RichTextBar,
    HoveringToolbar: HoveringToolbar,
    Hotkeys: Hotkeys,
    Controller: Controller,
    UnsplashImages: UnsplashImages,
    WidgetConfigPanel: WidgetConfigPanel,
    FullHeightOverlayScrollbars: FullHeightOverlayScrollbars,
    ...
  };

• AttributePanel primarily comprises form components. For example, if you want to change the font size field from an input to a slider, you can achieve this by overriding AttributePanel.FontSize.

  const AttributeField = {
      WatchField: WatchField,
      SyncChildrenField: SyncChildrenField,
      TextField: TextField,
      NumberField: NumberField,
      PixelField: PixelField,
      SelectField: SelectField,
      ColorPickerField: ColorPickerField,
      SliderField: SliderField,
      SwitchField: SwitchField,
      ...
  }
  

• ConfigPanelsMap is responsible for rendering the panels of all block Elements.

const ConfigPanelsMap: Record<string, React.FC<{ nodePath: Path }>> = {
  [ElementType.PAGE]: Page,
  [ElementType.STANDARD_NAVBAR]: Navbar,
  [ElementType.STANDARD_BUTTON]: Button,
  [ElementType.STANDARD_IMAGE]: Image,
  [ElementType.STANDARD_SOCIAL]: Social,
  [ElementType.STANDARD_DIVIDER]: Divider,
  [ElementType.STANDARD_SPACER]: Spacer,
  [ElementType.STANDARD_WRAPPER]: Wrapper,
  [ElementType.STANDARD_SECTION]: Section,
  [ElementType.STANDARD_COLUMN]: Column,
  [ElementType.STANDARD_HERO]: Hero,
  [ElementType.CONTENT_WIDGET]: Widget,
  [ElementType.SECTION_WIDGET]: Widget,
  [ElementType.WRAPPER_WIDGET]: Widget,

  //text
  [ElementType.STANDARD_TEXT]: Text,
  [ElementType.STANDARD_PARAGRAPH]: Text,
  [ElementType.STANDARD_H1]: Text,
  [ElementType.STANDARD_H2]: Text,
  [ElementType.STANDARD_H3]: Text,
  [ElementType.STANDARD_H4]: Text,
};

When you want to override a component, you just need to do the following:

SharedComponents.xxx = xxx;
// For example:
SharedComponents.BlockSideBar = () => {
  return <>111</>;
};

AttributeField.xxx = xxx;
// For example:
AttributeField.TextField = () => {
  return <>111</>;
};

ConfigPanelsMap.xxx = xxx;
// For example:
ConfigPanelsMap[ElementType.PAGE] = () => {
  return <>111</>;
};