quasar 2.18.7 → 2.19.0

package/src/components/editor/QEditor.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private.use-fullscreen/use-fullscreen" ],
+  "mixins": ["composables/private.use-fullscreen/use-fullscreen"],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/editor"
@@ -10,7 +10,7 @@
       "extends": "model-value",
       "type": "String",
       "desc": "Model of the component; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
-      "examples": [ "# v-model=\"content\"" ]
+      "examples": ["# v-model=\"content\""]
     },
 
     "readonly": {
@@ -43,21 +43,21 @@
       "type": "String",
       "desc": "CSS unit for the minimum height of the editable area",
       "default": "'10rem'",
-      "examples": [ "'15rem'", "'50vh'" ],
+      "examples": ["'15rem'", "'50vh'"],
       "category": "style"
     },
 
     "max-height": {
       "type": "String",
       "desc": "CSS unit for maximum height of the input area",
-      "examples": [ "'1000px'", "'90vh'" ],
+      "examples": ["'1000px'", "'90vh'"],
       "category": "style"
     },
 
     "height": {
       "type": "String",
       "desc": "CSS value to set the height of the editable area",
-      "examples": [ "'100px'", "'50vh'" ],
+      "examples": ["'100px'", "'50vh'"],
       "category": "style"
     },
 
@@ -77,59 +77,63 @@
             "label": {
               "type": "String",
               "desc": "Label of the button",
-              "examples": [ "'Addresses'" ]
+              "examples": ["'Addresses'"]
             },
             "tip": {
               "type": "String",
               "desc": "Text to be displayed as a tooltip on hover",
-              "examples": [ "'Add a contact from the Address Book'" ]
+              "examples": ["'Add a contact from the Address Book'"]
             },
             "htmlTip": {
               "type": "String",
               "desc": "HTML formatted text to be displayed within a tooltip on hover",
-              "examples": [ "'Add a <span class=\"red\">user</span> from the address book'" ]
+              "examples": [
+                "'Add a <span class=\"red\">user</span> from the address book'"
+              ]
             },
             "icon": {
               "type": "String",
               "desc": "Icon of the button",
-              "examples": [ "'fas fa-address-book'" ]
+              "examples": ["'fas fa-address-book'"]
             },
             "key": {
               "type": "Number",
               "desc": "Keycode of a key to be used together with the <ctrl> key for use as a shortcut to trigger this element",
-              "examples": [ "12", "36" ]
+              "examples": ["12", "36"]
             },
             "handler": {
               "type": "Function",
               "desc": "Either this or \"cmd\" is required. Function for when button gets clicked/tapped.",
               "params": null,
               "returns": null,
-              "examples": [ "() => this.uploadFile()" ]
+              "examples": ["() => this.uploadFile()"]
             },
             "cmd": {
               "type": "String",
               "desc": "Either this or \"handler\" is required. This must be a valid execCommand method according to the designMode API.",
-              "examples": [ "'insertHTML'", "'justifyFull'" ]
+              "examples": ["'insertHTML'", "'justifyFull'"]
             },
             "param": {
               "type": "String",
               "desc": "Only set a param if using a \"cmd\". This is commonly text or HTML to inject, but is highly dependent upon the specific cmd being called.",
-              "examples": [ "'<img src=\"://uploads/001.jpg\" alt=\"nice pic\" />'" ]
+              "examples": [
+                "'<img src=\"://uploads/001.jpg\" alt=\"nice pic\" />'"
+              ]
             },
             "disable": {
-              "type": [ "Boolean", "Function" ],
+              "type": ["Boolean", "Function"],
               "desc": "Is button disabled?",
               "returns": {
                 "type": "Boolean",
                 "desc": "If true, the button will be disabled"
               },
-              "examples": [ "true", "() => !checkIfUserIsActive()" ]
+              "examples": ["true", "() => !checkIfUserIsActive()"]
             },
             "type": {
-              "type": [ "String", "null" ],
+              "type": ["String", "null"],
               "desc": "Pass the value \"no-state\" if the button should not have an \"active\" state",
-              "values": [ "null", "'no-state'" ],
-              "examples": [ "'no-state'" ]
+              "values": ["null", "'no-state'"],
+              "examples": ["'no-state'"]
             },
             "fixedLabel": {
               "type": "Boolean",
@@ -161,8 +165,8 @@
     "toolbar": {
       "type": "Array",
       "desc": "An array of arrays of Objects/Strings that you use to define the construction of the elements and commands available in the toolbar",
-      "default": "[ [ 'left', 'center', 'right', 'justify' ], [ 'bold', 'italic', 'underline', 'strike' ], [ 'undo', 'redo' ] ]",
-      "examples": [ "[ 'left', 'center', 'right', 'justify' ]" ],
+      "default": "[['left', 'center', 'right', 'justify'], ['bold', 'italic', 'underline', 'strike'], ['undo', 'redo']]",
+      "examples": ["['left', 'center', 'right', 'justify']"],
       "category": "toolbar"
     },
 
@@ -182,7 +186,7 @@
       "type": "String",
       "desc": "Choose the active color (from the Quasar Palette) of toolbar commands button",
       "default": "'primary'",
-      "examples": [ "'secondary'", "'blue-3'" ],
+      "examples": ["'secondary'", "'blue-3'"],
       "category": "toolbar"
     },
 
@@ -191,7 +195,7 @@
       "desc": "Toolbar background color (from Quasar Palette)",
       "default": "'grey-3'",
       "__runtimeDefault": true,
-      "examples": [ "'secondary'", "'blue-3'" ],
+      "examples": ["'secondary'", "'blue-3'"],
       "category": "toolbar"
     },
 
@@ -216,7 +220,7 @@
     "paragraph-tag": {
       "type": "String",
       "desc": "Paragraph tag to be used",
-      "values": [ "'div'", "'p'" ],
+      "values": ["'div'", "'p'"],
       "default": "'div'",
       "category": "behavior"
     },
@@ -225,25 +229,22 @@
       "type": "Object",
       "tsType": "VueStyleObjectProp",
       "desc": "Object with CSS properties and values for styling the container of QEditor",
-      "examples": [ "{ backgroundColor: '#C0C0C0' }" ],
+      "examples": ["{ backgroundColor: '#C0C0C0' }"],
       "category": "style"
     },
 
     "content-class": {
-      "type": [ "String", "Array", "Object" ],
+      "type": ["String", "Array", "Object"],
       "tsType": "VueClassProp",
       "desc": "CSS classes for the input area",
-      "examples": [
-        "'my-special-class'",
-        "{ 'my-special-class': true }"
-      ],
+      "examples": ["'my-special-class'", "{ 'my-special-class': true }"],
       "category": "style"
     },
 
     "placeholder": {
       "type": "String",
       "desc": "Text to display as placeholder",
-      "examples": [ "'Type your story here ...'" ],
+      "examples": ["'Type your story here ...'"],
       "category": "content"
     }
   },
@@ -322,13 +323,13 @@
         "cmd": {
           "type": "String",
           "desc": "Must be a valid execCommand method according to the designMode API",
-          "examples": [ "'copy'", "'cut'", "'paste'" ],
+          "examples": ["'copy'", "'cut'", "'paste'"],
           "required": true
         },
         "param": {
           "type": "String",
           "desc": "The argument to pass to the command",
-          "examples": [ "'<small>Small Text</small>'" ]
+          "examples": ["'<small>Small Text</small>'"]
         },
         "update": {
           "type": "Boolean",

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

@@ -1,18 +1,17 @@
 import { noop } from '../../utils/event/event.js'
 
-function getBlockElement (el, parent) {
+function getBlockElement(el, parent) {
   if (parent && el === parent) {
     return null
   }
 
   const nodeName = el.nodeName.toLowerCase()
 
-  if ([ 'div', 'li', 'ul', 'ol', 'blockquote' ].includes(nodeName) === true) {
+  if (['div', 'li', 'ul', 'ol', 'blockquote'].includes(nodeName) === true) {
     return el
   }
 
-  const
-    style = window.getComputedStyle
+  const style = window.getComputedStyle
       ? window.getComputedStyle(el)
       : el.currentStyle,
     display = style.display
@@ -24,13 +23,14 @@ function getBlockElement (el, parent) {
   return getBlockElement(el.parentNode)
 }
 
-function isChildOf (el, parent, orSame) {
+function isChildOf(el, parent, orSame) {
   return !el || el === document.body
     ? false
-    : (orSame === true && el === parent) || (parent === document ? document.body : parent).contains(el.parentNode)
+    : (orSame === true && el === parent) ||
+        (parent === document ? document.body : parent).contains(el.parentNode)
 }
 
-function createRange (node, chars, range) {
+function createRange(node, chars, range) {
   if (!range) {
     range = document.createRange()
     range.selectNode(node)
@@ -39,20 +39,17 @@ function createRange (node, chars, range) {
 
   if (chars.count === 0) {
     range.setEnd(node, chars.count)
-  }
-  else if (chars.count > 0) {
+  } else if (chars.count > 0) {
     if (node.nodeType === Node.TEXT_NODE) {
       if (node.textContent.length < chars.count) {
         chars.count -= node.textContent.length
-      }
-      else {
+      } else {
         range.setEnd(node, chars.count)
         chars.count = 0
       }
-    }
-    else {
+    } else {
       for (let lp = 0; chars.count !== 0 && lp < node.childNodes.length; lp++) {
-        range = createRange(node.childNodes[ lp ], chars, range)
+        range = createRange(node.childNodes[lp], chars, range)
       }
     }
   }
@@ -63,18 +60,21 @@ function createRange (node, chars, range) {
 const urlRegex = /^https?:\/\//
 
 export default class Caret {
-  constructor (el, eVm) {
+  constructor(el, eVm) {
     this.el = el
     this.eVm = eVm
     this._range = null
   }
 
-  get selection () {
+  get selection() {
     if (this.el) {
       const sel = document.getSelection()
 
       // only when the selection in element
-      if (isChildOf(sel.anchorNode, this.el, true) && isChildOf(sel.focusNode, this.el, true)) {
+      if (
+        isChildOf(sel.anchorNode, this.el, true) &&
+        isChildOf(sel.focusNode, this.el, true)
+      ) {
         return sel
       }
     }
@@ -82,13 +82,13 @@ export default class Caret {
     return null
   }
 
-  get hasSelection () {
+  get hasSelection() {
     return this.selection !== null
       ? this.selection.toString().length !== 0
       : false
   }
 
-  get range () {
+  get range() {
     const sel = this.selection
 
     if (sel?.rangeCount) {
@@ -98,21 +98,19 @@ export default class Caret {
     return this._range
   }
 
-  get parent () {
+  get parent() {
     const range = this.range
 
     if (range !== null) {
       const node = range.startContainer
 
-      return node.nodeType === document.ELEMENT_NODE
-        ? node
-        : node.parentNode
+      return node.nodeType === document.ELEMENT_NODE ? node : node.parentNode
     }
 
     return null
   }
 
-  get blockParent () {
+  get blockParent() {
     const parent = this.parent
 
     if (parent !== null) {
@@ -122,15 +120,14 @@ export default class Caret {
     return null
   }
 
-  save (range = this.range) {
+  save(range = this.range) {
     if (range !== null) {
       this._range = range
     }
   }
 
-  restore (range = this._range) {
-    const
-      r = document.createRange(),
+  restore(range = this._range) {
+    const r = document.createRange(),
       sel = document.getSelection()
 
     if (range !== null) {
@@ -138,17 +135,16 @@ export default class Caret {
       r.setEnd(range.endContainer, range.endOffset)
       sel.removeAllRanges()
       sel.addRange(r)
-    }
-    else {
+    } else {
       sel.selectAllChildren(this.el)
       sel.collapseToEnd()
     }
   }
 
-  savePosition () {
-    let charCount = -1, node
-    const
-      selection = document.getSelection(),
+  savePosition() {
+    let charCount = -1,
+      node
+    const selection = document.getSelection(),
       parentEl = this.el.parentNode
 
     if (selection.focusNode && isChildOf(selection.focusNode, parentEl)) {
@@ -159,8 +155,7 @@ export default class Caret {
         if (node !== this.el && node.previousSibling) {
           node = node.previousSibling
           charCount += node.textContent.length
-        }
-        else {
+        } else {
           node = node.parentNode
         }
       }
@@ -169,10 +164,9 @@ export default class Caret {
     this.savedPos = charCount
   }
 
-  restorePosition (length = 0) {
+  restorePosition(length = 0) {
     if (this.savedPos > 0 && this.savedPos < length) {
-      const
-        selection = window.getSelection(),
+      const selection = window.getSelection(),
         range = createRange(this.el, { count: this.savedPos })
 
       if (range) {
@@ -183,17 +177,15 @@ export default class Caret {
     }
   }
 
-  hasParent (name, spanLevel) {
-    const el = spanLevel
-      ? this.parent
-      : this.blockParent
+  hasParent(name, spanLevel) {
+    const el = spanLevel ? this.parent : this.blockParent
 
     return el !== null
       ? el.nodeName.toLowerCase() === name.toLowerCase()
       : false
   }
 
-  hasParents (list, recursive, el = this.parent) {
+  hasParents(list, recursive, el = this.parent) {
     if (el === null) {
       return false
     }
@@ -207,22 +199,24 @@ export default class Caret {
       : false
   }
 
-  is (cmd, param) {
+  is(cmd, param) {
     if (this.selection === null) {
       return false
     }
 
     switch (cmd) {
       case 'formatBlock':
-        return (param === 'DIV' && this.parent === this.el)
-          || this.hasParent(param, param === 'PRE')
+        return (
+          (param === 'DIV' && this.parent === this.el) ||
+          this.hasParent(param, param === 'PRE')
+        )
       case 'link':
         return this.hasParent('A', true)
       case 'fontSize':
         return document.queryCommandValue(cmd) === param
       case 'fontName':
         const res = document.queryCommandValue(cmd)
-        return res === `"${ param }"` || res === param
+        return res === `"${param}"` || res === param
       case 'fullscreen':
         return this.eVm.inFullscreen.value
       case 'viewsource':
@@ -235,7 +229,7 @@ export default class Caret {
     }
   }
 
-  getParentAttribute (attrib) {
+  getParentAttribute(attrib) {
     if (this.parent !== null) {
       return this.parent.getAttribute(attrib)
     }
@@ -243,13 +237,13 @@ export default class Caret {
     return null
   }
 
-  can (name) {
+  can(name) {
     if (name === 'outdent') {
-      return this.hasParents([ 'blockquote', 'li' ], true)
+      return this.hasParents(['blockquote', 'li'], true)
     }
 
     if (name === 'indent') {
-      return this.hasParents([ 'li' ], true)
+      return this.hasParents(['li'], true)
     }
 
     if (name === 'link') {
@@ -257,9 +251,12 @@ export default class Caret {
     }
   }
 
-  apply (cmd, param, done = noop) {
+  apply(cmd, param, done = noop) {
     if (cmd === 'formatBlock') {
-      if ([ 'BLOCKQUOTE', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ].includes(param) && this.is(cmd, param)) {
+      if (
+        ['BLOCKQUOTE', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6'].includes(param) &&
+        this.is(cmd, param)
+      ) {
         cmd = 'outdent'
         param = null
       }
@@ -267,8 +264,7 @@ export default class Caret {
       if (param === 'PRE' && this.is(cmd, 'PRE')) {
         param = 'P'
       }
-    }
-    else if (cmd === 'print') {
+    } else if (cmd === 'print') {
       done()
 
       const win = window.open()
@@ -277,10 +273,10 @@ export default class Caret {
         <!doctype html>
         <html>
           <head>
-            <title>Print - ${ document.title }</title>
+            <title>Print - ${document.title}</title>
           </head>
           <body>
-            <div>${ this.el.innerHTML }</div>
+            <div>${this.el.innerHTML}</div>
           </body>
         </html>
       `)
@@ -288,8 +284,7 @@ export default class Caret {
       win.close()
 
       return
-    }
-    else if (cmd === 'link') {
+    } else if (cmd === 'link') {
       const link = this.getParentAttribute('href')
 
       if (link === null) {
@@ -297,19 +292,16 @@ export default class Caret {
         const url = selection ? selection.toString() : ''
 
         if (
-          !url.length
-          && (
-            !this.range
-            || !this.range.cloneContents().querySelector('img')
-          )
-        ) return
+          !url.length &&
+          (!this.range || !this.range.cloneContents().querySelector('img'))
+        ) {
+          return
+        }
 
         this.eVm.editLinkUrl.value = urlRegex.test(url) ? url : 'https://'
-        document.execCommand('createLink', false, this.eVm.editLinkUrl.value)
-
         this.save(selection.getRangeAt(0))
-      }
-      else {
+        document.execCommand('createLink', false, this.eVm.editLinkUrl.value)
+      } else {
         this.eVm.editLinkUrl.value = link
 
         this.range.selectNodeContents(this.parent)
@@ -317,14 +309,12 @@ export default class Caret {
       }
 
       return
-    }
-    else if (cmd === 'fullscreen') {
+    } else if (cmd === 'fullscreen') {
       this.eVm.toggleFullscreen()
       done()
 
       return
-    }
-    else if (cmd === 'viewsource') {
+    } else if (cmd === 'viewsource') {
       this.eVm.isViewingSource.value = this.eVm.isViewingSource.value === false
       this.eVm.setContent(this.eVm.props.modelValue)
       done()
@@ -337,8 +327,12 @@ export default class Caret {
     done()
   }
 
-  selectWord (sel) {
-    if (sel === null || sel.isCollapsed !== true || /* IE 11 */ sel.modify === void 0) {
+  selectWord(sel) {
+    if (
+      sel === null ||
+      sel.isCollapsed !== true ||
+      /* IE 11 */ sel.modify === void 0
+    ) {
       return sel
     }
 
@@ -346,19 +340,20 @@ export default class Caret {
     const range = document.createRange()
     range.setStart(sel.anchorNode, sel.anchorOffset)
     range.setEnd(sel.focusNode, sel.focusOffset)
-    const direction = range.collapsed ? [ 'backward', 'forward' ] : [ 'forward', 'backward' ]
+    const direction = range.collapsed
+      ? ['backward', 'forward']
+      : ['forward', 'backward']
     range.detach()
 
     // modify() works on the focus of the selection
-    const
-      endNode = sel.focusNode,
+    const endNode = sel.focusNode,
       endOffset = sel.focusOffset
     sel.collapse(sel.anchorNode, sel.anchorOffset)
-    sel.modify('move', direction[ 0 ], 'character')
-    sel.modify('move', direction[ 1 ], 'word')
+    sel.modify('move', direction[0], 'character')
+    sel.modify('move', direction[1], 'word')
     sel.extend(endNode, endOffset)
-    sel.modify('extend', direction[ 1 ], 'character')
-    sel.modify('extend', direction[ 0 ], 'word')
+    sel.modify('extend', direction[1], 'character')
+    sel.modify('extend', direction[0], 'word')
 
     return sel
   }