@mindfiredigital/textigniter

v1.2.0

Published

2 months ago

TextIgniter JS is a lightweight, powerful, and intuitive HTML editor built using TypeScript.

Downloads

0High
0Medium
0Low

mindfire

lakinmindfire

rich-text-editor html-editor typescript npm-package

🎯 Live Demo

Click the button below to try TextIgniter on StackBlitz:

📑 Table of Contents

✨ Features

Text Formatting

Bold - Make text stand out with bold formatting
Italic - Add emphasis with italic text
Underline - Underline important text
Strikethrough - Cross out text
Subscript - Lower text below the baseline (e.g., H₂O)
Superscript - Raise text above the baseline (e.g., x²)

Text Alignment

Left Align - Align text to the left margin
Center Align - Center text in the editor
Right Align - Align text to the right margin
Justify - Distribute text evenly across the line

Lists & Structure

Bullet List - Create unordered lists with bullets
Numbered List - Create ordered lists with numbers
Headings - Structure content with heading levels
Insert Table - Add tables to organize data
Insert Layout - Create custom layouts

Media & Links

Hyperlink - Add clickable links to web pages
Image - Insert images into your document

Advanced Features

Font Family - Choose from various fonts
Font Size - Adjust text size
Text Color - Change text color
Background Color - Highlight text with background colors
Undo/Redo - Revert or reapply changes
Real-time Content Events 🆕 - Get notified of content changes
Get HTML - Export content as HTML
Get JSON - Export content as JSON
Custom Height - Set custom editor height

📦 Installation

Install TextIgniter using your preferred package manager:

npm

npm install @mindfiredigital/textigniter

yarn

yarn add @mindfiredigital/textigniter

pnpm

pnpm add @mindfiredigital/textigniter

CDN

<!-- Include in your HTML -->
<script src="https://unpkg.com/@mindfiredigital/textigniter@latest/dist/index.js"></script>
<link
  rel="stylesheet"
  href="https://unpkg.com/@mindfiredigital/textigniter@latest/dist/styles/main.css"
/>

🚀 Quick Start

Basic Setup

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TextIgniter JS</title>
    <link
      rel="stylesheet"
      href="node_modules/@mindfiredigital/textigniter/dist/styles/main.css"
    />
  </head>
  <body>
    <div id="editor"></div>

    <script src="node_modules/@mindfiredigital/textigniter/dist/index.js"></script>
    <script>
      // Initialize TextIgniter
      const config = {
        showToolbar: true,
        features: [
          'bold',
          'italic',
          'underline',
          'fontFamily',
          'fontSize',
          'fontColor',
          'bgColor',
          'alignLeft',
          'alignCenter',
          'alignRight',
          'unorderedList',
          'orderedList',
          'hyperlink',
          'image',
        ],
      };

      const editor = new TextIgniter('editor', config);
    </script>
  </body>
</html>

With Real-time Content Updates 🆕

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TextIgniter JS - Real-time Updates</title>
    <link
      rel="stylesheet"
      href="node_modules/@mindfiredigital/textigniter/dist/styles/main.css"
    />
  </head>
  <body>
    <div id="editor"></div>

    <!-- Real-time Content Preview -->
    <div style="margin-top: 20px; padding: 20px; border: 1px solid #ccc;">
      <h3>Live Preview:</h3>
      <div id="html-output"></div>
      <div id="text-output"></div>
    </div>

    <script src="node_modules/@mindfiredigital/textigniter/dist/index.js"></script>
    <script>
      const config = {
        showToolbar: true,
        features: ['bold', 'italic', 'underline', 'fontColor'],
      };

      const editor = new TextIgniter('editor', config);

      // Listen to content changes
      editor.onContentChange(data => {
        console.log('Content changed:', data);
        document.getElementById('html-output').innerHTML =
          `<strong>HTML:</strong><br>${data.html}`;
        document.getElementById('text-output').innerHTML =
          `<strong>Text:</strong><br>${data.text}`;
      });
    </script>
  </body>
</html>

📚 API Reference

Constructor

const editor = new TextIgniter(containerId, config);

Parameters

containerId (string): The ID of the DOM element where the editor will be mounted
config (object): Configuration options

Configuration Options

interface EditorConfig {
  showToolbar?: boolean; // Show/hide toolbar (default: true)
  features?: string[]; // Array of feature names to enable
  height?: string; // Editor height (e.g., '500px', '80vh')
  placeholder?: string; // Placeholder text
}

Available Features

const allFeatures = [
  // Text formatting
  'bold',
  'italic',
  'underline',
  'strikethrough',
  'subscript',
  'superscript',

  // Text styling
  'fontFamily',
  'fontSize',
  'fontColor',
  'bgColor',

  // Alignment
  'alignLeft',
  'alignCenter',
  'alignRight',
  'justify',

  // Lists
  'unorderedList',
  'orderedList',

  // Content
  'heading',
  'hyperlink',
  'image',

  // Structure
  'insertTable',
  'insertLayout',

  // Actions
  'getHtmlContent',
  'loadHtmlContent',
];

Methods

`getContent(): string`

Get the HTML content of the editor.

const htmlContent = editor.getContent();
console.log(htmlContent);

`getTextContent(): string`

Get the plain text content (without HTML tags).

const textContent = editor.getTextContent();
console.log(textContent);

`onContentChange(callback): void` 🆕

Subscribe to content changes. The callback receives an object with html and text properties.

editor.onContentChange(data => {
  console.log('HTML:', data.html);
  console.log('Text:', data.text);
});

🎪 Events

Content Change Event 🆕

The onContentChange event is triggered whenever the editor content changes, providing real-time updates.

editor.onContentChange(data => {
  // data.html - HTML content with formatting
  // data.text - Plain text content

  // Save to backend
  saveToDatabase(data.html);

  // Update character count
  updateCharCount(data.text.length);

  // Auto-save with debouncing
  debouncedSave(data);
});

Event Data Structure

interface ContentChangeData {
  html: string; // Formatted HTML content
  text: string; // Plain text without HTML tags
}

💡 Advanced Usage

Auto-Save Functionality

let saveTimeout;

editor.onContentChange(data => {
  clearTimeout(saveTimeout);
  saveTimeout = setTimeout(() => {
    // Save to backend after 2 seconds of inactivity
    fetch('/api/save', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ content: data.html }),
    });
  }, 2000);
});

Character Counter

const counterElement = document.getElementById('char-count');

editor.onContentChange(data => {
  const charCount = data.text.length;
  const wordCount = data.text.trim().split(/\s+/).length;
  counterElement.textContent = `${charCount} characters, ${wordCount} words`;
});

Content Validation

editor.onContentChange(data => {
  const minLength = 100;
  const currentLength = data.text.length;

  if (currentLength < minLength) {
    showError(`Please write at least ${minLength} characters`);
  } else {
    clearError();
  }
});

Form Integration

const form = document.getElementById('myForm');
const hiddenInput = document.getElementById('content');

editor.onContentChange(data => {
  hiddenInput.value = data.html;
});

form.addEventListener('submit', e => {
  e.preventDefault();
  // Content is already in hiddenInput
  const formData = new FormData(form);
  submitForm(formData);
});

Multiple Editors

// Editor 1
const editor1 = new TextIgniter('editor-1', {
  showToolbar: true,
  features: ['bold', 'italic'],
});

editor1.onContentChange(data => {
  console.log('Editor 1:', data);
});

// Editor 2
const editor2 = new TextIgniter('editor-2', {
  showToolbar: true,
  features: ['fontColor', 'bgColor'],
});

editor2.onContentChange(data => {
  console.log('Editor 2:', data);
});

Custom Height

const editor = new TextIgniter('editor', {
  showToolbar: true,
  height: '600px',
  features: ['bold', 'italic', 'underline'],
});

🤝 Contributing

We welcome contributions from the community! If you'd like to contribute to TextIgniter, please follow these steps:

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

Please read our Contributing Guidelines for more details.

📄 License

Licensed under the MIT License. See LICENSE file for details.

🔗 Links

NPM Package: https://www.npmjs.com/package/@mindfiredigital/textigniter
GitHub Repository: https://github.com/mindfiredigital/textigniterjs
Documentation: https://github.com/mindfiredigital/textigniterjs/tree/main/docs
Issues: https://github.com/mindfiredigital/textigniterjs/issues
Discussions: https://github.com/mindfiredigital/textigniterjs/discussions

Related Packages

React: @mindfiredigital/textigniter-react
Angular: @mindfiredigital/textigniter-angular
Web Component: @mindfiredigital/textigniter-web-component

📞 Support

Need help? Here's how to get support:

📖 Check the Documentation
🐛 Report bugs via GitHub Issues
💬 Ask questions in GitHub Discussions
📧 Contact us at Mindfire Digital

🎉 What's New in v1.2.0

New Features

✨ Real-time Content Events: Added onContentChange() method for live content updates
🎯 Better Performance: Optimized event handling and rendering
📝 Improved API: More intuitive method names and better TypeScript support

Bug Fixes

🐛 Fixed clipboard permission error on page load
🔧 Made clipboard copying opt-in only (activated on button click)
🛠️ Improved memory management and event cleanup

Breaking Changes

None! This is a backward-compatible release.

🌟 Why TextIgniter?

🚀 Lightweight: Minimal bundle size, maximum performance
💪 Powerful: Rich set of features for all your editing needs
🎨 Customizable: Easy to style and configure
🔧 Framework Agnostic: Works with vanilla JS, React, Angular, and more
📱 Responsive: Works seamlessly on desktop and mobile
♿ Accessible: Built with accessibility in mind
🔒 Type Safe: Full TypeScript support
📚 Well Documented: Comprehensive docs and examples
🆓 Open Source: MIT licensed, free to use

🎯 Use Cases

Content Management Systems (CMS)
Blog platforms
Email editors
Comment sections
Note-taking apps
Documentation tools
Forum posts
Social media posts
Product descriptions
Any application requiring rich text editing

🙏 Acknowledgments

Built with ❤️ by Mindfire Digital

Special thanks to all our contributors!