@brizy/core v1.0.11

Brizy Builder Core

Brizy Builder Core package allow to Register your own third party components into Brizy Builder.

Limitations

This package can only be used in the Brizy Builder context. It cannot be used in other applications.

Installation

Install my-project with npm

  npm install @brizy/core

Usage/Examples

Import Brizy core, and then you can register your own component

import { Brizy } from "@brizy/core";
import { ToolbarProps } from "../types/toolbars";
import { getItems as getSidebarItems } from "./sidebar";
import "./style.scss";
import { getItems as getToolbarItems } from "./toolbar";

export function MySuperComponent(props: Props): JSX.Element {
  return (
    <div className="componentToolbar">
      {/*... your component code...*/}
      
    </div>
  );
}

Brizy.registerComponent(MySuperComponent, {
  id: "MySupercomponentId",
  //... other props
  options: (props: ToolbarProps) => [
    {
      selector: ".componentToolbar",    // open toolbar when you click on element with this selector
      toolbar: getToolbarItems(props),  // toolbar description...
      sidebar: getSidebarItems(props)   // sidebar desription...
    }
  ]
});

Core Interface

Class Brizy{
    static registerComponent<T>(
        component:ComponentType, // this is React Component Type
        componentConfig: ComponentData<T>
  ){}
}

export interface ComponentData<T> {
  id: string;
  title: string;
  category?: string;
  keywords?: Array<string>;
  mode?: EditorMode;
  preview?: Preview;
  icon?: string;
  options?: (props: ValueGetter) => ToolbarConfig[];
}

... Other types you can find in dist/types

ImageUtility Class

This package also exports a helpful utility class called ImageUtility, designed to simplify the process of extracting image-related data from the element model.

Import

import { ImageUtility } from "@brizy/core";

Example Usage

// Inside your component
const imgUtils = new ImageUtility();
const imageData = imgUtils.getImageData({ id: imageKey, v: props });

How It Works

The getImageData method reads the base image key (usually the ID of the imageUpload option) and automatically looks for related metadata fields in the element model by appending suffixes to the key:

For example, if the image key is "sectionBg", the utility will look for and return values from the following keys in the model:

• sectionBgImageSrc
• sectionBgImageWidth
• sectionBgImageHeight
• sectionBgImageFileName
• sectionBgImageExtension

Returned Data Structure

The result is a typed object of shape:

export interface ImageData {
  src: string;
  fileName: string;
  extension: string;
  width: number;
  height: number;
}

This makes it easy to access all necessary image details for rendering or further processing.