@botom/quill-resize-module

v2.1.0

Published

9 days ago

🔒 Secure & modern Quill.js module for resizing images, videos, and iframes with zero vulnerabilities and automatic releases

Quill Resize Module

A modern, secure module for the Quill rich text editor that allows you to resize images, videos, and iframes with comprehensive security updates and enhanced features.

npm version GitHub license GitHub stars Security

✨ Features

🖼️ Image Resizing - Resize images with drag handles
🎥 Video Resizing - Resize videos maintaining aspect ratio
📱 Responsive Design - Works on all devices
🌐 Multi-language Support - Customizable locale options
🔒 Security First - Zero vulnerabilities, modern dependencies
⚡ Performance Optimized - Lightweight and fast
🎨 Customizable Toolbar - Show/hide alignment and size tools
📏 Size Display - Optional size indicator

🚀 Demo

Live Demo: https://botoom.github.io/quill-resize-module/

Demo

📦 Installation

npm install @botom/quill-resize-module

🛠️ Usage

ES6/TypeScript

import Quill from "quill";
import ResizeModule from "@botom/quill-resize-module";

Quill.register("modules/resize", ResizeModule);

const quill = new Quill("#editor", {
  modules: {
    resize: {
      showSize: true,
      locale: {
        altTip: "Hold down the alt key to zoom",
        floatLeft: "Left",
        floatRight: "Right", 
        center: "Center",
        restore: "Restore",
      },
    },
  },
});

Browser (CDN)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Quill Resize Module Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@botom/quill-resize-module@latest/dist/quill-resize-module.js"></script>
</head>
<body>
  <div id="editor"></div>
  <script>
    Quill.register("modules/resize", window.QuillResizeModule);
    
    const quill = new Quill("#editor", {
      modules: {
        toolbar: ["bold", "italic", "image", "video"],
        resize: {
          showSize: true,
          locale: {}
        }
      },
      theme: "snow"
    });
  </script>
</body>
</html>

⚙️ Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | showToolbar | boolean | true | Show/hide the toolbar | | showSize | boolean | false | Display current dimensions | | locale | object | {} | Custom language strings | | toolbar.sizeTools | boolean | true | Show size adjustment tools | | toolbar.alingTools | boolean | true | Show alignment tools |

Locale Configuration

const quill = new Quill("#editor", {
  modules: {
    resize: {
      locale: {
        altTip: "Hold down the alt key to zoom",
        floatLeft: "Left",
        floatRight: "Right",
        center: "Center",
        restore: "Restore",
      },
    },
  },
});

Toolbar Customization

// Hide alignment tools (for newer Quill versions)
const quill = new Quill("#editor", {
  modules: {
    resize: {
      toolbar: {
        alingTools: false,  // Hide alignment
        sizeTools: true,   // Keep size tools
      },
    },
  },
});

🔧 Advanced Configuration

For the latest versions of Quill that don't support the style attribute:

const quill = new Quill("#editor", {
  modules: {
    resize: {
      toolbar: {
        alingTools: false,  // Disable alignment tools
      },
      showSize: true,
    },
  },
});

🐛 Bug Fixes & Security

Recent Fixes

✅ Fixed positioning when nested inside relative elements (PR #12)
✅ Security vulnerabilities resolved (DOM Clobbering XSS, RCE)
✅ Dependencies updated to latest secure versions
✅ Build system modernized with Rollup v3

Security Status

🔒 0 vulnerabilities (npm audit)
🛡️ Modern dependencies (no deprecated packages)
✅ CI/CD security with Node.js 20.x

📱 Browser Support

| Browser | Version | |---------|---------| | Chrome | 70+ | | Firefox | 65+ | | Safari | 12+ | | Edge | 79+ |

🤝 Contributing

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'feat: add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Commit Convention

This project follows Conventional Commits for automated versioning:

feat: for new features
fix: for bug fixes
docs: for documentation
style: for formatting
refactor: for code refactoring
test: for tests
chore: for maintenance

📋 Development

# Clone the repository
git clone https://github.com/BOTOOM/quill-resize-module.git
cd quill-resize-module

# Install dependencies
npm install

# Start development
npm run dev

# Run tests
npm test

# Build for production
npm run build

📄 License

🔗 Related Projects

Quill.js - Modern rich text editor
Quill Image Resize - Alternative image resize module

📊 Stats

GitHub issues GitHub pull requests