# ybai-1-easy-email-editor

> Email editor

Latest version **3.2.14** (published 2022-03-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install ybai-1-easy-email-editor
pnpm add ybai-1-easy-email-editor
yarn add ybai-1-easy-email-editor
bun add ybai-1-easy-email-editor
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 3.2.14 |
| Published | 2022-03-08 |
| First published | 2022-03-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 1.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 55 |
| Author | m-Ryan |
| Maintainers | nguyentrunghieutcu |
| Keywords | email editor core |

## Links

- npm: https://www.npmjs.com/package/ybai-1-easy-email-editor
- Repository: https://github.com/m-Ryan/easy-email
- Homepage: https://github.com/m-Ryan/easy-email#readme
- Issues: https://github.com/m-Ryan/easy-email/issues
- npm.io page: https://npm.io/package/ybai-1-easy-email-editor

## Dependencies (9)

- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [is-hotkey](https://npm.io/package/is-hotkey.md) ^0.2.0
- [react-use](https://npm.io/package/react-use.md) ^17.3.1
- [final-form](https://npm.io/package/final-form.md) ^4.20.4
- [@types/is-hotkey](https://npm.io/package/@types/is-hotkey.md) ^0.1.7
- [final-form-arrays](https://npm.io/package/final-form-arrays.md) ^3.0.2
- [react-final-form-arrays](https://npm.io/package/react-final-form-arrays.md) ^3.1.3
- [final-form-set-field-touched](https://npm.io/package/final-form-set-field-touched.md) ^1.0.1
- [@types/final-form-set-field-touched](https://npm.io/package/@types/final-form-set-field-touched.md) ^1.0.0

## Alternatives

- [@expo/fingerprint](https://npm.io/package/@expo/fingerprint.md) — 6.2M weekly downloads
- [@azure/monitor-opentelemetry-exporter](https://npm.io/package/@azure/monitor-opentelemetry-exporter.md) — 850.0K weekly downloads
- [@azure/monitor-opentelemetry](https://npm.io/package/@azure/monitor-opentelemetry.md) — 624.0K weekly downloads
- [@posthog/ai](https://npm.io/package/@posthog/ai.md) — 423.3K weekly downloads
- [fakefilter](https://npm.io/package/fakefilter.md) — 63.9K weekly downloads

## Recent versions

- 3.2.14 (latest) — 2022-03-08
- 3.2.13 — 2022-03-08
- 3.2.12 — 2022-03-08
- 3.2.9 — 2022-03-08
- 3.2.8 — 2022-03-08
- 3.2.7 — 2022-03-08
- 3.2.6 — 2022-03-07
- 3.2.5 — 2022-03-07
- 3.2.4 — 2022-03-07
- 3.2.3 — 2022-03-04
- 3.2.1-alpha.0 — 2022-03-03

## README

# Easy-email-editor

## Introduction

Email render and preview container.

## usage

```sh
$ npm install --save easy-email-editor
```

or

```sh
$ yarn add easy-email-editor
```

```js
import React from "react";
import { BlockManager } from "easy-email-core";
import { EmailEditor, EmailEditorProvider } from "easy-email-editor";
import "easy-email-editor/lib/style.css";

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

export function App() {
  return (
    <EmailEditorProvider data={initialValues} height={"calc(100vh - 72px)"}>
      {({ values }) => {
        return <EmailEditor />;
      }}
    </EmailEditorProvider>
  );
}
```

## customize

If you customize the UI yourself,maybe you need to know

- hooks

  - useActiveTab // current tab is edit or preview
  - useBlock // includes addBlock、moveBlock、removeBlock、undo, redo, etc.
  - useHoverIdx // hover block related, dragging status related, dragging direction related
  - useEditorProps // get props from EmailEditorProvider
  - useEditorContext // get form state and initialized status
  - useFocusIdx // focus block related

- utils (These are some very simple methods, it is best to look at the implementation)

  - getBlockNodeByIdx
  - getBlockNodes
  - getShadowRoot
  - scrollBlockEleIntoView

- components
  - BlockAvatarWrapper // allow drag and drop to editor

---
_Source: https://npm.io/package/ybai-1-easy-email-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._