feat: Further QEditor work

Author: rstoenescu

dev/components/form/editor.vue

@@ -6,7 +6,7 @@
         ['bold', 'italic', 'underline', 'strike', 'h1', 'paragraph'],
         ['subscript', 'superscript'],
         ['quote', 'bullet', 'number', 'outdent', 'indent'],
-        [['paragraph', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'], 'hr', 'removeFormat'],
+        [['paragraph', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']], ['hr', 'removeFormat'],
         ['undo', 'redo']
       ]"
     >

src/components/btn/QBtn.vue

@@ -13,7 +13,10 @@
       :style="{width: width}"
     ></div>
 
-    <span class="q-btn-inner row col flex-center">
+    <span
+      class="q-btn-inner row col flex-center"
+      :class="{'no-wrap': noWrap}"
+    >
       <slot v-if="loading" name="loading">
         <q-spinner></q-spinner>
       </slot>

src/components/btn/QBtnDropdown.js

@@ -62,6 +62,7 @@ export default {
           props: {
             disable: this.disable,
             noCaps: this.noCaps,
+            noWrap: this.noWrap,
             icon: this.icon,
             label: this.label,
             iconRight: this.split ? this.iconRight : null,
@@ -102,7 +103,7 @@ export default {
           rounded: this.rounded,
           push: this.push
         },
-        staticClass: 'q-btn-dropdown q-btn-dropdown-split'
+        staticClass: 'q-btn-dropdown q-btn-dropdown-split no-wrap'
       },
       [
         getBtn(),

src/components/btn/QBtnToggle.vue

@@ -6,7 +6,10 @@
     :class="classes"
   >
     <div class="desktop-only q-focus-helper"></div>
-    <span class="q-btn-inner row col flex-center">
+    <span
+      class="q-btn-inner row col flex-center"
+      :class="{'no-wrap': noWrap}"
+    >
       <q-icon v-if="icon" :name="icon" :class="{'on-left': label && !round}"></q-icon>
       <span v-if="label && !round">{{ label }}</span>
       <slot></slot>

src/components/btn/btn-group.mat.styl

@@ -2,6 +2,8 @@
   border-radius $button-border-radius
   box-shadow $button-shadow
   vertical-align middle
+  > .q-btn-group
+    box-shadow none
   .q-btn
     box-shadow none !important
   .q-btn:not(:last-child)

src/components/btn/btn-mixin.js

@@ -11,10 +11,8 @@ export default {
   props: {
     disable: Boolean,
     label: String,
-    noCaps: {
-      type: Boolean,
-      default: false
-    },
+    noCaps: Boolean,
+    noWrap: Boolean,
     icon: String,
     iconRight: String,
     round: Boolean,

src/components/editor/QEditor.js

@@ -50,8 +50,11 @@ export default {
     },
     buttons () {
       const getBtn = name => {
-        const btn = this.definitions[name] || buttons[name]
-        if (btn.type === 'toggle' || btn.disable) {
+        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
@@ -118,7 +121,7 @@ export default {
       const key = getEventKey(e)
       this.updateAttributes()
 
-      if (!e.ctrlKey || key === 17 || key === 65) {
+      if (!e.ctrlKey || [17, 65, 67, 86].includes(key)) {
         return
       }
 
@@ -140,21 +143,29 @@ export default {
       }
     },
     updateAttributes () {
-      console.log(this.buttons)
       setTimeout(() => {
+        let change = false
         Object.keys(this.attrib).forEach(cmd => {
-          this.attrib[cmd] = this.caret.is(cmd)
+          const state = this.caret.is(cmd)
+          if (this.attrib[cmd] !== state) {
+            this.attrib[cmd] = state
+            change = true
+          }
         })
-        this.$forceUpdate()
+        if (change) {
+          console.log('forceUpdate')
+          this.$forceUpdate()
+        }
       }, 1)
     }
   },
   mounted () {
     this.$refs.content.innerHTML = this.value
     this.caret = new Caret(this.$refs.content)
-    this.runCmd('defaultParagraphSeparator', 'p')
+    document.execCommand('defaultParagraphSeparator', false, 'div')
   },
   render (h) {
+    const attr = this.attrib
     return h(
       'div',
       { staticClass: 'q-editor' },
@@ -173,10 +184,16 @@ export default {
             on: {
               input: this.onInput,
               keydown: this.onKeydown,
-              click: this.updateAttributes
+              click: this.updateAttributes,
+              blur: () => {
+                this.caret.save()
+              }
             }
           }
-        )
+        ),
+        h('div', {style: {
+          wordWrap: 'break-word'
+        }}, [JSON.stringify(attr)])
       ]
     )
   }

src/components/editor/editor-caret.js

@@ -95,7 +95,7 @@ export class Caret {
       sel.addRange(r)
     }
     else {
-      sel.selectAllChildren(this.element)
+      sel.selectAllChildren(this.el)
       sel.collapseToEnd()
     }
   }
@@ -119,7 +119,6 @@ export class Caret {
 
   is (name) {
     if (['BLOCKQUOTE', 'DIV', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'A', 'IMG'].includes(name)) {
-      console.log('HIIIT')
       return this.hasParent(name)
     }
     return document.queryCommandState(name)

src/components/editor/editor-utils.js

@@ -41,8 +41,14 @@ function getBtn (h, vm, btn) {
     }, child)
   }
   else if (Array.isArray(btn)) {
+    let sel = ''
+
     const Items = btn.map(item => {
-      return h(QItem, [
+      const active = vm.attrib[item.test || item.cmd]
+      if (active) {
+        sel = item.tip
+      }
+      return h(QItem, {props: {active}}, [
         h(QItemMain, {
           props: {
             label: item.tip
@@ -51,14 +57,15 @@ function getBtn (h, vm, btn) {
             click () {
               instance.componentInstance.close()
               vm.$refs.content.focus()
+              vm.caret.restore()
               vm.runCmd(item.cmd, item.param)
             }
           }
         })
       ])
     })
 
-    const instance = h(QBtnDropdown, { props: { split: true, label: 'Select' } }, [
+    const instance = h(QBtnDropdown, { props: { noCaps: true, noWrap: true, label: sel } }, [
       h(QList, { props: { link: true, separator: true } }, [
         Items
       ])