{"id":45587444,"url":"https://github.com/shipmnts/editor-hub","last_synced_at":"2026-02-23T11:55:26.323Z","repository":{"id":224511074,"uuid":"757420766","full_name":"shipmnts/editor-hub","owner":"shipmnts","description":" Powerful and customizable rich text editor component for React applications","archived":false,"fork":false,"pushed_at":"2025-09-22T09:34:40.000Z","size":14097,"stargazers_count":13,"open_issues_count":4,"forks_count":6,"subscribers_count":1,"default_branch":"staging","last_synced_at":"2025-09-22T11:30:35.654Z","etag":null,"topics":["editor","hacktoberfest","javascript","js","library","open-source","quill","rich-text-editor"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shipmnts.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-02-14T13:11:49.000Z","updated_at":"2025-07-21T06:34:50.000Z","dependencies_parsed_at":"2024-10-16T21:06:17.948Z","dependency_job_id":"f4ba098c-1aea-43b4-a5ee-2cfb13737d8a","html_url":"https://github.com/shipmnts/editor-hub","commit_stats":null,"previous_names":["shipmnts/editor-hub"],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/shipmnts/editor-hub","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shipmnts%2Feditor-hub","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shipmnts%2Feditor-hub/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shipmnts%2Feditor-hub/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shipmnts%2Feditor-hub/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shipmnts","download_url":"https://codeload.github.com/shipmnts/editor-hub/tar.gz/refs/heads/staging","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shipmnts%2Feditor-hub/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29741980,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-23T07:44:07.782Z","status":"ssl_error","status_checked_at":"2026-02-23T07:44:07.432Z","response_time":90,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["editor","hacktoberfest","javascript","js","library","open-source","quill","rich-text-editor"],"created_at":"2026-02-23T11:55:26.220Z","updated_at":"2026-02-23T11:55:26.313Z","avatar_url":"https://github.com/shipmnts.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Editor Hub\n\nEditor 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.\n\n![image](https://github.com/user-attachments/assets/affa5da3-39c6-4cd3-844e-798985077655)\n\n\n## Features\n\n- Rich text editing with Quill.js\n- Emoji picker and inline emoji support\n- @mentions functionality\n- Enhanced table editing\n- Customizable toolbar\n- Resizable images\n\n## Overview\n\nEditor 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.\n\nWe 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.\n\n## Installation and Setup for Development\n\nTo use Editor Hub in your project during development, follow these steps:\n\n1. Clone the repository:\n\n   ```bash\n   git clone https://github.com/your-username/editor-hub.git\n   cd editor-hub\n   ```\n\n2. Install dependencies:\n\n   ```bash\n   yarn install\n   ```\n\n3. Build the project:\n\n   ```bash\n   yarn build\n   ```\n\n   Facing some error regarding ssl legacy/digital envelope routine: try `export NODE_OPTIONS=--openssl-legacy-provider` and then rebuild.\n\n4. Link the package locally:\n\n   ```bash\n   yarn link\n   ```\n\n5. In your project directory, link to the local Editor Hub:\n\n   ```bash\n   cd /path/to/your/project\n   yarn link \"editor-hub\"\n   ```\n\n6. You can now import and use Editor Hub in your project:\n   ```jsx\n   import RichTextEditorWrapper from \"editor-hub\";\n   ```\n\n### Watch for File Changes\n\nTo automatically rebuild the project on file changes, use the `watch` command:\n\n```bash\nyarn watch\n```\n\nThis 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.\n\n## Usage\n\nHere's a basic example of how to use the Editor Hub component:\n\n```jsx\nimport React from \"react\";\nimport RichTextEditorWrapper from \"editor-hub\";\nconst MyEditor = () =\u003e {\n  const handleChange = (content) =\u003e {\n    console.log(\"Editor content:\", content);\n  };\n  return (\n    \u003cRichTextEditorWrapper\n      value=\"\"\n      onChange={handleChange}\n      placeholder=\"Start typing...\"\n    /\u003e\n  );\n};\nexport default MyEditor;\n```\n\n## API\n\nThe `RichTextEditorWrapper` component accepts the following props:\n\n- `theme` (string): The theme to use for the Quill editor. Default is `\"snow\"`. Other options include `\"bubble\"`. (Bubble is a simple tooltip based theme.)\n- `disabled`: Boolean to disable the editor\n- `value`: Initial value of the editor\n- `onChange`: Callback function when content changes\n- `height`: Height of the editor (default: \"auto\")\n- `disableToolbar`: Boolean to disable the toolbar\n- `toolbarOptions`: Custom toolbar options\n- `allowMention`: Boolean to enable mentions\n- `onMentionSelect`: Callback function when a mention is selected\n- `renderMentionItem`: Custom render function for mention items\n- `onSearchMention`: Function to handle mention search\n- `onSubmit`: Callback function when the editor content is submitted\n- `mentionChars`: Array of characters that trigger mentions (default: [\"@\"])\n- `showDenotationChar`: Boolean to show the denotation character in mentions\n\n## Customization\n\n### Toolbar Options\n\nYou can customize the toolbar by passing a `toolbarOptions` prop. Here's an example:\n\n```javascript\nconst toolbarOptions = [\n  [\"bold\", \"italic\", \"underline\", \"strike\"],\n  [\"blockquote\", \"code-block\"],\n  [{ header: 1 }, { header: 2 }],\n  [{ list: \"ordered\" }, { list: \"bullet\" }],\n  [{ script: \"sub\" }, { script: \"super\" }],\n  [{ indent: \"-1\" }, { indent: \"+1\" }],\n  [{ direction: \"rtl\" }],\n  [{ size: [\"small\", false, \"large\", \"huge\"] }],\n  [{ header: [1, 2, 3, 4, 5, 6, false] }],\n  [{ color: [] }, { background: [] }],\n  [{ font: [] }],\n  [{ align: [] }],\n  [\"clean\"],\n  [\"link\", \"image\", \"video\"],\n];\n```\n\n### Mention Configuration\n\nTo enable and configure mentions, use the following props:\n\n- `allowMention`: Set to `true` to enable mentions\n- `onMentionSelect`: Callback function when a mention is selected\n- `renderMentionItem`: Custom render function for mention items\n- `onSearchMention`: Function to handle mention search\n- `mentionChars`: Array of characters that trigger mentions\n- `showDenotationChar`: Whether to show the @ symbol in mentions\n\n## Unlinking\n\nWhen you're finished developing or testing with the linked package, you can unlink it:\n\n1. In your project directory:\n\n   ```bash\n   yarn unlink editor-hub\n   ```\n\n2. In the editor-hub directory:\n   ```bash\n   yarn unlink\n   ```\n\nThis will remove the symlinks created by `yarn link`.\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## Future Development\n\nAs we continue to develop Editor Hub, we aim to enhance its capabilities and expand its use cases. Some areas of focus include:\n\n- Enhanced customization options\n- Additional plugins and integrations\n- Improved email template creation and editing\n- Performance optimizations\n\nWe welcome contributions and feedback from the community to help shape the future of Editor Hub.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## Acknowledgments\n\n- [Quill.js](https://quilljs.com/)\n- [quill-better-table](https://github.com/soccerloway/quill-better-table)\n- [quill-mention](https://github.com/afry/quill-mention)\n- [quill-emoji](https://github.com/contentco/quill-emoji)\n\n## Support\n\nIf you have any questions or need help with Editor Hub, please open an issue in the GitHub repository.\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshipmnts%2Feditor-hub","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshipmnts%2Feditor-hub","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshipmnts%2Feditor-hub/lists"}