{"_id":"@ammarkhalidfarooq/quill-image-resize-module-react-fix-for-mobile","_rev":"6-766ab6a2af17eaf3127cd2bfea79490b","name":"@ammarkhalidfarooq/quill-image-resize-module-react-fix-for-mobile","dist-tags":{"latest":"3.2.2"},"versions":{"3.0.1":{"name":"@ammarkhalidfarooq/quill-image-resize-module-react-fix-for-mobile","version":"3.0.1","keywords":["quill","quilljs","image","resize","sizer"],"author":{"name":"@kensnyder"},"license":"MIT","_id":"@ammarkhalidfarooq/quill-image-resize-module-react-fix-for-mobile@3.0.1","maintainers":[{"name":"ammarkhalidfarooq","email":"ammarkfarooq@hotmail.com"}],"contributors":[{"url":"https://github.com/Wikia","name":"Wikia"}],"homepage":"https://github.com/agendakids/quill-image-resize-module-react-mobile#readme","bugs":{"url":"https://github.com/agendakids/quill-image-resize-module-react-mobile/issues"},"dist":{"shasum":"9454a5c25c3369e743fa91bd3a427ed6a94ef802","tarball":"https://registry.npmjs.org/@ammarkhalidfarooq/quill-image-resize-module-react-fix-for-mobile/-/quill-image-resize-module-react-fix-for-mobile-3.0.1.tgz","fileCount":17,"integrity":"sha512-9XXoZiXgXcjVq+AKbapQ+INVOLXD6RUya8O6FO/qehW/EoscNBjelj3dXspSM8QaMKCg1JByEFDOhVDM1RbkHA==","signatures":[{"sig":"MEYCIQCFM4PbHbZ7uTaNUPHphM4rXLNUQSvA98xGU8lgWGbR2QIhAIIuzwMa2T+O0RzoGFCLoDyFzllYyIy6AxW0/vy2T8ti","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":452095},"main":"image-resize.min.js","gitHead":"0c1173e210480f4a35772870ff503e555b9286c9","scripts":{"dev":"webpack --progress --colors --watch","lint":"eslint --ext js,es6 src","test":"echo \"Error: no test specified\" && exit 0","build":"webpack -p --progress --colors","fixlint":"eslint --fix --ext js,es6 src"},"_npmUser":{"name":"ammarkhalidfarooq","email":"ammarkfarooq@hotmail.com"},"repository":{"url":"git+https://github.com/Ace217/quill-image-resize-module-react-mobile.git","type":"git"},"_npmVersion":"8.15.0","description":"A module for Quill rich text editor to allow images to be resized (with react fixes for mobile devices).","directories":{},"_nodeVersion":"16.17.0","dependencies":{"quill":"^1.2.2","lodash":"^4.17.4","raw-loader":"^0.5.1"},"_hasShrinkwrap":true,"devDependencies":{"eslint":"^3.19.0","webpack":"^2.7.0","babel-cli":"^6.24.0","babel-eslint":"^7.2.1","babel-loader":"^6.4.1","babel-preset-env":"^1.2.2","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^6.10.3","eslint-config-airbnb":"^14.1.0","eslint-plugin-import":"^2.2.0","eslint-plugin-jsx-a11y":"^4.0.0","babel-plugin-transform-class-properties":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/quill-image-resize-module-react-fix-for-mobile_3.0.1_1711346959238_0.5810285102891328","host":"s3://npm-registry-packages"}},"3.1.0":{"name":"@ammarkhalidfarooq/quill-image-resize-module-react-fix-for-mobile","version":"3.1.0","keywords":["quill","quilljs","image","resize","sizer"],"author":{"name":"@kensnyder"},"license":"MIT","_id":"@ammarkhalidfarooq/quill-image-resize-module-react-fix-for-mobile@3.1.0","maintainers":[{"name":"ammarkhalidfarooq","email":"ammarkfarooq@hotmail.com"}],"contributors":[{"url":"https://github.com/Wikia","name":"Wikia"}],"homepage":"https://github.com/agendakids/quill-image-resize-module-react-mobile#readme","bugs":{"url":"https://github.com/agendakids/quill-image-resize-module-react-mobile/issues"},"dist":{"shasum":"5e831f0bc501c2a542bf2fe5d69ddffef572c6fb","tarball":"https://registry.npmjs.org/@ammarkhalidfarooq/quill-image-resize-module-react-fix-for-mobile/-/quill-image-resize-module-react-fix-for-mobile-3.1.0.tgz","fileCount":17,"integrity":"sha512-bthCBT9fDwrAXK4Vs2UvrO11fqcXe9k8dIv6tHSUh/u8X39Q9iot/lVomNWov8cOJR/d7fhatZVW+crZyg+tdA==","signatures":[{"sig":"MEUCIEoxrIHYDIZT9a0kPy/1xSLv41wub9wjTGX1LRQD145iAiEA7kQdEshv9BFM4lQ8bgh6AoLNXPLQ+QlhHtONFuHxHeY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":452166},"main":"image-resize.min.js","gitHead":"4774826b829bd2143fdff695c73267ad352a853a","scripts":{"dev":"webpack --progress --colors --watch","lint":"eslint --ext js,es6 src","test":"echo \"Error: no test specified\" && exit 0","build":"webpack -p --progress --colors","fixlint":"eslint --fix --ext js,es6 src"},"_npmUser":{"name":"ammarkhalidfarooq","email":"ammarkfarooq@hotmail.com"},"repository":{"url":"git+https://github.com/Ace217/quill-image-resize-module-react-mobile.git","type":"git"},"_npmVersion":"8.15.0","description":"A module for Quill rich text editor to allow images to be resized (with react fixes for mobile devices).","directories":{},"_nodeVersion":"16.17.0","dependencies":{"quill":"^1.2.2","lodash":"^4.17.4","raw-loader":"^0.5.1"},"_hasShrinkwrap":true,"devDependencies":{"eslint":"^3.19.0","webpack":"^2.7.0","babel-cli":"^6.24.0","babel-eslint":"^7.2.1","babel-loader":"^6.4.1","babel-preset-env":"^1.2.2","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^6.10.3","eslint-config-airbnb":"^14.1.0","eslint-plugin-import":"^2.2.0","eslint-plugin-jsx-a11y":"^4.0.0","babel-plugin-transform-class-properties":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/quill-image-resize-module-react-fix-for-mobile_3.1.0_1711348103921_0.586917166660456","host":"s3://npm-registry-packages"}},"3.1.1":{"name":"@ammarkhalidfarooq/quill-image-resize-module-react-fix-for-mobile","version":"3.1.1","keywords":["quill","quilljs","image","resize","sizer"],"author":{"name":"@kensnyder"},"license":"MIT","_id":"@ammarkhalidfarooq/quill-image-resize-module-react-fix-for-mobile@3.1.1","maintainers":[{"name":"ammarkhalidfarooq","email":"ammarkfarooq@hotmail.com"}],"contributors":[{"url":"https://github.com/Wikia","name":"Wikia"}],"homepage":"https://github.com/agendakids/quill-image-resize-module-react-mobile#readme","bugs":{"url":"https://github.com/agendakids/quill-image-resize-module-react-mobile/issues"},"dist":{"shasum":"ebffd49d2e553f0aa2f2bf842c9ffb3a07c6560f","tarball":"https://registry.npmjs.org/@ammarkhalidfarooq/quill-image-resize-module-react-fix-for-mobile/-/quill-image-resize-module-react-fix-for-mobile-3.1.1.tgz","fileCount":17,"integrity":"sha512-8LSRTFciHqMJAxzl8nqYtLVj8bFD3tVu0uUvLbmrWTO+7Xu1H2WArkrZD9ilmHe86oXL5UNfNgGQigeELpX/cg==","signatures":[{"sig":"MEQCIBwXwVS9FuTsAHuHDf8TeeJrLcXRppkV5WQErx5bQM6QAiBgYfjT/dHtylfFHoYQ1PPQBlWeIEPpoNPHANDSfvIHxQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":452222},"main":"image-resize.min.js","gitHead":"cec37e956438a5ae1cfc68aaf250c30f5ea18385","scripts":{"dev":"webpack --progress --colors --watch","lint":"eslint --ext js,es6 src","test":"echo \"Error: no test specified\" && exit 0","build":"webpack -p --progress --colors","fixlint":"eslint --fix --ext js,es6 src"},"_npmUser":{"name":"ammarkhalidfarooq","email":"ammarkfarooq@hotmail.com"},"repository":{"url":"git+https://github.com/Ace217/quill-image-resize-module-react-mobile.git","type":"git"},"_npmVersion":"8.15.0","description":"A module for Quill rich text editor to allow images to be resized (with react fixes for mobile devices).","directories":{},"_nodeVersion":"16.17.0","dependencies":{"quill":"^1.2.2","lodash":"^4.17.4","raw-loader":"^0.5.1"},"_hasShrinkwrap":true,"devDependencies":{"eslint":"^3.19.0","webpack":"^2.7.0","babel-cli":"^6.24.0","babel-eslint":"^7.2.1","babel-loader":"^6.4.1","babel-preset-env":"^1.2.2","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^6.10.3","eslint-config-airbnb":"^14.1.0","eslint-plugin-import":"^2.2.0","eslint-plugin-jsx-a11y":"^4.0.0","babel-plugin-transform-class-properties":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/quill-image-resize-module-react-fix-for-mobile_3.1.1_1711348359131_0.2330896689404316","host":"s3://npm-registry-packages"}},"3.1.2":{"name":"@ammarkhalidfarooq/quill-image-resize-module-react-fix-for-mobile","version":"3.1.2","keywords":["quill","quilljs","image","resize","sizer"],"author":{"name":"@kensnyder"},"license":"MIT","_id":"@ammarkhalidfarooq/quill-image-resize-module-react-fix-for-mobile@3.1.2","maintainers":[{"name":"ammarkhalidfarooq","email":"ammarkfarooq@hotmail.com"}],"contributors":[{"url":"https://github.com/Wikia","name":"Wikia"}],"homepage":"https://github.com/agendakids/quill-image-resize-module-react-mobile#readme","bugs":{"url":"https://github.com/agendakids/quill-image-resize-module-react-mobile/issues"},"dist":{"shasum":"07680765fb4f6927f9aea4387c8e9deba274da4b","tarball":"https://registry.npmjs.org/@ammarkhalidfarooq/quill-image-resize-module-react-fix-for-mobile/-/quill-image-resize-module-react-fix-for-mobile-3.1.2.tgz","fileCount":17,"integrity":"sha512-JhcAobm8nkvXABI6sW0kTP2jsHFCz3NLtAFpWS1aADWZehpfHtvvHMXWf9G7on270MIQ1Yt8W6qBTqojWiqrlA==","signatures":[{"sig":"MEYCIQCnbUhfvry9sfzNp9tfHUaFw+lT7REaoPx1qD14KB9ZwQIhAJKfwu4JuHlNxscR7OqwlCkDYEst1rB7xKo9ZUoAZE1+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":452374},"main":"image-resize.min.js","gitHead":"39a8f8112f0b96608d58468ecbc20f30a7691bc9","scripts":{"dev":"webpack --progress --colors --watch","lint":"eslint --ext js,es6 src","test":"echo \"Error: no test specified\" && exit 0","build":"webpack -p --progress --colors","fixlint":"eslint --fix --ext js,es6 src"},"_npmUser":{"name":"ammarkhalidfarooq","email":"ammarkfarooq@hotmail.com"},"repository":{"url":"git+https://github.com/Ace217/quill-image-resize-module-react-mobile.git","type":"git"},"_npmVersion":"8.15.0","description":"A module for Quill rich text editor to allow images to be resized (with react fixes for mobile devices).","directories":{},"_nodeVersion":"16.17.0","dependencies":{"quill":"^1.2.2","lodash":"^4.17.4","raw-loader":"^0.5.1"},"_hasShrinkwrap":true,"devDependencies":{"eslint":"^3.19.0","webpack":"^2.7.0","babel-cli":"^6.24.0","babel-eslint":"^7.2.1","babel-loader":"^6.4.1","babel-preset-env":"^1.2.2","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^6.10.3","eslint-config-airbnb":"^14.1.0","eslint-plugin-import":"^2.2.0","eslint-plugin-jsx-a11y":"^4.0.0","babel-plugin-transform-class-properties":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/quill-image-resize-module-react-fix-for-mobile_3.1.2_1711348896999_0.8683162795300754","host":"s3://npm-registry-packages"}},"3.2.2":{"name":"@ammarkhalidfarooq/quill-image-resize-module-react-fix-for-mobile","version":"3.2.2","keywords":["quill","quilljs","image","resize","sizer"],"author":{"name":"@kensnyder"},"license":"MIT","_id":"@ammarkhalidfarooq/quill-image-resize-module-react-fix-for-mobile@3.2.2","contributors":[{"url":"https://github.com/Wikia","name":"Wikia"}],"homepage":"https://github.com/agendakids/quill-image-resize-module-react-mobile#readme","bugs":{"url":"https://github.com/agendakids/quill-image-resize-module-react-mobile/issues"},"dist":{"shasum":"890c5ff96598c2f75e7ab5e80b7f71ad2fb145a7","tarball":"https://registry.npmjs.org/@ammarkhalidfarooq/quill-image-resize-module-react-fix-for-mobile/-/quill-image-resize-module-react-fix-for-mobile-3.2.2.tgz","fileCount":17,"integrity":"sha512-Iso5/+Q6QzA79cEhQb6S1NUCo8MeSGoMLMaQLmQ4iHLkUUyqaRVYN9eM2JpckRbaz1ltg4cIEqG1QJznpnm7FA==","signatures":[{"sig":"MEUCIAI+NtFc6vJ6wIHMt6PuAAq1xebWIaq451qNdlpJCpYLAiEAu+28CykNP9dXb2VX4f7ycnv5Dl44eQWzSJ/3ukCw314=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":463245},"main":"image-resize.min.js","gitHead":"5880009be40aca649388cb1173c7a764588c67ba","scripts":{"dev":"webpack --progress --colors --watch","lint":"eslint --ext js,es6 src","test":"echo \"Error: no test specified\" && exit 0","build":"webpack -p --progress --colors","fixlint":"eslint --fix --ext js,es6 src"},"_npmUser":{"name":"ammarkhalidfarooq","email":"ammarkfarooq@hotmail.com"},"repository":{"url":"git+https://github.com/Ace217/quill-image-resize-module-react-mobile.git","type":"git"},"_npmVersion":"10.2.4","description":"A module for Quill rich text editor to allow images to be resized (with react fixes for mobile devices).","directories":{},"_nodeVersion":"20.11.1","dependencies":{"quill":"^1.2.2","lodash":"^4.17.4"},"_hasShrinkwrap":true,"devDependencies":{"eslint":"^3.19.0","webpack":"^2.7.0","babel-cli":"^6.24.0","file-loader":"^6.2.0","babel-eslint":"^7.2.1","babel-loader":"^6.4.1","babel-preset-env":"^1.2.2","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^6.10.3","eslint-config-airbnb":"^14.1.0","eslint-plugin-import":"^2.2.0","eslint-plugin-jsx-a11y":"^4.0.0","babel-plugin-transform-class-properties":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/quill-image-resize-module-react-fix-for-mobile_3.2.2_1719578820710_0.22728680906921928","host":"s3://npm-registry-packages"}}},"time":{"created":"2024-03-25T06:09:19.133Z","modified":"2026-08-12T16:17:22.732Z","3.0.1":"2024-03-25T06:09:19.440Z","3.1.0":"2024-03-25T06:28:24.090Z","3.1.1":"2024-03-25T06:32:39.267Z","3.1.2":"2024-03-25T06:41:37.149Z","3.2.2":"2024-06-28T12:47:00.856Z"},"bugs":{"url":"https://github.com/agendakids/quill-image-resize-module-react-mobile/issues"},"author":{"name":"@kensnyder"},"license":"MIT","homepage":"https://github.com/agendakids/quill-image-resize-module-react-mobile#readme","keywords":["quill","quilljs","image","resize","sizer"],"repository":{"url":"git+https://github.com/Ace217/quill-image-resize-module-react-mobile.git","type":"git"},"description":"A module for Quill rich text editor to allow images to be resized (with react fixes for mobile devices).","contributors":[{"url":"https://github.com/Wikia","name":"Wikia"}],"maintainers":[{"email":"ammarkfarooq@hotmail.com","name":"ammarkhalidfarooq"},{"email":"digital@madinah.com","name":"madinah.com"}],"readme":"[![Build Status](https://travis-ci.org/concrete-cc/quill-image-resize-module-react.svg?branch=master)](https://travis-ci.org/concrete-cc/quill-image-resize-module-react)\r\n\r\n# Quill ImageResize Module\r\n\r\nA module for Quill rich text editor to allow images to be resized. This will allow images to be resized in mobile and will unfocus on scroll so that resize box does not cause issues.\r\n\r\nAlso see [quill-image-drop-module](https://github.com/kensnyder/quill-image-drop-module),\r\na module that enables copy-paste and drag/drop for Quill.\r\n\r\n## Demo\r\n\r\n[Plunker](https://plnkr.co/edit/gq708AOrSBOWSlHcFslG?p=preview)\r\n\r\n## Usage\r\n\r\n### Webpack/ES6\r\n\r\n```javascript\r\nimport Quill from 'quill';\r\nimport ImageResize from '@ammarkhalidfarooq/quill-image-resize-module-react-fix-for-mobile';\r\n\r\nQuill.register('modules/imageResize', ImageResize);\r\n\r\nconst quill = new Quill(editor, {\r\n    // ...\r\n    modules: {\r\n        // ...\r\n        imageResize: {\r\n            parchment: Quill.import('parchment')\r\n            // See optional \"config\" below\r\n        }\r\n    }\r\n});\r\n```\r\n\r\n### Script Tag\r\n\r\nCopy image-resize.min.js into your web root or include from node_modules\r\n\r\n```html\r\n<script src=\"/node_modules/quill-image-resize-module/image-resize.min.js\"></script>\r\n```\r\n\r\n```javascript\r\nvar quill = new Quill(editor, {\r\n    // ...\r\n    modules: {\r\n        // ...\r\n        ImageResize: {\r\n            // See optional \"config\" below\r\n        }\r\n    }\r\n});\r\n```\r\n\r\n### Config\r\n\r\nFor the default experience, pass an object with parchment, like so:\r\n```javascript\r\nvar quill = new Quill(editor, {\r\n    // ...\r\n    modules: {\r\n        // ...\r\n        ImageResize: {\r\n            parchment: Quill.import('parchment')\r\n        }\r\n    }\r\n});\r\n```\r\n\r\nFunctionality is broken down into modules, which can be mixed and matched as you like. For example,\r\nthe default is to include all modules:\r\n\r\n```javascript\r\nconst quill = new Quill(editor, {\r\n    // ...\r\n    modules: {\r\n        // ...\r\n        ImageResize: {\r\n            modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]\r\n        }\r\n    }\r\n});\r\n```\r\n\r\nEach module is described below.\r\n\r\n#### `Resize` - Resize the image\r\n\r\nAdds handles to the image's corners which can be dragged with the mouse to resize the image.\r\n\r\nThe look and feel can be controlled with options:\r\n\r\n```javascript\r\nvar quill = new Quill(editor, {\r\n    // ...\r\n    modules: {\r\n        // ...\r\n        ImageResize: {\r\n            // ...\r\n            handleStyles: {\r\n                backgroundColor: 'black',\r\n                border: 'none',\r\n                color: white\r\n                // other camelCase styles for size display\r\n            }\r\n        }\r\n    }\r\n});\r\n```\r\n\r\n#### `DisplaySize` - Display pixel size\r\n\r\nShows the size of the image in pixels near the bottom right of the image.\r\n\r\nThe look and feel can be controlled with options:\r\n\r\n```javascript\r\nvar quill = new Quill(editor, {\r\n    // ...\r\n    modules: {\r\n        // ...\r\n        ImageResize: {\r\n            // ...\r\n            displayStyles: {\r\n                backgroundColor: 'black',\r\n                border: 'none',\r\n                color: white\r\n                // other camelCase styles for size display\r\n            }\r\n        }\r\n    }\r\n});\r\n```\r\n\r\n#### `Toolbar` - Image alignment tools\r\n\r\nDisplays a toolbar below the image, where the user can select an alignment for the image.\r\n\r\nThe look and feel can be controlled with options:\r\n\r\n```javascript\r\nvar quill = new Quill(editor, {\r\n    // ...\r\n    modules: {\r\n        // ...\r\n        ImageResize: {\r\n            // ...\r\n            toolbarStyles: {\r\n                backgroundColor: 'black',\r\n                border: 'none',\r\n                color: white\r\n                // other camelCase styles for size display\r\n            },\r\n            toolbarButtonStyles: {\r\n                // ...\r\n            },\r\n            toolbarButtonSvgStyles: {\r\n                // ...\r\n            },\r\n        }\r\n    }\r\n});\r\n```\r\n\r\n#### `BaseModule` - Include your own custom module\r\n\r\nYou can write your own module by extending the `BaseModule` class, and then including it in\r\nthe module setup.\r\n\r\nFor example,\r\n\r\n```javascript\r\nimport { Resize, BaseModule } from 'quill-image-resize-module';\r\n\r\nclass MyModule extends BaseModule {\r\n    // See src/modules/BaseModule.js for documentation on the various lifecycle callbacks\r\n}\r\n\r\nvar quill = new Quill(editor, {\r\n    // ...\r\n    modules: {\r\n        // ...\r\n        ImageResize: {\r\n            modules: [ MyModule, Resize ],\r\n            // ...\r\n        }\r\n    }\r\n});\r\n```\r\n\r\n### Credit\r\n\r\nThis lib is basically [quill-image-resize-module](https://github.com/kensnyder/quill-image-resize-module),\r\nReactJS implemented [quill-image-resize-module-react](https://github.com/concrete-cc/quill-image-resize-module-react),\r\n","readmeFilename":"README.md"}