@baigiel/editor

RichText Editor Library

A fully-featured rich text editor built with React and Tiptap. This library provides customizable components and extensions to create a seamless and interactive text editing experience.

Table of Contents

• Features
• Installation
• Usage
  • Basic Setup
    • RichEditor Options
    • Input Component Options
  • Components
    • RichEditor
    • ReadonlyEditor
    • Input
  • Extensions
• Customization
• Contributing
• License

Features

• Rich Text Editing: Bold, italic, underline, strikethrough, and more.
• Lists: Support for ordered and unordered lists.
• Links: Easily add and remove hyperlinks.
• Tables: Advanced table management.
• Images: Insert and manage images seamlessly.
• Responsive Design: Built with Tailwind CSS for responsive and modern UI.
• Extensible: Easily extendable with custom extensions and plugins.
• Input Components: Various input types including text, number, date, select, and textarea.

Installation

Ensure you have Node.js installed.

1. Install the package:

   npm install @baigiel/editor
   # or
   yarn add @baigiel/editor
   

2. Import the CSS:

   import "@baigiel/editor/editor.css";
   

Usage

Basic Setup

Import the RichEditor component and include it in your React application:

import React, { useState } from "react";
import RichEditor from "@baigiel/editor";
import "@baigiel/editor/editor.css";

const App = () => {
  const [content, setContent] = useState("");

  return (
    <RichEditor
      value={content}
      onChange={(doc, raw) => setContent(raw)}
      editorClassName="custom-editor"
      contentClassName="custom-content"
      alwaysActive={true}
    />
  );
};

export default App;

RichEditor Options

The RichEditor component accepts the following props:

• id (string): Optional identifier for the editor instance.
• value (Content): The current content of the editor.
• readonly (boolean): If set to true, the editor is in read-only mode.
• closeOnBlur (boolean): Determines if the editor should lose focus when clicking outside.
• onChange (function): Callback function triggered when the content changes. Receives the document and raw content as parameters.
• editorClassName (string): Custom CSS classes for the editor container.
• contentClassName (string): Custom CSS classes for the content area.
• alwaysActive (boolean): If true, the editor remains active without needing to click to focus.

Input Component Options

The Input component provides versatile form input elements with various options. Here's how to use it along with its available props:

import React, { useState } from "react";
import Input from "@baigiel/editor";

const Form = () => {
  const [text, setText] = useState("");
  const [number, setNumber] = useState(0);
  const [date, setDate] = useState("");
  const [select, setSelect] = useState("");
  const [textarea, setTextarea] = useState("");

  return (
    <form>
      <Input
        label="Text Input"
        type="text"
        value={text}
        onChange={setText}
        placeholder="Enter some text"
      />
      <Input
        label="Number Input"
        type="number"
        value={number}
        onChange={setNumber}
        placeholder="Enter a number"
      />
      <Input label="Date Input" type="date" value={date} onChange={setDate} />
      <Input
        label="Select Input"
        type="select"
        value={select}
        onChange={setSelect}
        options={[
          { label: "Option 1", value: "option1" },
          { label: "Option 2", value: "option2" },
          { label: "Option 3", value: "option3" },
        ]}
      />
      <Input
        label="Textarea Input"
        type="textarea"
        value={textarea}
        onChange={setTextarea}
        placeholder="Enter multiple lines of text"
      />
    </form>
  );
};

export default Form;

Input Component Props

The Input component accepts the following props:

• label (string): The label for the input field.
• type (string): The type of input. Supported types:
  • "text": Single-line text input.
  • "number": Numeric input.
  • "date": Date picker.
  • "select": Dropdown selection.
  • "textarea": Multi-line text input.
  • "json": JSON input with monospace font.
  • "textarea-lb": Textarea with line break support.
• value (any): The current value of the input.
• onChange (function): Callback function triggered when the input value changes.
• onSave (function): Optional callback for saving the input value asynchronously.
• options (array): Required for select type. An array of options with label and value.
• placeholder (string): Placeholder text for the input field.
• className (string): Custom CSS classes for styling.
• error (string): Error message to display below the input.
• disabled (boolean): If true, the input is disabled.
• valueMapper (object): Optional value mapper for transforming input values.