{"_id":"@bekzatsk/quill-resize-module","_rev":"2-d08272a8ee9c203dedc8a9703d610399","name":"@bekzatsk/quill-resize-module","dist-tags":{"latest":"0.0.1"},"versions":{"2.0.8":{"name":"@bekzatsk/quill-resize-module","version":"2.0.8","keywords":["quill","resize","blot","image","iframe","video","placeholder"],"author":{"name":"bekzatsk","email":"bekzat.saylaubay@gmail.com"},"license":"MIT","_id":"@bekzatsk/quill-resize-module@2.0.8","maintainers":[{"name":"bekzatsk","email":"bekzat.saylaubay@gmail.com"}],"contributors":[{"url":"https://github.com/Wikia","name":"Wikia"}],"homepage":"https://github.com/mudoo/quill-resize-module#readme","bugs":{"url":"https://github.com/mudoo/quill-resize-module/issues"},"dist":{"shasum":"40c052fa1a439bd1f2ef8fad7b61ffab899ddaa2","tarball":"https://registry.npmjs.org/@bekzatsk/quill-resize-module/-/quill-resize-module-2.0.8.tgz","fileCount":17,"integrity":"sha512-LA3Yhs6DSn6gyc6VGhsRxqSmPBvPgIZsVCYKxcXK/xOu2k1T3/3hVd+h6ga0ZUW+FI7bjg+MS6b2NH1cG7DsZg==","signatures":[{"sig":"MEUCIQCxlcQa2cJWuCzvGoNnznCUYPLNOregOCiWGltzN9JA4gIgfKJOLeCzMj2+SVbN0UHEi4SKW9IAhgCx27YbIkquSTg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":216123},"main":"dist/resize.js","module":"src/index.js","gitHead":"afa5324feacd7dd144efc84a9bd85faa48740636","scripts":{"dev":"webpack serve","build":"webpack --mode=production --node-env=production","serve":"webpack serve","watch":"webpack --watch","build:dev":"webpack --mode=development","build:prod":"webpack --mode=production --node-env=production","prepublish":"npm run build"},"_npmUser":{"name":"bekzatsk","email":"bekzat.saylaubay@gmail.com"},"repository":{"url":"git+https://github.com/bekzatsk/quill-resize-module.git","type":"git"},"_npmVersion":"11.5.1","description":"A module for Quill rich text editor to allow images/iframe/video and custom elements to be resized.","directories":{},"_nodeVersion":"24.7.0","_hasShrinkwrap":false,"devDependencies":{"sass":"^1.81.1","quill":"^2.0.0","eslint":"^8.57.1","webpack":"^5.96.1","prettier":"^3.4.1","css-loader":"^7.1.2","@babel/core":"^7.26.0","sass-loader":"^16.0.3","webpack-cli":"^5.1.4","babel-loader":"^9.2.1","style-loader":"^4.0.0","eslint-plugin-n":"^17.15.0","@babel/preset-env":"^7.26.0","webpack-dev-server":"^5.1.0","html-webpack-plugin":"^5.6.3","eslint-plugin-import":"^2.31.0","eslint-plugin-promise":"^7.2.1","eslint-config-standard":"^17.1.0","@webpack-cli/generators":"^3.0.7","mini-css-extract-plugin":"^2.9.2","@babel/plugin-syntax-dynamic-import":"^7.8.3","babel-plugin-transform-object-assign":"^6.22.0"},"_npmOperationalInternal":{"tmp":"tmp/quill-resize-module_2.0.8_1761676567746_0.26284527852572825","host":"s3://npm-registry-packages-npm-production"}},"0.0.1":{"name":"@bekzatsk/quill-resize-module","version":"0.0.1","description":"A module for Quill rich text editor to allow images/iframe/video and custom elements to be resized.","main":"dist/resize.js","module":"src/index.js","scripts":{"dev":"webpack serve","serve":"webpack serve","watch":"webpack --watch","build":"webpack --mode=production --node-env=production","build:dev":"webpack --mode=development","build:prod":"webpack --mode=production --node-env=production","prepublish":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/bekzatsk/quill-resize-module.git"},"keywords":["quill","resize","blot","image","iframe","video","placeholder"],"author":{"name":"bekzatsk","email":"bekzat.saylaubay@gmail.com"},"contributors":[{"name":"Wikia","url":"https://github.com/Wikia"}],"license":"MIT","bugs":{"url":"https://github.com/mudoo/quill-resize-module/issues"},"homepage":"https://github.com/mudoo/quill-resize-module#readme","devDependencies":{"@babel/core":"^7.26.0","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/preset-env":"^7.26.0","@webpack-cli/generators":"^3.0.7","babel-loader":"^9.2.1","babel-plugin-transform-object-assign":"^6.22.0","css-loader":"^7.1.2","eslint":"^8.57.1","eslint-config-standard":"^17.1.0","eslint-plugin-import":"^2.31.0","eslint-plugin-n":"^17.15.0","eslint-plugin-promise":"^7.2.1","html-webpack-plugin":"^5.6.3","mini-css-extract-plugin":"^2.9.2","prettier":"^3.4.1","quill":"^2.0.0","sass":"^1.81.1","sass-loader":"^16.0.3","style-loader":"^4.0.0","webpack":"^5.96.1","webpack-cli":"^5.1.4","webpack-dev-server":"^5.1.0"},"_id":"@bekzatsk/quill-resize-module@0.0.1","gitHead":"afa5324feacd7dd144efc84a9bd85faa48740636","_nodeVersion":"24.7.0","_npmVersion":"11.5.1","dist":{"integrity":"sha512-A9kHc4qDL+ZdCsnqFLKIgqqBfmbhNkjpiNmnxmydC60jc5I9GvL98XCBweQ401wqk2j5LITBdiyDy5BYTkxp0A==","shasum":"401993b7a656e06ace0b67070df7579d83f013ac","tarball":"https://registry.npmjs.org/@bekzatsk/quill-resize-module/-/quill-resize-module-0.0.1.tgz","fileCount":19,"unpackedSize":248050,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBWkKNCl6i2vSc836PqUqDAeJHAq+aAaO6eWYTQwfyxsAiEAyG026uT5jI/BK+OYloCxsZhPMpppGbC0X4AUUnh+Hew="}]},"_npmUser":{"name":"bekzatsk","email":"bekzat.saylaubay@gmail.com"},"directories":{},"maintainers":[{"name":"bekzatsk","email":"bekzat.saylaubay@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/quill-resize-module_0.0.1_1761676704865_0.3506659797775351"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-28T18:36:07.632Z","modified":"2025-10-28T18:38:25.295Z","2.0.8":"2025-10-28T18:36:08.134Z","0.0.1":"2025-10-28T18:38:25.098Z"},"bugs":{"url":"https://github.com/mudoo/quill-resize-module/issues"},"author":{"name":"bekzatsk","email":"bekzat.saylaubay@gmail.com"},"license":"MIT","homepage":"https://github.com/mudoo/quill-resize-module#readme","keywords":["quill","resize","blot","image","iframe","video","placeholder"],"repository":{"type":"git","url":"git+https://github.com/bekzatsk/quill-resize-module.git"},"description":"A module for Quill rich text editor to allow images/iframe/video and custom elements to be resized.","contributors":[{"name":"Wikia","url":"https://github.com/Wikia"}],"maintainers":[{"name":"bekzatsk","email":"bekzat.saylaubay@gmail.com"}],"readme":"# Quill Resize Module\n\nA module for Quill rich text editor to allow images/iframe/video and custom elements to be resized.\n\nThis module is original forked from <https://github.com/whatcould/quill-image-resize-module>.\n\n## Changed V2\n1. Support Quill2\n2. Removed formats/image formats/placeholder\n3. Removed `options.styles`\n4. Add `embedTags` option for custom embed element\n4. Add `tools` option for custom toolbar\n\n## Features\n - Image resize\n - Embed resize (Default to iframe/video tag)\n - Custom any elements resize\n\n - Limit minWidth/maxWidth/minHeight/maxHeight\n - Limit Width/Height ratio\n - Selected embed element style\n - Direction key support\n\n## Demo\n\n<https://codesandbox.io/p/sandbox/9m9vl8>\n![demo](./demo/demo.jpg)\n\n## Usage\n\n### Webpack/ES6\n\n```javascript\nimport Quill from 'quill';\nimport QuillResize from 'quill-resize-module';\nQuill.register('modules/resize', QuillResize);\n\nconst quill = new Quill(editor, {\n    // ...\n    modules: {\n        // ...\n        resize: {\n            // See optional \"config\" below\n        }\n    }\n});\n```\n\n### Script Tag\n\nCopy resize.js into your web root or include from node_modules\n\n```html\n<script src=\"/node_modules/quill-resize-module/dist/resize.js\"></script>\n```\n\n```javascript\nvar quill = new Quill(editor, {\n    // ...\n    modules: {\n        // ...\n        resize: {\n            // See optional \"config\" below\n        }\n    }\n});\n```\n\n### Config\n\nHere's a complete configuration example showing all available options:\n\n```javascript\nconst quill = new Quill(editor, {\n    modules: {\n        resize: {\n            // Enable feature modules\n            modules: ['DisplaySize', 'Toolbar', 'Resize', 'Keyboard'],\n\n            // Enable keyboard arrow keys for selection\n            keyboardSelect: true,\n\n            // CSS classes for selected and active states\n            selectedClass: 'selected',\n            activeClass: 'active',\n\n            // Resizable embedded tags (video and iframe by default)\n            embedTags: ['VIDEO', 'IFRAME'],\n\n            // Toolbar buttons (default: left align, center, right align, full width, edit)\n            tools: ['left', 'center', 'right', 'full', 'edit'],\n\n            // Parchment configuration: set attributes and limits for different element types\n            parchment: {\n                // Image configuration\n                image: {\n                    attribute: ['width'],  // Adjustable attributes\n                    limit: {\n                        minWidth: 100      // Minimum width limit\n                    }\n                },\n                // Video configuration\n                video: {\n                    attribute: ['width', 'height'],  // Adjustable attributes\n                    limit: {\n                        minWidth: 200,     // Minimum width limit\n                        ratio: 0.5625      // Width/height ratio limit (16:9)\n                    }\n                }\n            },\n\n            // Event callbacks\n            onActive: function (blot, target) {\n                // Triggered when an element is activated\n            },\n\n            onInactive: function (blot, target) {\n                // Triggered when an element is deactivated\n            },\n\n            onChangeSize: function (blot, target, size) {\n                // Triggered when element size changes\n            }\n        }\n    }\n});\n```\n\nYou can use only specific modules based on your needs. For example, if you only want resize and size display functionality:\n\n```javascript\nconst quill = new Quill(editor, {\n    modules: {\n        resize: {\n            modules: ['Resize', 'DisplaySize']\n        }\n    }\n});\n```\n\n### Module Details\n\n#### `Resize` Module - Element Resizing\n\nThis module adds drag handles to elements, allowing size adjustment via mouse. The behavior is controlled through the `parchment` configuration for different element types:\n\n```javascript\nconst quill = new Quill(editor, {\n    modules: {\n        resize: {\n            parchment: {\n                // Image element configuration\n                image: {\n                    // Adjustable attributes: ['width'] or ['width', 'height']\n                    attribute: ['width'],\n                    // Size limits\n                    limit: {\n                        minWidth: 200,     // Minimum width\n                        maxWidth: 600,     // Maximum width\n                        minHeight: 200,    // Minimum height\n                        maxHeight: 450,    // Maximum height\n                        ratio: 0.5625      // Width/height ratio (e.g., 16:9 = 0.5625)\n                    }\n                },\n                // Similar configuration can be added for other element types\n                video: {\n                    // ...\n                }\n            }\n        }\n    }\n});\n```\n\n#### `Toolbar` Module - Toolbar\n\nThe toolbar module provides quick action buttons that can be customized through the `tools` option:\n\n1. Predefined buttons:\n- `left`: Left align\n- `center`: Center align\n- `right`: Right align\n- `full`: Full width\n- `edit`: Edit button\n\n2. Custom button example:\n\n```javascript\nconst quill = new Quill(editor, {\n    modules: {\n        resize: {\n            tools: [\n                'left', 'right',  // Use predefined buttons\n                {\n                    text: 'Alt',  // Button text\n                    // Custom button attributes\n                    attrs: {\n                        title: 'Set image alt',\n                        class: 'btn-alt'\n                    },\n                    // Button display condition\n                    verify (activeEle) {\n                        return activeEle?.tagName === 'IMG';\n                    },\n                    // Button click handler\n                    handler (evt, button, activeEle) {\n                        let alt = activeEle.alt || '';\n                        alt = window.prompt('Alt for image', alt);\n                        if (alt != null) {\n                            activeEle.setAttribute('alt', alt);\n                        }\n                    }\n                }\n            ]\n        }\n    }\n});\n```\n\n#### `DisplaySize` Module - Size Display\n\nShows current size information while resizing elements. No additional configuration needed. Included in the default module list:\n\n```javascript\nconst quill = new Quill(editor, {\n    modules: {\n        resize: {\n            modules: ['Resize', 'DisplaySize']\n        }\n    }\n});\n```\n\n#### `Keyboard` Module - Keyboard Support\n\nEnables element selection and manipulation using keyboard arrow keys. Can be controlled using the `keyboardSelect` option:\n\n```javascript\nconst quill = new Quill(editor, {\n    modules: {\n        resize: {\n            keyboardSelect: true  // Enable keyboard arrow key selection\n        }\n    }\n});\n```\n\n#### Custom Module Development\n\nYou can create your own module by extending the `BaseModule` class. Here's a complete example:\n\n```javascript\nimport QuillResize from 'quill-resize-module';\nQuill.register('modules/resize', QuillResize);\n\nclass MyModule extends QuillResize.Modules.Base {\n    // See src/modules/BaseModule.js for documentation on the various lifecycle callbacks\n}\n\nconst quill = new Quill(editor, {\n    modules: {\n        // Other modules...\n        resize: {\n            modules: [MyModule, QuillResize.Modules.Resize],\n            // Other configuration...\n        }\n    }\n});\n```\n","readmeFilename":"README.md"}