feat: Further QEditor work

rstoenescu · rstoenescu · commit 91acffde260b · 2017-09-05T19:04:37.000+03:00
diff --git a/dev/components/form/editor.vue b/dev/components/form/editor.vue
@@ -3,10 +3,11 @@
     <q-editor
       v-model="model"
       :toolbar="[
-        ['bold', 'italic', 'underline', 'strike', 'h1', 'paragraph'],
-        ['subscript', 'superscript'],
+        ['bold', 'italic', 'underline', 'strike', 'h1', 'p'],
+        ['link', 'print', 'subscript', 'superscript'],
         ['quote', 'bullet', 'number', 'outdent', 'indent'],
-        [['paragraph', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']], ['hr', 'removeFormat'],
+        [['size-1', 'size-2', 'size-3', 'size-4', 'size-5', 'size-6', 'size-7']],
+        [['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'code']], ['hr', 'removeFormat'],
         ['undo', 'redo']
       ]"
     >
diff --git a/src/components/btn/QBtnDropdown.js b/src/components/btn/QBtnDropdown.js
@@ -49,7 +49,8 @@ export default {
           staticClass: 'transition-generic',
           'class': {
             'rotate-180': this.opened,
-            'on-right': !this.split
+            'on-right': !this.split,
+            'q-btn-dropdown-arrow': !this.split
           }
         }
       ),
diff --git a/src/components/btn/btn-dropdown.mat.styl b/src/components/btn/btn-dropdown.mat.styl
@@ -1,4 +1,7 @@
-.q-btn-dropdown-arrow
-  padding 0 4px
+.q-btn-dropdown-simple
+  padding-right 0
+  .q-btn-dropdown-arrow
+    margin-right 8px
 .q-btn-dropdown-split .q-btn-dropdown-arrow
+  padding 0 4px
   border-left 1px solid rgba(255, 255, 255, .25)
diff --git a/src/components/editor/QEditor.js b/src/components/editor/QEditor.js
@@ -3,6 +3,8 @@ import { getToolbar } from './editor-utils'
 import { buttons } from './editor-definitions'
 import { Caret } from './editor-caret'
 
+document.execCommand('defaultParagraphSeparator', false, 'div')
+
 export default {
   name: 'q-editor',
   provide () {
@@ -49,55 +51,39 @@ export default {
       return !this.readonly && !this.disable
     },
     buttons () {
-      const getBtn = name => {
-        const
-          btn = this.definitions[name] || buttons[name],
-          state = this.attrib[btn.test || btn.cmd]
-
-        if (state === void 0 && (btn.type === 'toggle' || btn.disable)) {
-          this.attrib[btn.test || btn.cmd] = false
-        }
-        return btn
-      }
-
+      const getBtn = name => this.definitions[name] || buttons[name]
       return this.toolbar.map(
-        group => group.map(name => {
-          if (Array.isArray(name)) {
-            return name.map(item => getBtn(item))
-          }
-          return getBtn(name)
-        })
+        group => group.map(name => Array.isArray(name) ? name.map(item => getBtn(item)) : getBtn(name))
       )
     },
     keys () {
-      const k = {}
-      this.buttons.forEach(group => {
-        group.forEach(btn => {
-          if (Array.isArray(btn)) {
-            btn.forEach(item => {
-              if (item.key) {
-                k[item.key] = {
-                  cmd: btn.cmd,
-                  param: btn.param
-                }
-              }
-            })
-          }
-          else if (btn.key) {
+      const
+        k = {},
+        add = btn => {
+          if (btn.key) {
             k[btn.key] = {
               cmd: btn.cmd,
               param: btn.param
             }
           }
+        }
+
+      this.buttons.forEach(group => {
+        group.forEach(btn => {
+          if (Array.isArray(btn)) {
+            btn.forEach(add)
+          }
+          else {
+            add(btn)
+          }
         })
       })
       return k
     }
   },
   data () {
     return {
-      editWatcher: true,
-      attrib: {}
+      editWatcher: true
     }
   },
   watch: {
@@ -119,7 +105,7 @@ export default {
     },
     onKeydown (e) {
       const key = getEventKey(e)
-      this.updateAttributes()
+      this.refreshToolbar()
 
       if (!e.ctrlKey || [17, 65, 67, 86].includes(key)) {
         return
@@ -135,34 +121,26 @@ export default {
     },
     runCmd (cmd, param, update = true) {
       console.log('applying', cmd, param)
-      this.caret.apply(cmd, param)
-      this.$refs.content.focus()
+      this.caret.apply(cmd, param, () => {
+        this.$refs.content.focus()
 
-      if (update) {
-        this.updateAttributes()
-      }
+        if (update) {
+          this.refreshToolbar()
+        }
+      })
     },
-    updateAttributes () {
+    refreshToolbar () {
       setTimeout(() => {
-        let change = false
-        Object.keys(this.attrib).forEach(cmd => {
-          const state = this.caret.is(cmd)
-          if (this.attrib[cmd] !== state) {
-            this.attrib[cmd] = state
-            change = true
-          }
-        })
-        if (change) {
-          console.log('forceUpdate')
-          this.$forceUpdate()
-        }
+        this.$forceUpdate()
       }, 1)
     }
   },
   mounted () {
-    this.$refs.content.innerHTML = this.value
-    this.caret = new Caret(this.$refs.content)
-    document.execCommand('defaultParagraphSeparator', false, 'div')
+    this.$nextTick(() => {
+      this.caret = new Caret(this.$refs.content)
+      this.$refs.content.innerHTML = this.value
+      this.$nextTick(this.refreshToolbar)
+    })
   },
   render (h) {
     const attr = this.attrib
@@ -184,7 +162,7 @@ export default {
             on: {
               input: this.onInput,
               keydown: this.onKeydown,
-              click: this.updateAttributes,
+              click: this.refreshToolbar,
               blur: () => {
                 this.caret.save()
               }
diff --git a/src/components/editor/editor-caret.js b/src/components/editor/editor-caret.js
@@ -1,3 +1,5 @@
+import Dialog from '../dialog'
+
 function getBlockElement (el, parent) {
   if (parent && el === parent) {
     return null
@@ -37,10 +39,10 @@ export class Caret {
   }
 
   get selection () {
-    var sel = document.getSelection()
     if (!this.el) {
-      return sel
+      return
     }
+    const sel = document.getSelection()
     // only when the selection in element
     if (isChildOf(sel.anchorNode, this.el) && isChildOf(sel.focusNode, this.el)) {
       return sel
@@ -51,7 +53,7 @@ export class Caret {
     const sel = this.selection
 
     if (!sel) {
-      return null
+      return
     }
 
     return sel.rangeCount
@@ -62,7 +64,7 @@ export class Caret {
   get parent () {
     const range = this.range
     if (!range) {
-      return null
+      return
     }
 
     const node = range.startContainer
@@ -74,7 +76,7 @@ export class Caret {
   get blockParent () {
     const parent = this.parent
     if (!parent) {
-      return null
+      return
     }
     return getBlockElement(parent, this.el)
   }
@@ -117,11 +119,27 @@ export class Caret {
       : false
   }
 
-  is (name) {
-    if (['BLOCKQUOTE', 'DIV', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'A', 'IMG'].includes(name)) {
-      return this.hasParent(name)
+  is (cmd, param) {
+    switch (cmd) {
+      case 'formatBlock':
+        if (param === 'DIV' && this.parent === this.el) {
+          return true
+        }
+        return this.hasParent(param, param === 'PRE')
+      case 'link':
+        return this.hasParent('A', true)
+      case 'fontSize':
+        return document.queryCommandValue(cmd) === param
+      default:
+        const state = document.queryCommandState(cmd)
+        return param ? state === param : state
+    }
+  }
+
+  getParentAttribute (attrib) {
+    if (this.parent) {
+      return this.parent.getAttribute(attrib)
     }
-    return document.queryCommandState(name)
   }
 
   can (name) {
@@ -141,13 +159,62 @@ export class Caret {
     }
   }
 
-  apply (cmd, param) {
-    if (cmd === 'formatBlock' && ['BLOCKQUOTE', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'A', 'IMG'].includes(param)) {
-      if (this.is(param)) {
+  apply (cmd, param, done = () => {}) {
+    if (cmd === 'formatBlock') {
+      if (['BLOCKQUOTE', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'PRE'].includes(param) && this.is(param)) {
         this.apply('outdent')
+        done()
         return
       }
     }
+    else if (cmd === 'print') {
+      const win = window.open('', '_blank', 'width=600,height=700,left=200,top=100,menubar=no,toolbar=no,location=no,scrollbars=yes')
+      win.document.open()
+      win.document.write(`<!doctype html><html><head><title>Print</title></head><body onload="print();"><div>${this.el.innerHTML}</div></body></html>`)
+      win.document.close()
+      done()
+      return
+    }
+    else if (cmd === 'link') {
+      const link = this.getParentAttribute('href')
+      if (link && this.range) {
+        this.range.selectNodeContents(this.parent)
+      }
+      this.save()
+      Dialog.create({
+        title: 'Link',
+        message: this.selection ? this.selection.toString() : null,
+        form: {
+          url: {
+            type: 'text',
+            label: 'URL',
+            model: link || 'http://'
+          }
+        },
+        buttons: [
+          {
+            label: link ? 'Remove' : 'Cancel',
+            handler: () => {
+              if (link) {
+                this.restore()
+                document.execCommand('unlink')
+                done()
+              }
+            }
+          },
+          {
+            label: link ? 'Update' : 'Create',
+            handler: data => {
+              this.restore()
+              document.execCommand('createLink', false, data.url)
+              done()
+            }
+          }
+        ]
+      })
+      return
+    }
     document.execCommand(cmd, false, param)
+    done()
   }
 }
diff --git a/src/components/editor/editor-definitions.js b/src/components/editor/editor-definitions.js
@@ -8,29 +8,40 @@ export const buttons = {
   number: {type: 'toggle', cmd: 'insertOrderedList', icon: 'format_list_numbered', tip: 'Numbered style list'},
   subscript: {type: 'toggle', cmd: 'subscript', icon: 'vertical_align_bottom', tip: 'Subscript'},
   superscript: {type: 'toggle', cmd: 'superscript', icon: 'vertical_align_top', tip: 'Superscript'},
+  link: {type: 'toggle', cmd: 'link', icon: 'link', tip: 'Link', key: 76},
 
   quote: {type: 'toggle', test: 'BLOCKQUOTE', cmd: 'formatBlock', param: 'BLOCKQUOTE', icon: 'format_quote', tip: 'Quote', key: 81},
   left: {type: 'toggle', cmd: 'justifyLeft', icon: 'format_align_left', tip: 'Align to left'},
   center: {type: 'toggle', cmd: 'justifyCenter', icon: 'format_align_center', tip: 'Align to center'},
   right: {type: 'toggle', cmd: 'justifyRight', icon: 'format_align_right', tip: 'Align to right'},
   justify: {type: 'toggle', cmd: 'justifyFull', icon: 'format_align_justify', tip: 'Justify'},
 
-  // execute
-  outdent: {type: 'execute', disable: vm => vm.caret && !vm.caret.can('outdent'), cmd: 'outdent', icon: 'format_indent_decrease', tip: 'Decrease indentation'},
-  indent: {type: 'execute', disable: vm => vm.caret && !vm.caret.can('indent'), cmd: 'indent', icon: 'format_indent_increase', tip: 'Increase indentation'},
-  highlight: {type: 'execute', cmd: 'hiliteColor', param: '#D4FF00', icon: 'format_color_text', tip: 'Highlight'}, // no IE
-  removeFormat: {type: 'execute', cmd: 'removeFormat', icon: 'format_clear', tip: 'Remove formatting'},
-  hr: {type: 'execute', cmd: 'insertHorizontalRule', icon: 'remove', tip: 'Horizontal line'},
-  undo: {type: 'execute', cmd: 'undo', icon: 'undo', tip: 'Undo', key: 90},
-  redo: {type: 'execute', cmd: 'redo', icon: 'redo', tip: 'Redo', key: 89},
-
-  h1: {type: 'toggle', test: 'H1', cmd: 'formatBlock', param: 'H1', icon: 'format_size', tip: 'Heading H1'},
-  h2: {type: 'toggle', test: 'H2', cmd: 'formatBlock', param: 'H2', icon: 'format_size', tip: 'Heading H2'},
-  h3: {type: 'toggle', test: 'H3', cmd: 'formatBlock', param: 'H3', icon: 'format_size', tip: 'Heading H3'},
-  h4: {type: 'toggle', test: 'H4', cmd: 'formatBlock', param: 'H4', icon: 'format_size', tip: 'Heading H4'},
-  h5: {type: 'toggle', test: 'H5', cmd: 'formatBlock', param: 'H5', icon: 'format_size', tip: 'Heading H5'},
-  h6: {type: 'toggle', test: 'H6', cmd: 'formatBlock', param: 'H6', icon: 'format_size', tip: 'Heading H6'},
-  paragraph: {type: 'toggle', test: 'DIV', cmd: 'formatBlock', param: 'DIV', icon: 'format_size', tip: 'Paragraph'}
+  // run
+  print: {type: 'run', cmd: 'print', icon: 'print', tip: 'Print'},
+  outdent: {type: 'run', disable: vm => vm.caret && !vm.caret.can('outdent'), cmd: 'outdent', icon: 'format_indent_decrease', tip: 'Decrease indentation'},
+  indent: {type: 'run', disable: vm => vm.caret && !vm.caret.can('indent'), cmd: 'indent', icon: 'format_indent_increase', tip: 'Increase indentation'},
+  highlight: {type: 'run', cmd: 'hiliteColor', param: '#D4FF00', icon: 'format_color_text', tip: 'Highlight'}, // no IE
+  removeFormat: {type: 'run', cmd: 'removeFormat', icon: 'format_clear', tip: 'Remove formatting'},
+  hr: {type: 'run', cmd: 'insertHorizontalRule', icon: 'remove', tip: 'Horizontal line'},
+  undo: {type: 'run', cmd: 'undo', icon: 'undo', tip: 'Undo', key: 90},
+  redo: {type: 'run', cmd: 'redo', icon: 'redo', tip: 'Redo', key: 89},
+
+  h1: {type: 'toggle', cmd: 'formatBlock', param: 'H1', icon: 'format_size', tip: 'Title H1'},
+  h2: {type: 'toggle', cmd: 'formatBlock', param: 'H2', icon: 'format_size', tip: 'Title H2'},
+  h3: {type: 'toggle', cmd: 'formatBlock', param: 'H3', icon: 'format_size', tip: 'Title H3'},
+  h4: {type: 'toggle', cmd: 'formatBlock', param: 'H4', icon: 'format_size', tip: 'Title H4'},
+  h5: {type: 'toggle', cmd: 'formatBlock', param: 'H5', icon: 'format_size', tip: 'Title H5'},
+  h6: {type: 'toggle', cmd: 'formatBlock', param: 'H6', icon: 'format_size', tip: 'Title H6'},
+  p: {type: 'toggle', cmd: 'formatBlock', param: 'DIV', icon: 'format_size', tip: 'Paragraph'},
+  code: {type: 'toggle', cmd: 'formatBlock', param: 'PRE', icon: 'code', tip: 'Code'},
+
+  'size-1': {type: 'toggle', cmd: 'fontSize', param: '1', icon: 'filter_1', tip: 'Very small'},
+  'size-2': {type: 'toggle', cmd: 'fontSize', param: '2', icon: 'filter_2', tip: 'A bit small'},
+  'size-3': {type: 'toggle', cmd: 'fontSize', param: '3', icon: 'filter_3', tip: 'Normal'},
+  'size-4': {type: 'toggle', cmd: 'fontSize', param: '4', icon: 'filter_4', tip: 'Medium-large'},
+  'size-5': {type: 'toggle', cmd: 'fontSize', param: '5', icon: 'filter_5', tip: 'Big'},
+  'size-6': {type: 'toggle', cmd: 'fontSize', param: '6', icon: 'filter_6', tip: 'Very big'},
+  'size-7': {type: 'toggle', cmd: 'fontSize', param: '7', icon: 'filter_7', tip: 'Maximum'}
 
   /*
   link: {cmd: 'link', icon: 'link', tip: 'Link', key: 76},
diff --git a/src/components/editor/editor-utils.js b/src/components/editor/editor-utils.js

Original file line number	Diff line number	Diff line change
`@@ -49,7 +49,8 @@ export default {`
`49`	`49`	`staticClass: 'transition-generic',`
`50`	`50`	`'class': {`
`51`	`51`	`'rotate-180': this.opened,`
`52`		`- 'on-right': !this.split`
	`52`	`+ 'on-right': !this.split,`
	`53`	`+ 'q-btn-dropdown-arrow': !this.split`
`53`	`54`	`}`
`54`	`55`	`}`
`55`	`56`	`),`