textcrafter

TextCrafter

TextCrafter is a powerful, flexible, and fully customizable rich text editor built specifically for modern React applications. It supports a comprehensive set of formatting tools and HTML elements, including text styles, tables, lists, links, and images. Designed with compatibility and ease of integration in mind, TextCrafter works seamlessly with both React and Next.js (App Router and Page Router), and supports projects written in JavaScript or TypeScript. Whether you're building a blog platform, CMS, or document editor, TextCrafter provides a robust editing experience with fast installation via npm or Yarn.

Key Features

• Rich Text Formatting: Bold, italic, underline, strikethrough, custom font families, and font sizes.
• Text Alignment: Align text left, center, right, or justify.
• Lists: Support for unordered and ordered lists.
• Tables: Easily add or remove rows and columns.
• Links & Images: Insert links and images (via URLs).
• Undo & Redo: Restore previous actions quickly.
• Customizable Toolbar & Editor: Extend and style the toolbar to match your design.
• Cross-Compatible: Compatible with React, Next.js, TypeScript, and JavaScript.
• Drag-and-Drop Image Upload: Drag images directly into the editor for easy insertion.
• External Media Management: Upload images to a server when dropped or selected. No security risk.

Installation

To install TextCrafter, choose your preferred package manager:

npm

npm install textcrafter

Yarn

yarn add textcrafter

Getting Started

Basic Setup for React

• Import the Editor Styles
  Import the editor's default stylesheet into your main app component to apply necessary styles.

  import "textcrafter/dist/styles.min.css";
  

• Implement the Editor Component
  Import and use the Editor component within your React component.

  import React, { useState } from "react";
  import { Editor } from "textcrafter";
  
  const MyEditor = () => {
    const [editorContent, setEditorContent] = useState(
      "<p>Start editing...</p>"
    );
  
    const handleEditorChange = (content: string) => {
      setEditorContent(content);
    };
  
    return (
      <div>
        <Editor value={editorContent} onChange={handleEditorChange} />
      </div>
    );
  };
  
  export default MyEditor;
  

• External Server Functionality for Image

import { useState } from "react";
import "./App.css";
import { Editor } from "textcrafter";
import "textcrafter/dist/styles.min.css";

function App() {
  const [editorContent, setEditorContent] = useState("<p>Start editing...</p>");

  const handleEditorChange = (content: string) => {
    setEditorContent(content);
  };

  const handleImageUpload = async (file: File): Promise<string> => {
    // We just need the image URL
    // You can handle image with formdata or base64
    // Upload image to server and return Image URL

    const formData = new FormData();
    formData.append("image", file);

    // handle the image upload
    const response = await fetch("/api/upload-image", {
      method: "POST",
      headers: {
        Authorization: "Bearer token",
      },
      body: formData,
    });
    const data = await response.json();

    return data.imageUrl; // return the image url
  };

  const handleImageDelete = async (imgSrc: string) => {
    // Write your own delete functionality
    const response = await fetch(
      `/image-delete?src=${encodeURIComponent(imgSrc)}`,
      { method: "DELETE" }
    );
    await response.json();
  };

  return (
    <div>
      <Editor
        isServer
        value={editorContent}
        toolbarClassName="custom-toolbar" //customize toolbar
        editorClassName="custom-editor"  //customize editor
        handleImageUpload={handleImageUpload}
        handleImageDelete={handleImageDelete}
        onChange={handleEditorChange}
      />
    </div>
  );
}

export default App;

Using TextCrafter with Next.js

For App Router (Next.js 13+ with React Server Components)

• Import Styles
  Import the editor styles in your root layout to apply them globally.

  import "textcrafter/dist/styles.min.css";
  

• Add the Editor Component in Page Components
  Use the Editor component in your page-level components.

  import React, { useState } from "react";
  import { Editor } from "textcrafter";
  
  const PageComponent = () => {
    const [editorContent, setEditorContent] = useState("<p>Edit here...</p>");
  
    const handleEditorChange = (content: string) => {
      setEditorContent(content);
    };
  
    return (
      <div>
        <Editor value={editorContent} onChange={handleEditorChange} />
      </div>
    );
  };
  
  export default PageComponent;
  

For Page Router (Traditional Next.js Routing)

• Import Styles in the _app Component
  Include the editor styles in the _app.js or _app.tsx file.

  import "textcrafter/dist/styles.min.css";
  

• Add the Editor Component in Page Components

  import React, { useState } from "react";
  import { Editor } from "textcrafter";
  
  const HomePage = () => {
    const [editorContent, setEditorContent] = useState("<p>Edit here...</p>");
  
    const handleEditorChange = (content: string) => {
      setEditorContent(content);
    };
  
    return (
      <div>
        <Editor value={editorContent} onChange={handleEditorChange} />
      </div>
    );
  };
  
  export default HomePage;
  

Configuration

TextCrafter offers extensive configuration options to customize the editor to fit your project’s requirements:

• Font Family: Choose from fonts like Arial, Courier New, Times New Roman, etc.
• Font Size: Select font sizes ranging from Tiny to Huge.
• Text Formatting: Toggle bold, italic, underline, and strikethrough.
• Text Alignment: Align text to the left, center, right, or fully justify it.
• Lists: Add ordered and unordered lists for organized content.
• Tables: Insert and configure tables with customizable rows and columns.

Styling

You can easily modify TextCrafter’s appearance by updating the provided CSS or adding custom styles. The toolbar and editor areas are designed for straightforward customization, allowing you to style them to fit your application’s theme.

To customize the editor and toolbar, pass your className through props:

toolbarClassName = "custom-toolbar";
editorClassName = "custom-editor";

/* You can customize as your requirement*/
.custom-toolbar {
  background-color: #f3f3f3;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Custom shadow */
}

.custom-editor {
  padding: 10px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 5px;
}

Contributing

Contributions are highly welcome! To contribute:

• Fork this repository.
• Make your changes in a new branch.
• Submit a pull request, and our team will review it promptly.

License

TextCrafter is licensed under the MIT License. See LICENSE for more details.

TextCrafter combines rich functionality with ease of use, providing a smooth editing experience in any React or Next.js application. Happy coding!