# adom-block-editor

> A versatile WYSIWYG block editor component for Next.js.

Latest version **0.1.3** (published 2023-10-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install adom-block-editor
pnpm add adom-block-editor
yarn add adom-block-editor
bun add adom-block-editor
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2023-10-16 |
| First published | 2023-10-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 25 |
| Unpacked size | 328.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Alberto Domínguez Martín |
| Maintainers | adominguezes |
| Keywords | nextjs, wysiwyg, block-editor, slate, tailwindcss |

## Links

- npm: https://www.npmjs.com/package/adom-block-editor
- npm.io page: https://npm.io/package/adom-block-editor

## Dependencies (25)

- [clsx](https://npm.io/package/clsx.md) ^2.0.0
- [cmdk](https://npm.io/package/cmdk.md) ^0.2.0
- [next](https://npm.io/package/next.md) latest
- [react](https://npm.io/package/react.md) latest
- [slate](https://npm.io/package/slate.md) ^0.94.1
- [rollup](https://npm.io/package/rollup.md) ^4.1.4
- [react-dom](https://npm.io/package/react-dom.md) latest
- [globalthis](https://npm.io/package/globalthis.md) ^1.0.3
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.23.2
- [next-themes](https://npm.io/package/next-themes.md) ^0.2.1
- [slate-react](https://npm.io/package/slate-react.md) ^0.99.0
- [lucide-react](https://npm.io/package/lucide-react.md) ^0.279.0
- [slate-history](https://npm.io/package/slate-history.md) ^0.93.0
- [tailwind-merge](https://npm.io/package/tailwind-merge.md) ^1.14.0
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.22.15
- [rollup-plugin-babel](https://npm.io/package/rollup-plugin-babel.md) ^4.4.0
- [tailwindcss-animate](https://npm.io/package/tailwindcss-animate.md) ^1.0.7
- [@radix-ui/react-slot](https://npm.io/package/@radix-ui/react-slot.md) ^1.0.2
- [@radix-ui/react-dialog](https://npm.io/package/@radix-ui/react-dialog.md) ^1.0.5
- [@radix-ui/react-menubar](https://npm.io/package/@radix-ui/react-menubar.md) ^1.0.4
- [@radix-ui/react-popover](https://npm.io/package/@radix-ui/react-popover.md) ^1.0.7
- [@radix-ui/react-tooltip](https://npm.io/package/@radix-ui/react-tooltip.md) ^1.0.7
- [class-variance-authority](https://npm.io/package/class-variance-authority.md) ^0.7.0
- [@radix-ui/react-hover-card](https://npm.io/package/@radix-ui/react-hover-card.md) ^1.0.7
- [@radix-ui/react-dropdown-menu](https://npm.io/package/@radix-ui/react-dropdown-menu.md) ^2.0.6

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 0.1.3 (latest) — 2023-10-16
- 0.1.2 — 2023-10-16
- 0.1.1 — 2023-10-16
- 0.1.0 — 2023-10-16

## README

# adom-block-editor

adom-block-editor is a versatile and user-friendly WYSIWYG block editor component for Next.js. It allows you to create rich text content with various formatting options. With adom-block-editor, you can easily add, reorder, and style content blocks. You can make text bold or italic, align it left, right, or center, and insert hyperlinks and images effortlessly. This README provides essential documentation for using the adom-block-editor component.

## Installation

You can install adom-block-editor via npm. Open your terminal and run the following command:

```bash
npm install adom-block-editor
# or
yarn add adom-block-editor
# or
pnpm add adom-block-editor
# or
bun install adom-block-editor

```

## Usage

To use adom-block-editor in your Next.js application, follow these steps:

1. Import the component in your file:

```javascript
import AdomBlockEditor from 'adom-block-editor';

```

2. Create a state variable to manage the editor's content:

```javascript
import { useState } from 'react';

const [editorValue, setEditorValue] = useState(initialValue); // Provide your initial content as 'initialValue'

```

3. Render the AdomBlockEditor component in your JSX, passing the state variable and a callback to update it:

```javascript
<AdomBlockEditor
  value={editorValue}
  onChange={setEditorValue}
/>

```

## Features

adom-block-editor provides the following features:

1. Add, reorder, and remove content blocks.
2. Apply formatting styles such as bold and italic.
3. Align text left, right, or center.
4. Insert hyperlinks and images.

## Dependencies

adom-block-editor relies on the following external dependencies:

[Tailwind CSS](https://tailwindcss.com/): A utility-first CSS framework.
[Radix UI](https://www.radix-ui.com/): A set of low-level UI primitives for building high-quality design systems and applications.
[Slate](https://www.slatejs.org/): A powerful and customizable framework for building rich text editors.

Make sure to include these dependencies in your project when using adom-block-editor.

## Example

```javascript
import AdomBlockEditor from 'adom-block-editor';

const MyEditorComponent = () => {
  const [editorValue, setEditorValue] = useState([
    {
      type: 'paragraph',
      children: [{ text: 'Hello, adom-block-editor!' }],
    },
  ]);

  return (
    <div>
      <AdomBlockEditor value={editorValue} onChange={setEditorValue} />
    </div>
  );
};

export default MyEditorComponent;

```

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