0.17.2 • Published 7 months ago

realmail-extensions v0.17.2

Weekly downloads
-
License
MIT
Repository
github
Last release
7 months ago

realmail-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 realmail-extensions

or

$ yarn add realmail-extensions
import React from 'react';
import { BlockManager, BasicType } from 'realmail-core';
import { EmailEditor, EmailEditorProvider } from 'realmail-editor';
import { SimpleLayout } from 'realmail-extensions';

import 'realmail-editor/lib/style.css';
import 'realmail-extensions/lib/style.css';

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

export function App() {
  return (
    <EmailEditorProvider
      data={initialValues}
      height={'calc(100vh - 72px)'}
      autoComplete
      dashed={false}
    >
      {({ values }) => {
        return (
          <SimpleLayout>
            <EmailEditor />
          </SimpleLayout>
        );
      }}
    </EmailEditorProvider>
  );
}

Extensions

  • AttributePanel

    • Basic block configuration panel

    • You can add or overwrite

      import { BlockAttributeConfigurationManager } from "realmail-extensions";
      
      BlockAttributeConfigurationManager.add({
        [BasicType.TEXT]: () => <div>will be overwrite `Text`</div>,
      });
  • 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 "realmail-core";
      import { BlockMarketManager, BlockMaskWrapper } from "realmail-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

    • All in one extension, provide basic and complete layout example. Refer to the above extension for configuration items.
0.17.2

7 months ago

0.17.0

8 months ago

0.17.1

8 months ago

0.16.4

9 months ago

0.16.5

9 months ago

0.16.6

9 months ago

0.16.7

9 months ago

0.16.8

9 months ago

0.16.2

9 months ago

0.16.0

1 year ago

0.15.6

2 years ago

0.15.4

2 years ago

0.15.5

2 years ago

0.13.3

2 years ago

0.14.0

2 years ago

0.14.1

2 years ago

0.14.2

2 years ago

0.15.0

2 years ago

0.15.1

2 years ago

0.15.2

2 years ago

0.15.3

2 years ago

0.11.20

3 years ago

0.11.21

3 years ago

0.11.26

3 years ago

0.13.0

2 years ago

0.11.28

3 years ago

0.13.1

2 years ago

0.11.29

3 years ago

0.11.22

3 years ago

0.11.23

3 years ago

0.11.24

3 years ago

0.11.31

3 years ago

0.11.37

3 years ago

0.11.34

3 years ago

0.11.35

3 years ago

0.11.36

3 years ago

0.12.0

3 years ago

0.11.19

3 years ago

0.11.17

3 years ago

0.11.18

3 years ago

0.8.9

3 years ago

0.8.8

3 years ago

0.8.4

3 years ago

0.8.6

3 years ago

0.7.1

3 years ago

0.7.0

3 years ago

0.5.8

3 years ago

0.5.9

3 years ago

0.10.1

3 years ago

0.10.2

3 years ago

0.10.3

3 years ago

0.10.7

3 years ago

0.10.0

3 years ago

0.8.1

3 years ago

0.8.0

3 years ago

0.8.3

3 years ago

0.8.2

3 years ago

0.6.23

3 years ago

0.6.22

3 years ago

0.6.6

3 years ago

0.6.9

3 years ago

0.6.8

3 years ago

0.11.9

3 years ago

0.10.18

3 years ago

0.11.0

3 years ago

0.10.14

3 years ago

0.11.1

3 years ago

0.10.15

3 years ago

0.10.16

3 years ago

0.11.3

3 years ago

0.10.17

3 years ago

0.10.10

3 years ago

0.11.5

3 years ago

0.10.11

3 years ago

0.10.12

3 years ago

0.11.7

3 years ago

0.10.13

3 years ago

0.6.10

3 years ago

0.6.12

3 years ago

0.6.11

3 years ago

0.6.18

3 years ago

0.6.17

3 years ago

0.6.14

3 years ago

0.6.13

3 years ago

0.6.15

3 years ago

0.9.0

3 years ago

0.11.15

3 years ago

0.11.16

3 years ago

0.6.2

3 years ago

0.6.5

3 years ago

0.6.4

3 years ago

0.11.12

3 years ago

0.11.13

3 years ago

0.11.14

3 years ago

0.6.0

3 years ago

0.4.31

3 years ago

0.4.32

3 years ago

0.4.30

3 years ago

0.4.35

3 years ago

0.4.36

3 years ago

0.4.34

3 years ago

0.3.0

3 years ago

0.5.4

3 years ago

0.5.3

3 years ago

0.3.5

3 years ago

0.5.6

3 years ago

0.5.0

3 years ago

0.3.2

3 years ago

0.3.1

3 years ago

0.5.2

3 years ago

0.3.4

3 years ago

0.5.1

3 years ago

0.4.20

3 years ago

0.5.7

3 years ago

0.4.28

3 years ago

0.4.29

3 years ago

0.4.22

3 years ago

0.4.4

3 years ago

0.4.0

3 years ago

0.4.3

3 years ago

0.2.0

3 years ago

0.2.3

3 years ago

0.2.2

3 years ago

0.2.5

3 years ago

0.2.4

3 years ago

0.1.13

3 years ago

0.1.11

3 years ago

0.1.10

3 years ago

0.1.9

3 years ago

0.1.8

3 years ago

0.1.6

3 years ago

0.1.5

3 years ago

0.1.4

3 years ago

0.1.3

3 years ago

0.1.2

3 years ago

0.1.0

3 years ago

0.0.8

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago