fix(QEditor): Misc fixes quasarframework#5134, quasarframework#5833, quasarframework#5277, quasarframework#4315 (quasarframework#5841)

* fix(QEditor): Misc fixes quasarframework#5134, quasarframework#5833, quasarframework#5277, quasarframework#4315

* More improvements for caret

* Update editor-caret.js

* Update editor-caret.js

* Update editor-caret.js

* Update editor-caret.js

Author: pdanpdan

ui/dev/components/form/editor.vue

@@ -77,6 +77,7 @@
     <q-editor
       ref="editor"
       class="bg-grey"
+      max-height="300px"
       v-model="model"
       :flat="flat"
       :square="square"

ui/src/components/editor/QEditor.js

@@ -254,7 +254,7 @@ export default Vue.extend({
 
   watch: {
     value (v) {
-      if (this.editWatcher) {
+      if (this.editWatcher === true) {
         this.__setContent(v)
       }
       else {
@@ -265,7 +265,7 @@ export default Vue.extend({
 
   methods: {
     __onInput () {
-      if (this.editWatcher) {
+      if (this.editWatcher === true) {
         const val = this.isViewingSource
           ? this.$refs.content.innerText
           : this.$refs.content.innerHTML
@@ -301,14 +301,37 @@ export default Vue.extend({
     },
 
     __onBlur () {
-      this.caret.save()
+      this.$q.platform.is.ie !== true && this.caret.save()
       this.$emit('blur')
     },
 
+    __onMouseup (e) {
+      this.caret.save()
+      if (this.$listeners.mouseup !== void 0) {
+        this.$emit('mouseup', e)
+      }
+    },
+
+    __onKeyup (e) {
+      this.caret.save()
+      if (this.$listeners.keyup !== void 0) {
+        this.$emit('keyup', e)
+      }
+    },
+
+    __onTouchend (e) {
+      this.caret.save()
+      if (this.$listeners.touchend !== void 0) {
+        this.$emit('touchend', e)
+      }
+    },
+
     runCmd (cmd, param, update = true) {
       this.focus()
+      this.caret.restore()
       this.caret.apply(cmd, param, () => {
         this.focus()
+        this.caret.restore()
         if (this.$q.platform.is.ie === true || this.$q.platform.is.edge === true) {
           this.$nextTick(this.__onInput)
         }
@@ -375,7 +398,7 @@ export default Vue.extend({
           key: 'qedt_btm',
           staticClass: 'q-editor__toolbar row no-wrap items-center scroll-x',
           class: this.toolbarBackgroundClass
-        }, getLinkEditor(h, this))
+        }, getLinkEditor(h, this, this.$q.platform.is.ie))
       )
 
       toolbars = h('div', {
@@ -384,6 +407,19 @@ export default Vue.extend({
       }, bars)
     }
 
+    const on = {
+      ...this.$listeners,
+      input: this.__onInput,
+      keydown: this.__onKeydown,
+      click: this.__onClick,
+      blur: this.__onBlur,
+
+      // save caret
+      mouseup: this.__onMouseup,
+      keyup: this.__onKeyup,
+      touchend: this.__onTouchend
+    }
+
     return h(
       'div',
       {
@@ -414,13 +450,7 @@ export default Vue.extend({
             domProps: isSSR
               ? { innerHTML: this.value }
               : undefined,
-            on: {
-              ...this.$listeners,
-              input: this.__onInput,
-              keydown: this.__onKeydown,
-              click: this.__onClick,
-              blur: this.__onBlur
-            }
+            on
           }
         )
       ]

ui/src/components/editor/editor-caret.js

@@ -3,6 +3,12 @@ function getBlockElement (el, parent) {
     return null
   }
 
+  const nodeName = el.nodeName.toLowerCase()
+
+  if (['div', 'li', 'ul', 'ol', 'blockquote'].includes(nodeName) === true) {
+    return el
+  }
+
   const
     style = window.getComputedStyle
       ? window.getComputedStyle(el)
@@ -37,67 +43,74 @@ export class Caret {
   constructor (el, vm) {
     this.el = el
     this.vm = vm
+    this._range = null
   }
 
   get selection () {
-    if (!this.el) {
-      return
-    }
-    const sel = document.getSelection()
-    // only when the selection in element
-    if (isChildOf(sel.anchorNode, this.el) && isChildOf(sel.focusNode, this.el)) {
-      return sel
+    if (this.el) {
+      const sel = document.getSelection()
+
+      // only when the selection in element
+      if (isChildOf(sel.anchorNode, this.el) && isChildOf(sel.focusNode, this.el)) {
+        return sel
+      }
     }
+
+    return null
   }
 
   get hasSelection () {
-    return this.selection
+    return this.selection !== null
       ? this.selection.toString().length > 0
-      : null
+      : false
   }
 
   get range () {
     const sel = this.selection
 
-    if (!sel) {
-      return
+    if (sel !== null && sel.rangeCount) {
+      return sel.getRangeAt(0)
     }
 
-    return sel.rangeCount
-      ? sel.getRangeAt(0)
-      : null
+    return this._range
   }
 
   get parent () {
     const range = this.range
-    if (!range) {
-      return
+
+    if (range !== null) {
+      const node = range.startContainer
+
+      return node.nodeType === document.ELEMENT_NODE
+        ? node
+        : node.parentNode
     }
 
-    const node = range.startContainer
-    return node.nodeType === document.ELEMENT_NODE
-      ? node
-      : node.parentNode
+    return null
   }
 
   get blockParent () {
     const parent = this.parent
-    if (!parent) {
-      return
+
+    if (parent !== null) {
+      return getBlockElement(parent, this.el)
     }
-    return getBlockElement(parent, this.el)
+
+    return null
   }
 
   save (range = this.range) {
-    this._range = range
+    if (range !== null) {
+      this._range = range
+    }
   }
 
   restore (range = this._range) {
     const
       r = document.createRange(),
       sel = document.getSelection()
 
-    if (range) {
+    if (range !== null) {
       r.setStart(range.startContainer, range.startOffset)
       r.setEnd(range.endContainer, range.endOffset)
       sel.removeAllRanges()
@@ -114,15 +127,22 @@ export class Caret {
       ? this.parent
       : this.blockParent
 
-    return el
+    return el !== null
       ? el.nodeName.toLowerCase() === name.toLowerCase()
       : false
   }
 
-  hasParents (list) {
-    const el = this.parent
-    return el
-      ? list.includes(el.nodeName.toLowerCase())
+  hasParents (list, recursive, el = this.parent) {
+    if (el === null) {
+      return false
+    }
+
+    if (el !== null && list.includes(el.nodeName.toLowerCase() === true) {
+      return true
+    }
+
+    return recursive === true
+      ? this.hasParents(list, recursive, el.parentNode)
       : false
   }
 
@@ -148,33 +168,29 @@ export class Caret {
         return false
       default:
         const state = document.queryCommandState(cmd)
-        return param ? state === param : state
+        return param !== void 0 ? state === param : state
     }
   }
 
   getParentAttribute (attrib) {
-    if (this.parent) {
+    if (this.parent !== null) {
       return this.parent.getAttribute(attrib)
     }
+
+    return null
   }
 
   can (name) {
     if (name === 'outdent') {
-      return this.hasParents(['blockquote', 'li'])
+      return this.hasParents(['blockquote', 'li'], true)
     }
+
     if (name === 'indent') {
-      const parentName = this.parent ? this.parent.nodeName.toLowerCase() : false
-      if (parentName === 'blockquote') {
-        return false
-      }
-      if (parentName === 'li') {
-        const previousEl = this.parent.previousSibling
-        return previousEl && previousEl.nodeName.toLowerCase() === 'li'
-      }
-      return false
+      return this.hasParents(['li'], true)
     }
+
     if (name === 'link') {
-      return this.selection || this.is('link')
+      return this.selection !== null || this.is('link')
     }
   }
 
@@ -191,7 +207,9 @@ export class Caret {
     }
     else if (cmd === 'print') {
       done()
+
       const win = window.open()
+
       win.document.write(`
         <!doctype html>
         <html>
@@ -205,57 +223,57 @@ export class Caret {
       `)
       win.print()
       win.close()
+
       return
     }
     else if (cmd === 'link') {
-      const link = this.getParentAttribute('href')
-      if (!link) {
+      const
+        link = this.getParentAttribute('href'),
+        range = this.range
+
+      if (link === null) {
         const selection = this.selectWord(this.selection)
         const url = selection ? selection.toString() : ''
+
         if (!url.length) {
           return
         }
+
         this.vm.editLinkUrl = urlRegex.test(url) ? url : 'https://'
         document.execCommand('createLink', false, this.vm.editLinkUrl)
       }
       else {
         this.vm.editLinkUrl = link
       }
+
       this.vm.$nextTick(() => {
-        this.range.selectNodeContents(this.parent)
+        range.selectNodeContents(this.parent)
         this.save()
       })
+
       return
     }
     else if (cmd === 'fullscreen') {
       this.vm.toggleFullscreen()
       done()
+
       return
     }
     else if (cmd === 'viewsource') {
-      this.vm.isViewingSource = !this.vm.isViewingSource
+      this.vm.isViewingSource = this.vm.isViewingSource === false
       this.vm.__setContent(this.vm.value)
       done()
+
       return
     }
 
-    if (this.vm.$q.platform.is.ie === true || this.vm.$q.platform.is.edge === true) {
-      // workaround for IE/Edge, otherwise it messes up
-      // the DOM of toolbar
-      const dummyDiv = document.createElement('div')
-      this.vm.$refs.content.appendChild(dummyDiv)
-      document.execCommand(cmd, false, param)
-      dummyDiv.remove()
-    }
-    else {
-      document.execCommand(cmd, false, param)
-    }
+    document.execCommand(cmd, false, param)
 
     done()
   }
 
   selectWord (sel) {
-    if (!sel || !sel.isCollapsed) {
+    if (sel === null || sel.isCollapsed !== true || /* IE 11 */ sel.modify === void 0) {
       return sel
     }