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:

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:

import AdomBlockEditor from 'adom-block-editor';

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

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:

<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: A utility-first CSS framework. Radix UI: A set of low-level UI primitives for building high-quality design systems and applications. Slate: 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

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;