# @sujen/blocks-editor

> A block with all inline styles formatting that spans one line.

Latest version **0.1.28** (published 2021-04-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @sujen/blocks-editor
pnpm add @sujen/blocks-editor
yarn add @sujen/blocks-editor
bun add @sujen/blocks-editor
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.28 |
| Published | 2021-04-11 |
| First published | 2021-03-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 262.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | sujen |

## Links

- npm: https://www.npmjs.com/package/@sujen/blocks-editor
- npm.io page: https://npm.io/package/@sujen/blocks-editor

## Recent versions

- 0.1.28 (latest) — 2021-04-11
- 0.1.27 — 2021-04-10
- 0.1.26 — 2021-04-10
- 0.1.25 — 2021-04-10
- 0.1.24 — 2021-04-10
- 0.1.23 — 2021-04-10
- 0.1.22 — 2021-04-09
- 0.1.21 — 2021-04-08
- 0.1.20 — 2021-04-07
- 0.1.19 — 2021-04-07
- 0.1.18 — 2021-04-07
- 0.1.17 — 2021-04-07
- 0.1.16 — 2021-04-02
- 0.1.15 — 2021-04-01
- 0.1.14 — 2021-03-28
- … 14 more at https://npm.io/package/@sujen/blocks-editor/versions

## README

# Blocks Editor

A block with all inline styles formatting that spans one line.

# Tutorial

1. Default

```javascript
<BlockProvider>
  <BlockEditor />
</BlockProvider>
```

2. Custom Inline Style

```javascript
const customInlineStyleMap = {
  bold: { fontWeight: "bold" },
  italic: { color: "#382838" },
  // underline ...
  // code ...
  // strikethrough ...
}

<BlockProvider customInlineStyleMap={customInlineStyleMap}>
  <BlockEditor />
</BlockProvider>
```

3. Custom Block Style

```javascript
const customBlockStyle = {
  color: "#383838",
  backgroundColor: "#ffffff"
}

<BlockProvider customBlockStyle={customBlockStyle}>
  <BlockEditor />
</BlockProvider>
```

4. Custom Key Binding

```javascript
const customKeyBindingFn: (e: React.KeyboardEvent) => StyleType = (
  e: React.KeyboardEvent
) => {
  if (!e.metaKey) {
    return;
  }

  switch (e.key) {
    case "a":
      return "bold";
    case "s":
      return "underline";
    case "d":
      return "italic";
    case "f":
      return "code";
    case "e":
      return "strikethrough";
  }
};

<BlockProvider customKeyBindingFn={customKeyBindingFn}>
  <BlockEditor />
</BlockProvider>;
```

# Block Editor

Optional Arguments

- block: preset input text and styles
- onChange: called with every update of the block
- focus: if the block should be focused

---
_Source: https://npm.io/package/@sujen/blocks-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._