feat(): focus, blur and preserveWhitespace

KillerCodeMonkey · Apr 15, 2019 · 327dc04 · 327dc04
1 parent e1f96bc
commit 327dc04
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 46 deletions.
diff --git 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
@@ -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)
+              }
             }
           ])
         </script>
     </head>
     <body ng-app="quillTest" ng-controller="AppCtrl">
-        <h3>Default editor + Callbacks/Outputs in JS console + track-changes="all"</h3>
+        <h3>Default editor + PreserveWhitespac + Callbacks/Outputs in JS console + track-changes="all"</h3>
         <pre><code>{{title}}</code></pre>
         <ng-quill-editor bounds="self" ng-model="title" placeholder="'override default placeholder'" on-editor-created="editorCreated(editor)" on-content-changed="contentChanged(
           editor,
@@ -118,7 +124,7 @@ <h3>Default editor + Callbacks/Outputs in JS console + track-changes="all"</h3>
           delta,
           oldDelta,
           source
-        )" on-selection-changed="selectionChanged(editor, range, oldRange, source)" track-changes="all"></ng-quill-editor>
+        )" on-selection-changed="selectionChanged(editor, range, oldRange, source)" on-focus="onFocus(editor, source)" on-blur="onBlur(editor, source)" preserve-whitespace="true" track-changes="all"></ng-quill-editor>
 
         <h3>Default editor + Callbacks/Outputs in JS console and empty init model + Object-Format</h3>
         <button ng-click="changeJSON()">Change the model!</button>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,23 +1,23 @@
 {
   "name": "ng-quill",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "description": "Angular component for the Quill Rich Text Editor",
   "author": "Bengt Weiße <[email protected]>",
   "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",
     "karma-mocha-reporter": "2.2.5",
     "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
@@ -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': '<?',
       'onEditorCreated': '&?',
       'onContentChanged': '&?',
+      'onBlur': '&?',
+      'onFocus': '&?',
       'onSelectionChanged': '&?',
       'ngModel': '<',
       'maxLength': '<',
@@ -107,7 +113,8 @@
       'styles': '<?',
       'sanitize': '<?',
       'customToolbarPosition': '@?',
-      'trackChanges': '@?'
+      'trackChanges': '@?',
+      'preserveWhitespace': '<?',
     },
     require: {
       ngModelCtrl: 'ngModel'
@@ -252,7 +259,7 @@
       }
 
       this._initEditor = function () {
-        var $editorElem = angular.element('<div></div>')
+        var $editorElem = this.preserveWhitespace ? angular.element('<pre></pre>') : angular.element('<div></div>')
         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
@@ -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
       })
     }))
   })