quasar 2.1.0

package/src/components/editor/QEditor.json

@@ -0,0 +1,301 @@
+{
+  "mixins": [ "composables/private/use-fullscreen" ],
+
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-components/editor"
+  },
+
+  "props": {
+    "model-value": {
+      "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\""
+      ]
+    },
+
+    "readonly": {
+      "extends": "readonly"
+    },
+
+    "square": {
+      "extends": "square"
+    },
+
+    "flat": {
+      "extends": "flat",
+      "desc": "Applies a 'flat' design (no borders)"
+    },
+
+    "dense": {
+      "extends": "dense",
+      "desc": "Dense mode; toolbar buttons are shown on one-line only"
+    },
+
+    "dark": {
+      "extends": "dark"
+    },
+
+    "disable": {
+      "extends": "disable"
+    },
+
+    "min-height": {
+      "type": "String",
+      "desc": "CSS unit for the minimum height of the editable area",
+      "default": "10rem",
+      "examples": [
+        "15rem", "50vh"
+      ],
+      "category": "style"
+    },
+
+    "max-height": {
+      "type": "String",
+      "desc": "CSS unit for maximum height of the input area",
+      "examples": [
+        "1000px", "90vh"
+      ],
+      "category": "style"
+    },
+
+    "height": {
+      "type": "String",
+      "desc": "CSS value to set the height of the editable area",
+      "examples": [
+        "100px", "50vh"
+      ],
+      "category": "style"
+    },
+
+    "definitions": {
+      "type": "Object",
+      "desc": "Definition of commands and their buttons to be included in the 'toolbar' prop",
+      "examples": [
+        ":definitions=\"{ save: { tip: 'Save your work', icon: 'save', label: 'Save', handler: saveWork }, upload: { tip: 'Upload to cloud', icon: 'cloud_upload', label: 'Upload', handler: uploadIt } }\""
+      ],
+      "definition": {
+        "label": {
+          "type": "String",
+          "desc": "Label of the button",
+          "examples": [ "Addresses" ]
+        },
+        "tip": {
+          "type": "String",
+          "desc": "Text to be displayed as a tooltip on hover",
+          "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" ]
+        },
+        "icon": {
+          "type": "String",
+          "desc": "Icon of the button",
+          "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" ]
+        },
+        "handler": {
+          "type": "Function",
+          "desc": "Either this or \"cmd\" is required. Function for when button gets clicked/tapped.",
+          "params": null,
+          "returns": null,
+          "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" ]
+        },
+        "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\" />" ]
+        },
+        "disable": {
+          "type": [ "Boolean", "Function" ],
+          "desc": "Is button disabled? If specifying a function, return a Boolean value.",
+          "examples": [ "() => this.userIsActive()" ]
+        },
+        "type": {
+          "type": "String",
+          "desc": "Pass the value \"no-state\" if the button should not have an \"active\" state",
+          "values": [ null, "no-state" ],
+          "examples": [ "no-state" ]
+        },
+        "fixedLabel": {
+          "type": "Boolean",
+          "desc": "Lock the button label, so it doesn't change based on the child option selected."
+        },
+        "fixedIcon": {
+          "type": "Boolean",
+          "desc": "Lock the button icon, so it doesn't change based on the child option selected."
+        },
+        "highlight": {
+          "type": "Boolean",
+          "desc": "Highlight the toolbar button, when a child option has been selected."
+        }
+      },
+      "category": "toolbar"
+    },
+
+    "fonts": {
+      "type": "Object",
+      "desc": "Object with definitions of fonts",
+      "examples": [
+        ":fonts=\"{ arial: 'Arial', arial_black: 'Arial Black', comic_sans: 'Comic Sans MS' }\""
+      ],
+      "category": "toolbar"
+    },
+
+    "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" ]
+      ],
+      "category": "toolbar"
+    },
+
+    "toolbar-color": {
+      "extends": "color",
+      "desc": "Font color (from the Quasar Palette) of buttons and text in the toolbar",
+      "category": "toolbar"
+    },
+
+    "toolbar-text-color": {
+      "extends": "text-color",
+      "desc": "Text color (from the Quasar Palette) of toolbar commands",
+      "category": "toolbar"
+    },
+
+    "toolbar-toggle-color": {
+      "type": "String",
+      "desc": "Choose the active color (from the Quasar Palette) of toolbar commands button",
+      "default": "primary",
+      "examples": [ "secondary", "blue-3" ],
+      "category": "toolbar"
+    },
+
+    "toolbar-bg": {
+      "type": "String",
+      "desc": "Toolbar background color (from Quasar Palette)",
+      "default": "grey-3",
+      "examples": [ "secondary", "blue-3" ],
+      "category": "toolbar"
+    },
+
+    "toolbar-outline": {
+      "type": "Boolean",
+      "desc": "Toolbar buttons are rendered \"outlined\"",
+      "category": "toolbar|style"
+    },
+
+    "toolbar-push": {
+      "type": "Boolean",
+      "desc": "Toolbar buttons are rendered as a \"push-button\" type",
+      "category": "toolbar|style"
+    },
+
+    "toolbar-rounded": {
+      "type": "Boolean",
+      "desc": "Toolbar buttons are rendered \"rounded\"",
+      "category": "toolbar|style"
+    },
+
+    "paragraph-tag": {
+      "type": "String",
+      "desc": "Paragraph tag to be used",
+      "values": [ "div", "p" ],
+      "category": "behavior"
+    },
+
+    "content-style": {
+      "type": "Object",
+      "desc": "Object with CSS properties and values for styling the container of QEditor",
+      "examples": [ ":content-style=\"{ backgroundColor: '#C0C0C0' }\"" ],
+      "category": "style"
+    },
+
+    "content-class": {
+      "type": [ "Object", "Array", "String" ],
+      "desc": "CSS classes for the input area",
+      "examples": [
+        "my-special-class",
+        ":content-class=\"{ 'my-special-class': <condition> }\""
+      ],
+      "category": "style"
+    },
+
+    "placeholder": {
+      "type": "String",
+      "desc": "Text to display as placeholder",
+      "examples": [ "Type your story here ..." ],
+      "category": "content"
+    }
+  },
+
+  "events": {
+    "update:model-value": {
+      "extends": "update:model-value",
+      "params": {
+        "value": {
+          "type": "String",
+          "desc": "The pure HTML of the content"
+        }
+      }
+    }
+  },
+
+  "methods": {
+    "runCmd": {
+      "desc": "Run contentEditable command at caret position and range",
+      "params": {
+        "cmd": {
+          "type": "String",
+          "desc": "Must be a valid execCommand method according to the designMode API",
+          "examples": [ "copy", "cut", "paste" ],
+          "required": true
+        },
+        "param": {
+          "type": "String",
+          "desc": "The argument to pass to the command",
+          "examples": [ "<small>Small Text</small>" ]
+        },
+        "update": {
+          "type": "Boolean",
+          "desc": "Refresh the toolbar",
+          "default": true
+        }
+      }
+    },
+
+    "refreshToolbar": {
+      "desc": "Hide the link editor if visible and force the instance to re-render"
+    },
+
+    "focus": {
+      "desc": "Focus on the contentEditable at saved cursor position"
+    },
+
+    "getContentEl": {
+      "desc": "Retrieve the content of the Editor",
+      "returns": {
+        "type": "Element",
+        "desc": "Provides the pure HTML within the editable area",
+        "__exemption": [ "examples" ]
+      }
+    }
+  }
+}

package/src/components/editor/QEditor.sass

@@ -0,0 +1,83 @@
+.q-editor
+  border: 1px solid $editor-border-color
+  border-radius: $generic-border-radius
+  background-color: #fff
+
+  &.disabled
+    border-style: dashed
+
+  > div:first-child, &__toolbars-container, &__toolbars-container > div:first-child
+    border-top-left-radius: inherit
+    border-top-right-radius: inherit
+
+  &__content
+    outline: 0
+    padding: $editor-content-padding
+    min-height: $editor-content-min-height
+    border-bottom-left-radius: inherit
+    border-bottom-right-radius: inherit
+    overflow: auto
+    pre
+      white-space: pre-wrap
+    hr
+      border: 0
+      outline: 0
+      margin: 1px
+      height: 1px
+      background: $editor-hr-color
+    &:empty:not(:focus):before
+      content: attr(placeholder)
+      opacity: .7
+
+  &__toolbar
+    border-bottom: 1px solid $editor-border-color
+    min-height: 32px
+
+  .q-btn
+    margin: $editor-button-gutter
+
+  &__toolbar-group
+    position: relative
+    margin: 0 $editor-button-gutter
+    & + &
+      &:before
+        content: ''
+        position: absolute
+        left: (- $editor-button-gutter)
+        top: $editor-button-gutter
+        bottom: $editor-button-gutter
+        width: 1px
+        background: $editor-border-color
+
+  &__link-input
+    color: inherit
+    text-decoration: none
+    text-transform: none
+    border: none
+    border-radius: 0
+    background: none
+    outline: 0
+
+  &--flat
+    &, .q-editor__toolbar
+      border: 0
+
+  &--dense
+    .q-editor__toolbar-group
+      display: flex
+      align-items: center
+      flex-wrap: nowrap
+
+  &--dark
+    border-color: $editor-border-dark-color
+
+    .q-editor
+
+      &__content hr
+        background: $editor-hr-dark-color
+
+      &__toolbar
+        border-color: $editor-border-dark-color
+
+    .q-editor__toolbar-group + .q-editor__toolbar-group:before
+      background: $editor-border-dark-color

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

@@ -0,0 +1,363 @@
+import { noop } from '../../utils/event.js'
+
+function getBlockElement (el, parent) {
+  if (parent && 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)
+      : el.currentStyle,
+    display = style.display
+
+  if (display === 'block' || display === 'table') {
+    return el
+  }
+
+  return getBlockElement(el.parentNode)
+}
+
+function isChildOf (el, parent, orSame) {
+  return !el || el === document.body
+    ? false
+    : (orSame === true && el === parent) || (parent === document ? document.body : parent).contains(el.parentNode)
+}
+
+function createRange (node, chars, range) {
+  if (!range) {
+    range = document.createRange()
+    range.selectNode(node)
+    range.setStart(node, 0)
+  }
+
+  if (chars.count === 0) {
+    range.setEnd(node, chars.count)
+  }
+  else if (chars.count > 0) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      if (node.textContent.length < chars.count) {
+        chars.count -= node.textContent.length
+      }
+      else {
+        range.setEnd(node, chars.count)
+        chars.count = 0
+      }
+    }
+    else {
+      for (let lp = 0; chars.count !== 0 && lp < node.childNodes.length; lp++) {
+        range = createRange(node.childNodes[ lp ], chars, range)
+      }
+    }
+  }
+
+  return range
+}
+
+const urlRegex = /^https?:\/\//
+
+export default class Caret {
+  constructor (el, eVm) {
+    this.el = el
+    this.eVm = eVm
+    this._range = null
+  }
+
+  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)) {
+        return sel
+      }
+    }
+
+    return null
+  }
+
+  get hasSelection () {
+    return this.selection !== null
+      ? this.selection.toString().length > 0
+      : false
+  }
+
+  get range () {
+    const sel = this.selection
+
+    if (sel !== null && sel.rangeCount) {
+      return sel.getRangeAt(0)
+    }
+
+    return this._range
+  }
+
+  get parent () {
+    const range = this.range
+
+    if (range !== null) {
+      const node = range.startContainer
+
+      return node.nodeType === document.ELEMENT_NODE
+        ? node
+        : node.parentNode
+    }
+
+    return null
+  }
+
+  get blockParent () {
+    const parent = this.parent
+
+    if (parent !== null) {
+      return getBlockElement(parent, this.el)
+    }
+
+    return null
+  }
+
+  save (range = this.range) {
+    if (range !== null) {
+      this._range = range
+    }
+  }
+
+  restore (range = this._range) {
+    const
+      r = document.createRange(),
+      sel = document.getSelection()
+
+    if (range !== null) {
+      r.setStart(range.startContainer, range.startOffset)
+      r.setEnd(range.endContainer, range.endOffset)
+      sel.removeAllRanges()
+      sel.addRange(r)
+    }
+    else {
+      sel.selectAllChildren(this.el)
+      sel.collapseToEnd()
+    }
+  }
+
+  savePosition () {
+    let charCount = -1, node
+    const
+      selection = document.getSelection(),
+      parentEl = this.el.parentNode
+
+    if (selection.focusNode && isChildOf(selection.focusNode, parentEl)) {
+      node = selection.focusNode
+      charCount = selection.focusOffset
+
+      while (node && node !== parentEl) {
+        if (node !== this.el && node.previousSibling) {
+          node = node.previousSibling
+          charCount += node.textContent.length
+        }
+        else {
+          node = node.parentNode
+        }
+      }
+    }
+
+    this.savedPos = charCount
+  }
+
+  restorePosition (length = 0) {
+    if (this.savedPos > 0 && this.savedPos < length) {
+      const
+        selection = window.getSelection(),
+        range = createRange(this.el, { count: this.savedPos })
+
+      if (range) {
+        range.collapse(false)
+        selection.removeAllRanges()
+        selection.addRange(range)
+      }
+    }
+  }
+
+  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) {
+    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
+  }
+
+  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')
+      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
+      case 'fullscreen':
+        return this.eVm.inFullscreen.value
+      case 'viewsource':
+        return this.eVm.isViewingSource.value
+      case void 0:
+        return false
+      default:
+        const state = document.queryCommandState(cmd)
+        return param !== void 0 ? state === param : state
+    }
+  }
+
+  getParentAttribute (attrib) {
+    if (this.parent !== null) {
+      return this.parent.getAttribute(attrib)
+    }
+
+    return null
+  }
+
+  can (name) {
+    if (name === 'outdent') {
+      return this.hasParents([ 'blockquote', 'li' ], true)
+    }
+
+    if (name === 'indent') {
+      return this.hasParents([ 'li' ], true)
+    }
+
+    if (name === 'link') {
+      return this.selection !== null || this.is('link')
+    }
+  }
+
+  apply (cmd, param, done = noop) {
+    if (cmd === 'formatBlock') {
+      if ([ 'BLOCKQUOTE', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ].includes(param) && this.is(cmd, param)) {
+        cmd = 'outdent'
+        param = null
+      }
+
+      if (param === 'PRE' && this.is(cmd, 'PRE')) {
+        param = 'P'
+      }
+    }
+    else if (cmd === 'print') {
+      done()
+
+      const win = window.open()
+
+      win.document.write(`
+        <!doctype html>
+        <html>
+          <head>
+            <title>Print - ${ document.title }</title>
+          </head>
+          <body>
+            <div>${ this.el.innerHTML }</div>
+          </body>
+        </html>
+      `)
+      win.print()
+      win.close()
+
+      return
+    }
+    else if (cmd === 'link') {
+      const link = this.getParentAttribute('href')
+
+      if (link === null) {
+        const selection = this.selectWord(this.selection)
+        const url = selection ? selection.toString() : ''
+
+        if (!url.length) {
+          if (!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 {
+        this.eVm.editLinkUrl.value = link
+
+        this.range.selectNodeContents(this.parent)
+        this.save()
+      }
+
+      return
+    }
+    else if (cmd === 'fullscreen') {
+      this.eVm.toggleFullscreen()
+      done()
+
+      return
+    }
+    else if (cmd === 'viewsource') {
+      this.eVm.isViewingSource.value = this.eVm.isViewingSource.value === false
+      this.eVm.setContent(this.eVm.props.modelValue)
+      done()
+
+      return
+    }
+
+    document.execCommand(cmd, false, param)
+
+    done()
+  }
+
+  selectWord (sel) {
+    if (sel === null || sel.isCollapsed !== true || /* IE 11 */ sel.modify === void 0) {
+      return sel
+    }
+
+    // Detect if selection is backwards
+    const range = document.createRange()
+    range.setStart(sel.anchorNode, sel.anchorOffset)
+    range.setEnd(sel.focusNode, sel.focusOffset)
+    const direction = range.collapsed ? [ 'backward', 'forward' ] : [ 'forward', 'backward' ]
+    range.detach()
+
+    // modify() works on the focus of the selection
+    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.extend(endNode, endOffset)
+    sel.modify('extend', direction[ 1 ], 'character')
+    sel.modify('extend', direction[ 0 ], 'word')
+
+    return sel
+  }
+}