Editor Hub is a powerful and customizable rich text editor component for React applications. It combines the functionality of Quill.js with additional features like emoji support, mentions, and better table handling.
- Rich text editing with Quill.js
- Emoji picker and inline emoji support
- @mentions functionality
- Enhanced table editing
- Customizable toolbar
- Resizable images
Editor Hub was created as a wrapper over Quill v2.0 and react-quill, with built-in support for emojis and other advanced features. This integration eliminates common errors users face when including these features separately, allowing developers to use advanced functionality directly without worrying about compatibility issues.
We envision Editor Hub as a highly capable and user-friendly rich text editor with the potential for diverse applications, including the creation of email templates. Our goal is to provide a seamless editing experience while offering powerful features out of the box.
To use Editor Hub in your project during development, follow these steps:
-
Clone the repository:
git clone https://github.com/your-username/editor-hub.git cd editor-hub -
Install dependencies:
yarn install
-
Build the project:
yarn build
Facing some error regarding ssl legacy/digital envelope routine: try
export NODE_OPTIONS=--openssl-legacy-providerand then rebuild. -
Link the package locally:
yarn link
-
In your project directory, link to the local Editor Hub:
cd /path/to/your/project yarn link "editor-hub"
-
You can now import and use Editor Hub in your project:
import RichTextEditorWrapper from "editor-hub";
To automatically rebuild the project on file changes, use the watch command:
yarn watchThis will watch for changes in the source files and automatically rebuild the project, which improves the development workflow by eliminating the need for manual rebuilds.
Here's a basic example of how to use the Editor Hub component:
import React from "react";
import RichTextEditorWrapper from "editor-hub";
const MyEditor = () => {
const handleChange = (content) => {
console.log("Editor content:", content);
};
return (
<RichTextEditorWrapper
value=""
onChange={handleChange}
placeholder="Start typing..."
/>
);
};
export default MyEditor;The RichTextEditorWrapper component accepts the following props:
theme(string): The theme to use for the Quill editor. Default is"snow". Other options include"bubble". (Bubble is a simple tooltip based theme.)disabled: Boolean to disable the editorvalue: Initial value of the editoronChange: Callback function when content changesheight: Height of the editor (default: "auto")disableToolbar: Boolean to disable the toolbartoolbarOptions: Custom toolbar optionsallowMention: Boolean to enable mentionsonMentionSelect: Callback function when a mention is selectedrenderMentionItem: Custom render function for mention itemsonSearchMention: Function to handle mention searchonSubmit: Callback function when the editor content is submittedmentionChars: Array of characters that trigger mentions (default: ["@"])showDenotationChar: Boolean to show the denotation character in mentions
You can customize the toolbar by passing a toolbarOptions prop. Here's an example:
const toolbarOptions = [
["bold", "italic", "underline", "strike"],
["blockquote", "code-block"],
[{ header: 1 }, { header: 2 }],
[{ list: "ordered" }, { list: "bullet" }],
[{ script: "sub" }, { script: "super" }],
[{ indent: "-1" }, { indent: "+1" }],
[{ direction: "rtl" }],
[{ size: ["small", false, "large", "huge"] }],
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ color: [] }, { background: [] }],
[{ font: [] }],
[{ align: [] }],
["clean"],
["link", "image", "video"],
];To enable and configure mentions, use the following props:
allowMention: Set totrueto enable mentionsonMentionSelect: Callback function when a mention is selectedrenderMentionItem: Custom render function for mention itemsonSearchMention: Function to handle mention searchmentionChars: Array of characters that trigger mentionsshowDenotationChar: Whether to show the @ symbol in mentions
When you're finished developing or testing with the linked package, you can unlink it:
-
In your project directory:
yarn unlink editor-hub
-
In the editor-hub directory:
yarn unlink
This will remove the symlinks created by yarn link.
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
As we continue to develop Editor Hub, we aim to enhance its capabilities and expand its use cases. Some areas of focus include:
- Enhanced customization options
- Additional plugins and integrations
- Improved email template creation and editing
- Performance optimizations
We welcome contributions and feedback from the community to help shape the future of Editor Hub.
This project is licensed under the MIT License - see the LICENSE file for details.
If you have any questions or need help with Editor Hub, please open an issue in the GitHub repository.