Tapwrite

Enhance your web applications with `Tapwrite`, a robust WYSIWYG rich text editor component for React built on top of Tiptap designed to integrate seamlessly into your projects. This component supports image and PDF file handling within the text editor environment, Table, and Slash command menu, simplifying content management for users and developers alike.

Description

Building text editors for browsers from scratch is challenging, with few options for seamless integration into browser-based applications. Headless technologies like Tiptap offer customization but demand time and effort. Tapwrite is a lightweight, effortless solution for developers, providing a seamless rich text editing experience with zero configuration needed. Easily incorporate features like image and file uploads directly within the editor environment.

Installation

Install Tapwrite with npm by running the following command:

npm i tapwrite

Usage

Here’s how to implement Tapwrite in your project:

import { Tapwrite, ImagePickerUtils } from 'tapwrite';

<Tapwrite
  // Function triggered after a file is selected. Parameter uploadFn is optional.
  uploadFn={async (file, tiptapEditorUtils) => {
    // 'file' is the selected image or attachments of type File. The uploadFn should return a url for src of the file. 
  }}
  content=""  // Pass the initial content to be rendered in the editor.
  readonly    // Make the editor read-only.
  onBlur = () => {} //callback function to call on blurring the editor.

  getContent={(content) => console.log(content)}  // Function to output the current content of the editor.
  deleteEditorAttachments = {async(id) => { }}  // Function to invoke after deleting attachments/Images from the editor.
  className={className} // custom classname for Editor.
  hardbreak={false} // applies hardbreak on the editor.
  attachmentLayout={attachmentLayout} // custom React node for attachments.
  maxUploadLimit ={maxUploadLimit} //for limiting the size of attachments.
  
/>

Demo

Screencast.from.02-05-2025.06.58.16.PM.webm

Testing Locally

• Clone the Tapwrite repository and apply your changes.

• Run npm run build to transpile your changes.

• Run npm pack which creates a .tgz(tarball) file of the build. It essentially bundles your package just like npm publish but without actually publishing it.

  

• In your package.json, replace the value of tapwrite in dependencies with the path of your .tgz file.

  

• Run npm install

• To revert the changes and use the published version, simply run npm i tapwrite

Contributions

Contributions are vital for the continuous improvement of Tapwrite. If you're interested in contributing, please feel free to submit pull requests or share your ideas and feedback through issues on our GitHub repository.

Contribution Guidelines

Coding Standards

• Linting: Use ESLint and Prettier to maintain code consistency.
• TypeScript: Ensure all contributions are typed.
• Documentation: Update relevant documentation (e.g., README, inline comments) for new features.
• Commit Messages: Follow Conventional Commits.

Submitting Pull Requests

• Use descriptive branch names.
• Pull Request Template :
  • Describe changes and motivation.
  • Reference related issues if there are any.
  • Attach screenshots/videos for testing and UI changes.
• Be responsive to feedback.

Reporting issues

• Use the GitHub Issues template.
• Please describe :
  • Steps to Reproduce in detail.
  • Expected vs. Actual Behavior comparison.
  • Screenshots/Logs.
  • Environment.

Future Enhancements

We have plans on enhancing Tapwrite in the future versions. The immediate requirements are:

• Implement mentions.
• Optimize custom node view extensions : Image, Attachments, Mentions.
• Add ability to style the editor, slash command menu, and bubble menu.
• Ability to extend the Titap editor plugins to include custom features
• Ability to add further commands in the slash command menu/bubble menu

Philosophy

We strive for Tapwrite to seamlessly integrate with your app without extensive configuration requirements. However, we also value its potential for extension, such as the ability to customize Tiptap editor plugins to include custom features, which is part of our future enhancements plan. Our aim is for Tapwrite to operate with zero configuration while offering simple, minimal configuration options for customizing and enhancing its core behavior. We actively encourage contributors to uphold this philosophy when working on feature enhancements.