easy-pdf-extensions

Introduction

Provide default UI components, when they don’t meet your needs, you can refer to it and write your own

usage

$ npm install --save easy-pdf-extensions

or

$ yarn add easy-pdf-extensions

import React from 'react';
import { BlockManager, BasicType, AdvancedType } from 'easy-pdf-core';
import { EmailEditor, EmailEditorProvider } from 'easy-pdf-editor';
import { ExtensionProps, StandardLayout } from 'easy-pdf-extensions';
import { useWindowSize } from 'react-use';

import 'easy-pdf-editor/lib/style.css';
import 'easy-pdf-extensions/lib/style.css';

const categories: ExtensionProps['categories'] = [
  {
    label: 'Content',
    active: true,
    blocks: [
      {
        type: AdvancedType.TEXT,
      },
      {
        type: AdvancedType.IMAGE,
        payload: { attributes: { padding: '0px 0px 0px 0px' } },
      },
      {
        type: AdvancedType.BUTTON,
      },
      {
        type: AdvancedType.SOCIAL,
      },
      {
        type: AdvancedType.DIVIDER,
      },
      {
        type: AdvancedType.SPACER,
      },
      {
        type: AdvancedType.HERO,
      },
      {
        type: AdvancedType.WRAPPER,
      },
    ],
  },
  {
    label: 'Layout',
    active: true,
    displayType: 'column',
    blocks: [
      {
        title: '2 columns',
        payload: [
          ['50%', '50%'],
          ['33%', '67%'],
          ['67%', '33%'],
          ['25%', '75%'],
          ['75%', '25%'],
        ],
      },
      {
        title: '3 columns',
        payload: [
          ['33.33%', '33.33%', '33.33%'],
          ['25%', '25%', '50%'],
          ['50%', '25%', '25%'],
        ],
      },
      {
        title: '4 columns',
        payload: [[['25%', '25%', '25%', '25%']]],
      },
    ],
  },
];

const initialValues = {
  subject: 'Welcome to Easy-email',
  subTitle: 'Nice to meet you!',
  content: BlockManager.getBlockByType(BasicType.PAGE)!.create({}),
};

export default function App() {
  const { width } = useWindowSize();

  const smallScene = width < 1400;

  return (
    <EmailEditorProvider
      data={initialValues}
      height={'calc(100vh - 72px)'}
      autoComplete
      dashed={false}
    >
      {({ values }) => {
        return (
          <StandardLayout
            compact={!smallScene}
            categories={categories}
            showSourceCode={true}
          >
            <EmailEditor />
          </StandardLayout>
        );
      }}
    </EmailEditorProvider>
  );
}

Extensions

• AttributePanel

  • Basic block configuration panel

  • You can add or overwrite

    import { BlockAttributeConfigurationManager } from 'easy-pdf-extensions';
    
    BlockAttributeConfigurationManager.add({
      [BasicType.TEXT]: () => <div>will be overwrite `Text`</div>,
    });

  • Hide Page block subject & subTitle

    const DefaultPageConfigPanel = BlockAttributeConfigurationManager.get(BasicType.PAGE);
    BlockAttributeConfigurationManager.add({
      [BasicType.PAGE]: () => (
        <DefaultPageConfigPanel
          hideSubject
          hideSubTitle
        />
      ),
    });

• InteractivePrompt

  • block hover and focus style

  • No configuration items

• BlockLayer

  • No configuration items

• ShortcutToolbar

  • You can add or overwrite popover's preset blocks

    import { BasicType } from 'easy-pdf-core';
    import { BlockMarketManager, BlockMaskWrapper } from 'easy-pdf-extensions';
    
    BlockMarketManager.addCategories([
      {
        title: 'Custom',
        name: 'custom',
        blocks: [
          {
            type: BasicType.TEXT,
            title: 'Text',
            description: 'This block allows you to display text in your email.',
            component: () => {
              return (
                <BlockMaskWrapper
                  type={BasicType.TEXT}
                  payload={{
                    attributes: {
                      'font-size': '20px',
                      align: 'center',
                      padding: '0px 0px 0px 0px',
                      color: '#4A90E2',
                    },
                    data: {
                      value: {
                        content: '20px',
                      },
                    },
                  }}
                >
                  <div style={{ fontSize: 20, width: '100%', paddingLeft: 20 }}>20px</div>
                </BlockMaskWrapper>
              );
            },
          },
        ],
      },
    ]);

• SimpleLayout

  • props
    • showSourceCode
    • defaultShowLayer

• StandardLayout

  • props
    • compact
    • categories
    • showSourceCode