@baigiel/editor
v1.4.7
Published
Baigiel rich text editor
Downloads
180
Readme
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
- 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.
Install the package:
npm install @baigiel/editor # or yarn add @baigiel/editor
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 totrue
, 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): Iftrue
, 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 forselect
type. An array of options withlabel
andvalue
.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): Iftrue
, the input is disabled.valueMapper
(object): Optional value mapper for transforming input values.