Manipulate Standart Blocks

[wagnerlduarte]

Following this issue: #155

How can I create a specialized block based on a standard block?

Because I added some attributes on my standard text block as this comment: #155 (comment)

But now, I want to use these new attributes in a Wrapper of a standard Text Block, for example. How can I do this?

I tried something like that, but it's didn't work good

import {
  IBlockData,
  IText,
  BlockManager,
  AdvancedType,
  createBlock,
  BasicType,
  getPreviewClassName,
  components,
} from "easy-email-core";
import { merge } from "lodash";

const { Wrapper } = components;

type ICustomText = IText &
  IBlockData<
    {
      "background-color": string;
      "button-color": string;
      "button-text-color": string;
      "product-name-color": string;
      "product-price-color": string;
      "title-color": string;
    },
    {
      title: string;
      buttonText: string;
      quantity: number;
    }
  >;

const defaultBlock = BlockManager.getBlockByType(AdvancedType.TEXT)!;

export const CustomText = createBlock<ICustomText>({
  name: defaultBlock.name,
  type: defaultBlock.type,
  validParentType: defaultBlock.validParentType,
  create: (payload) => {
    const defaultData: ICustomText = {
      ...defaultBlock,
      data: {
        value: {
          title: "You might also like",
          buttonText: "Buy now",
          quantity: 3,
          content: payload?.data?.value?.content ?? "",
        },
      },
      attributes: {
        "background-color": "#ffffff",
        "button-text-color": "#ffffff",
        "button-color": "#414141",
        "product-name-color": "#414141",
        "product-price-color": "#414141",
        "title-color": "#222222",
      },
      children: [
        {
          type: BasicType.TEXT,
          children: [],
          data: {
            value: {
              content: "custom block title",
            },
          },
          attributes: {},
        },
      ],
    };
    return merge(defaultData, payload);
  },
  render: (params) => {
    const { data, idx, mode, dataSource } = params;
    const { title, buttonText, quantity } = data.data.value;
    const attributes = data.attributes;

    const perWidth = quantity <= 3 ? "" : "33.33%";

    return (
      <Wrapper
        // add class name when testing preview
        css-class={
          mode === "testing" ? getPreviewClassName(idx ?? null, data.type) : ""
        }
        padding="20px 0px 20px 0px"
        border="none"
        direction="ltr"
        text-align="center"
        background-color={attributes["background-color"]}
        {...defaultBlock.create()}
      ></Wrapper>
    );
  },
});

export { Panel } from "./Panel";

[m-Ryan]

I don't quite understand what you want to do, please describe carefully, preferably provide a codesanbox I can edit on it

[wagnerlduarte]

I don't quite understand what you want to do, please describe carefully, preferably provide a codesanbox I can edit on it

I would like to use the standard component, but use other properties in a "Wrapper" component, with the standard Text Component inside this Wrapper.

I created a example of that in the codesandbox and you could be there.

Basically I would like to extend a standard component to add some other properties around.

https://codesandbox.io/p/github/m-Ryan/easy-email-demo/csb-cpkgxf/draft/modest-sun?file=%2Fsrc%2FCustomBlocks%2FText%2Findex.tsx&selection=%5B%7B%22endColumn%22%3A20%2C%22endLineNumber%22%3A19%2C%22startColumn%22%3A8%2C%22startLineNumber%22%3A19%7D%5D

[m-Ryan]

Please note that AdvancedType.Text is not a standard component.
You can only extend standard components, check this demo.
m-Ryan/easy-email-demo#16

[wagnerlduarte]

@m-Ryan Thank you for your help! It's worked well for me!