adore-quill-image-resize 4.0.0

package/.editorconfig

@@ -0,0 +1,16 @@
+# EditorConfig is awesome: http://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+charset = utf-8
+indent_style = tab
+indent_size = 4
+
+[*.json,*.eslintrc]
+indent_style = space
+indent_size = 2

package/.eslintrc

@@ -0,0 +1,33 @@
+{
+  "env": {
+    "browser": true,
+    "node": true,
+    "mocha": true,
+    "es6": true
+  },
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "forOf": true,
+      "es6": true,
+      "experimentalObjectRestSpread": true
+    }
+  },
+  "rules": {
+	"comma-dangle": [2, "always-multiline"],
+	"default-case": 1,
+	"dot-notation": 1,
+	"no-cond-assign": 1,
+	"no-constant-condition": 2,
+	"no-eval": 2,
+	"no-extend-native": 2,
+	"no-fallthrough": 2,
+	"no-lone-blocks": 1,
+	"no-loop-func": 1,
+	"no-redeclare": 1,
+	"no-unused-vars": 1,
+	"no-use-before-define": 0
+  }
+}

package/CHANGELOG.md

@@ -0,0 +1,17 @@
+# Changelog
+
+## v3.0.0 - April 9, 2017
+
+- Position drag handles relative to editor, not document
+- Simplify toolbar and use floats
+- Improved styling
+
+## v2.0.0 - April 3, 2017
+
+- Added toolbar for alignment
+- Modularized
+- Fix resize bug
+
+## v1.0.0 - March 25, 2017
+
+- Initial version

package/LICENSE

@@ -0,0 +1,20 @@
+The MIT License
+Copyright © 2018
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the “Software”), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,185 @@
+# Quill ImageResize Module
+
+A module for Quill rich text editor to allow images to be resized.
+
+Also see [quill-image-drop-module](https://github.com/kensnyder/quill-image-drop-module),
+a module that enables copy-paste and drag/drop for Quill.
+
+## Demo
+
+[Plunker](https://plnkr.co/edit/gq708AOrSBOWSlHcFslG?p=preview)
+
+## Usage
+
+### Webpack/ES6
+
+```javascript
+import Quill from 'quill';
+import { ImageResize } from 'quill-image-resize-module';
+
+Quill.register('modules/imageResize', ImageResize);
+
+const quill = new Quill(editor, {
+    // ...
+    modules: {
+        // ...
+        imageResize: {
+            // See optional "config" below
+        }
+    }
+});
+```
+
+### Script Tag
+
+Copy image-resize.min.js into your web root or include from node_modules
+
+```html
+<script src="/node_modules/quill-image-resize-module/image-resize.min.js"></script>
+```
+
+```javascript
+var quill = new Quill(editor, {
+    // ...
+    modules: {
+        // ...
+        ImageResize: {
+            // See optional "config" below
+        }
+    }
+});
+```
+
+### Config
+
+For the default experience, pass an empty object, like so:
+```javascript
+var quill = new Quill(editor, {
+    // ...
+    modules: {
+        // ...
+        ImageResize: {}
+    }
+});
+```
+
+Functionality is broken down into modules, which can be mixed and matched as you like. For example,
+the default is to include all modules:
+
+```javascript
+const quill = new Quill(editor, {
+    // ...
+    modules: {
+        // ...
+        ImageResize: {
+            modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
+        }
+    }
+});
+```
+
+Each module is described below.
+
+#### `Resize` - Resize the image
+
+Adds handles to the image's corners which can be dragged with the mouse to resize the image.
+
+The look and feel can be controlled with options:
+
+```javascript
+var quill = new Quill(editor, {
+    // ...
+    modules: {
+        // ...
+        ImageResize: {
+            // ...
+            handleStyles: {
+                backgroundColor: 'black',
+                border: 'none',
+                color: white
+                // other camelCase styles for size display
+            }
+        }
+    }
+});
+```
+
+#### `DisplaySize` - Display pixel size
+
+Shows the size of the image in pixels near the bottom right of the image.
+
+The look and feel can be controlled with options:
+
+```javascript
+var quill = new Quill(editor, {
+    // ...
+    modules: {
+        // ...
+        ImageResize: {
+            // ...
+            displayStyles: {
+                backgroundColor: 'black',
+                border: 'none',
+                color: white
+                // other camelCase styles for size display
+            }
+        }
+    }
+});
+```
+
+#### `Toolbar` - Image alignment tools
+
+Displays a toolbar below the image, where the user can select an alignment for the image.
+
+The look and feel can be controlled with options:
+
+```javascript
+var quill = new Quill(editor, {
+    // ...
+    modules: {
+        // ...
+        ImageResize: {
+            // ...
+            toolbarStyles: {
+                backgroundColor: 'black',
+                border: 'none',
+                color: white
+                // other camelCase styles for size display
+            },
+            toolbarButtonStyles: {
+                // ...
+            },
+            toolbarButtonSvgStyles: {
+                // ...
+            },
+        }
+    }
+});
+```
+
+#### `BaseModule` - Include your own custom module
+
+You can write your own module by extending the `BaseModule` class, and then including it in
+the module setup.
+
+For example,
+
+```javascript
+import { Resize, BaseModule } from 'quill-image-resize-module';
+
+class MyModule extends BaseModule {
+    // See src/modules/BaseModule.js for documentation on the various lifecycle callbacks
+}
+
+var quill = new Quill(editor, {
+    // ...
+    modules: {
+        // ...
+        ImageResize: {
+            modules: [ MyModule, Resize ],
+            // ...
+        }
+    }
+});
+```

package/demo/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Quill Image Resize Module Demo</title>
+    <script src="http://cdn.quilljs.com/1.2.2/quill.min.js"></script>
+    <link href="http://cdn.quilljs.com/1.2.2/quill.snow.css" rel="stylesheet">
+    <script src="../image-resize.min.js"></script>
+</head>¡
+
+<body>
+<h1>Quill Image Resize Module Demo</h1>
+<div id="editor" style="max-height:500px;overflow:auto">
+    <p><img src="http://p1.music.126.net/dv_qEzbhSkKzufaCenDchA==/109951163434380822.jpg"></p>
+</div>
+<p>Also see <a href="https://github.com/kensnyder/quill-image-drop-module">quill-image-drop-module</a>,
+	a module that enables copy-paste and drag/drop for Quill.</p>
+	<button onclick="convert()">convert</button>
+<script src="script.js"></script>
+</body>
+
+</html>

package/demo/script.js

@@ -0,0 +1,60 @@
+var quill = new Quill('#editor', {
+	theme: 'snow',
+	modules: {
+		toolbar: [
+			['bold', 'italic', 'underline', 'strike',
+				{
+					'script': 'sub',
+				}, {
+					'script': 'super',
+				},
+				{
+					'color': [],
+				}, {
+					'background': [],
+				}, 'code',
+			],
+			[{
+				'font': [],
+			}, {
+				'size': ['small', false, 'large', 'huge'],
+			}],
+
+			['link', 'image', 'video', 'formula'],
+			['blockquote', 'code-block', {
+				'header': 1,
+			},
+				{
+					'list': 'ordered',
+				}, {
+					'list': 'bullet',
+				},
+			],
+			[{
+				'indent': '-1',
+			}, {
+				'indent': '+1',
+			}, {
+				'direction': 'rtl',
+			}, {
+				'align': [],
+			}],
+			['clean'],
+		],
+		imageResize: {},
+	},
+});
+
+function convert() {
+	const delta = quill.getContents();
+	console.log(toHtml(delta));
+	// return toHtml(delta);
+}
+
+function toHtml(delta){
+	const tempCont = document.createElement('div');
+    (new Quill(tempCont)).setContents(delta);
+    return tempCont.getElementsByClassName('ql-editor')[0].innerHTML;
+}
+
+// console.log(convert());