From 327dc040e987c3c9c6778997a3b6b153701574f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bengt=20Wei=C3=9Fe?= Date: Mon, 15 Apr 2019 20:55:31 +0200 Subject: [PATCH] feat(): focus, blur and preserveWhitespace --- README.md | 8 +++--- demo.html | 10 ++++++-- package-lock.json | 58 +++++++++++++++++++++--------------------- package.json | 12 ++++----- src/ng-quill.js | 25 +++++++++++++++--- tests/ng-quill.spec.js | 9 ++++--- 6 files changed, 76 insertions(+), 46 deletions(-) diff --git a/README.md b/README.md index bd6938b..fa5f72e 100644 --- a/README.md +++ b/README.md @@ -135,8 +135,7 @@ app.config([ ## Configuration - -- use `ngQuillConfigProvider.set({modules: { ... }, theme: 'snow', placeholder: 'placeholder', formats: { ... }, bounds: document.body, readyOnly: false) to config toolbar module, other modules, default theme, allowed formats, ...`` +- use `ngQuillConfigProvider.set({modules: { ... }, theme: 'snow', placeholder: 'placeholder', formats: { ... }, bounds: document.body, readyOnly: false) to config toolbar module, other modules, default theme, allowed formats, ...` - set theme name: `theme="snow"` (default: 'snow') - set readOnly: `read-only=""` (default: false) - requires true or false - overwrite global config for each editor: `modules="modulesConfig"` @@ -152,13 +151,16 @@ app.config([ - styles - set dynamic inline editor styles - `styles="{ backgroundColor: 'red' }"` - sanitize - santize the model content if format is `html` (default: `false`) - debug - set debug level, allowed `'error', 'warn', 'log', true, false` (default: `'warn'`) +- trackChanges - check if only `user` (quill source user) or `all` change should be trigger model update, default `user`. Using `all` is not recommended, it cause some unexpected sideeffects. But useful for 3rd Party modules and blots to keep your model up to date +- preserveWhitespace - default: false - possbility to use a pre-tag instead of a div-tag for the contenteditable area to preserve duplicated whitespaces | caution if used with syntax plugin [Related issue](https://github.com/quilljs/quill/issues/1751) ## Callback/Outputs - onEditorCreated: triggered after editor is created and provides editor-object `on-editor-created="myCallback(editor)"` - onContentChanged: triggered after changes in the editor. Provides editor-object, html representation and text representation `on-content-changed="myCallback(editor, html, text, content, delta, oldDelta, source)"` - onSelectionChanged: triggered after text selection changed `on-selection-changed="myCallback(editor, range, oldRange, source)"` - content = quill editor content object, text = content as plain text, html = content as html string -- trackChanges - check if only `user` (quill source user) or `all` change should be trigger model update, default `user`. Using `all` is not recommended, it cause some unexpected sideeffects. But useful for 3rd Party modules and blots to keep your model up to date +- onFocus: triggered if editor gets focus `on-focus="myCallback(editor, source)"` +- onBlur: triggered if editor gets focus `on-blur="myCallback(editor, source)"` ## Security Hint diff --git a/demo.html b/demo.html index 8fe81c1..6f9e5c7 100644 --- a/demo.html +++ b/demo.html @@ -103,12 +103,18 @@ $scope.selectionChanged = function (editor, range, oldRange, source) { console.log('editor: ', editor, 'range: ', range, 'oldRange:', oldRange, 'source:', source) } + $scope.onFocus = function (editor, source) { + console.log('focus: ', editor, 'source:', source) + } + $scope.onBlur = function (editor, source) { + console.log('blur: ', editor, 'source:', source) + } } ]) -

Default editor + Callbacks/Outputs in JS console + track-changes="all"

+

Default editor + PreserveWhitespac + Callbacks/Outputs in JS console + track-changes="all"

{{title}}
delta, oldDelta, source - )" on-selection-changed="selectionChanged(editor, range, oldRange, source)" track-changes="all"> + )" on-selection-changed="selectionChanged(editor, range, oldRange, source)" on-focus="onFocus(editor, source)" on-blur="onBlur(editor, source)" preserve-whitespace="true" track-changes="all">

Default editor + Callbacks/Outputs in JS console and empty init model + Object-Format

diff --git a/package-lock.json b/package-lock.json index 5b94f32..1e6e26e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "ng-quill", - "version": "4.4.0", + "version": "4.5.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -34,21 +34,21 @@ "optional": true }, "angular": { - "version": "1.7.7", - "resolved": "https://registry.npmjs.org/angular/-/angular-1.7.7.tgz", - "integrity": "sha512-MH3JEGd8y/EkNCKJ8EV6Ch0j9X0rZTta/QVIDpBWaIdfh85/e5KO8+ZKgvWIb02MQuiS20pDFmMFlv4ZaLcLWg==", + "version": "1.7.8", + "resolved": "https://registry.npmjs.org/angular/-/angular-1.7.8.tgz", + "integrity": "sha512-wtef/y4COxM7ZVhddd7JtAAhyYObq9YXKar9tsW7558BImeVYteJiTxCKeJOL45lJ/+7B4wrAC49j8gTFYEthg==", "dev": true }, "angular-mocks": { - "version": "1.7.7", - "resolved": "https://registry.npmjs.org/angular-mocks/-/angular-mocks-1.7.7.tgz", - "integrity": "sha512-EIUUAigjCgyk4Lqspf1iM0RItOPtlKoHlqDyrYsgVmMqj5xS41BDXIqedcMAFn6Lln5Qe9YDsGQ3ZHAAoX1SgA==", + "version": "1.7.8", + "resolved": "https://registry.npmjs.org/angular-mocks/-/angular-mocks-1.7.8.tgz", + "integrity": "sha512-LB13ESBT0eJrhQhfPXyLR9qm4LI9g44hyBFwUqZKEHEA4DpfxVTu0ONipiNoN0zWtmEAezA8u2gjcoaO2TStig==", "dev": true }, "angular-sanitize": { - "version": "1.7.7", - "resolved": "https://registry.npmjs.org/angular-sanitize/-/angular-sanitize-1.7.7.tgz", - "integrity": "sha512-DZ0kidLOOrq/mbqwKbeT2aSlT2Kdy25tZh5KcWOrRXx26imbhQfwbuncMYMFh7uPqfWySAI534+XhjnmhJ626Q==", + "version": "1.7.8", + "resolved": "https://registry.npmjs.org/angular-sanitize/-/angular-sanitize-1.7.8.tgz", + "integrity": "sha512-sVq51is1cVNiPytH4JIEd7iRW0OBIRQGNETWkz1c/jnLv2sBf9oDxEd8enwDz/W2ULBIpqJPK/3AsIxmZyh9pA==", "dev": true }, "ansi-regex": { @@ -554,9 +554,9 @@ } }, "commander": { - "version": "2.17.1", - "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz", - "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==", + "version": "2.20.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.0.tgz", + "integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==", "dev": true }, "component-bind": { @@ -798,7 +798,7 @@ }, "engine.io-client": { "version": "3.2.1", - "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-3.2.1.tgz", + "resolved": "http://registry.npmjs.org/engine.io-client/-/engine.io-client-3.2.1.tgz", "integrity": "sha512-y5AbkytWeM4jQr7m/koQLc5AxpRKC1hEVUb/s1FUAWEJq5AzJJ4NLvzuKPuxtDi5Mq755WuDvZ6Iv2rXj4PTzw==", "dev": true, "requires": { @@ -1932,7 +1932,7 @@ }, "http-errors": { "version": "1.6.3", - "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", + "resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=", "dev": true, "requires": { @@ -2228,15 +2228,15 @@ } }, "jasmine-core": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-3.3.0.tgz", - "integrity": "sha512-3/xSmG/d35hf80BEN66Y6g9Ca5l/Isdeg/j6zvbTYlTzeKinzmaTM4p9am5kYqOmE05D7s1t8FGjzdSnbUbceA==", + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-3.4.0.tgz", + "integrity": "sha512-HU/YxV4i6GcmiH4duATwAbJQMlE0MsDIR5XmSVxURxKHn3aGAdbY1/ZJFmVRbKtnLwIxxMJD7gYaPsypcbYimg==", "dev": true }, "js-yaml": { - "version": "3.12.0", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.12.0.tgz", - "integrity": "sha512-PIt2cnwmPfL4hKNwqeiuz4bKfnzHTBv6HyVgjahA6mPLwPDzjDWrplJBMjHUFxku/N3FlmrbyPclad+I+4mJ3A==", + "version": "3.13.1", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz", + "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==", "dev": true, "requires": { "argparse": "^1.0.7", @@ -2517,7 +2517,7 @@ }, "media-typer": { "version": "0.3.0", - "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", + "resolved": "http://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=", "dev": true }, @@ -2936,7 +2936,7 @@ }, "os-tmpdir": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", + "resolved": "http://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", "dev": true }, @@ -3365,7 +3365,7 @@ }, "safe-regex": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz", + "resolved": "http://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz", "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=", "dev": true, "requires": { @@ -3564,7 +3564,7 @@ }, "socket.io-parser": { "version": "3.2.0", - "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.2.0.tgz", + "resolved": "http://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.2.0.tgz", "integrity": "sha512-FYiBx7rc/KORMJlgsXysflWx/RIvtqZbyGLlHZvjfmPTPeuD/I8MaW7cfFrj5tRltICJdgwflhfZ3NVVbVLFQA==", "dev": true, "requires": { @@ -4003,12 +4003,12 @@ "dev": true }, "uglify-js": { - "version": "3.4.9", - "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz", - "integrity": "sha512-8CJsbKOtEbnJsTyv6LE6m6ZKniqMiFWmm9sRbopbkGs3gMPPfd3Fh8iIA4Ykv5MgaTbqHr4BaoGLJLZNhsrW1Q==", + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.5.4.tgz", + "integrity": "sha512-GpKo28q/7Bm5BcX9vOu4S46FwisbPbAmkkqPnGIpKvKTM96I85N6XHQV+k4I6FA2wxgLhcsSyHoNhzucwCflvA==", "dev": true, "requires": { - "commander": "~2.17.1", + "commander": "~2.20.0", "source-map": "~0.6.1" } }, diff --git a/package.json b/package.json index 535e453..0e970f7 100644 --- a/package.json +++ b/package.json @@ -1,15 +1,15 @@ { "name": "ng-quill", - "version": "4.4.0", + "version": "4.5.0", "description": "Angular component for the Quill Rich Text Editor", "author": "Bengt Weiße ", "homepage": "https://github.com/KillerCodeMonkey/ngQuill", "main": "dist/ng-quill.js", "devDependencies": { - "angular": "^1.7.7", - "angular-mocks": "^1.7.7", - "angular-sanitize": "^1.7.7", - "jasmine-core": "^3.3.0", + "angular": "^1.7.8", + "angular-mocks": "^1.7.8", + "angular-sanitize": "^1.7.8", + "jasmine-core": "^3.4.0", "karma": "^4.0.1", "karma-coverage": "^1.1.2", "karma-jasmine": "^2.0.1", @@ -17,7 +17,7 @@ "karma-phantomjs-launcher": "^1.0.4", "quill": "^1.3.6", "rimraf": "^2.6.3", - "uglify-js": "^3.4.9" + "uglify-js": "^3.5.4" }, "engines": { "node": ">=10" diff --git a/src/ng-quill.js b/src/ng-quill.js index 4725938..f6caeb5 100755 --- a/src/ng-quill.js +++ b/src/ng-quill.js @@ -45,7 +45,8 @@ scrollingContainer: null, placeholder: 'Insert text here ...', readOnly: false, - trackChanges: 'user' + trackChanges: 'user', + preserveWhitespace: false } this.set = function (customConf) { @@ -78,6 +79,9 @@ if (customConf.trackChanges && ['all', 'user'].indexOf(customConf.trackChanges) > -1) { config.trackChanges = customConf.trackChanges } + if (customConf.preserveWhitespace) { + config.preserveWhitespace = true + } } this.$get = function () { @@ -99,6 +103,8 @@ 'strict': '') + var $editorElem = this.preserveWhitespace ? angular.element('
') : angular.element('
')
         var container = $element.children()
 
         editorElem = $editorElem[0]
@@ -297,6 +304,18 @@
 
         // mark model as touched if editor lost focus
         selectionChangeEvent = editor.on('selection-change', function (range, oldRange, source) {
+          if (range === null && this.onBlur) {
+            this.onBlur({
+              editor: editor,
+              source: source
+            })
+          } else if (oldRange === null && this.onFocus) {
+            this.onFocus({
+              editor: editor,
+              source: source
+            })
+          }
+
           if (this.onSelectionChanged) {
             this.onSelectionChanged({
               editor: editor,
diff --git a/tests/ng-quill.spec.js b/tests/ng-quill.spec.js
index 63db253..0243e50 100644
--- a/tests/ng-quill.spec.js
+++ b/tests/ng-quill.spec.js
@@ -31,7 +31,8 @@ describe('ng-quill', function () {
     bounds: document.body,
     debug: 'warn',
     scrollingContainer: null,
-    trackChanges: 'user'
+    trackChanges: 'user',
+    preserveWhitespace: false
   }
 
   beforeEach(module('ngQuill'))
@@ -536,7 +537,8 @@ describe('ng-quill', function () {
           formats: [],
           readOnly: true,
           bounds: true,
-          trackChanges: 'all'
+          trackChanges: 'all',
+          preserveWhitespace: true
         })
       })
     })
@@ -551,7 +553,8 @@ describe('ng-quill', function () {
         formats: [],
         readOnly: true,
         bounds: true,
-        trackChanges: 'all'
+        trackChanges: 'all',
+        preserveWhitespace: true
       })
     }))
   })