fix(alignment): alignment in table, fixed #2

donotebase · Apr 18, 2020 · 13c9cf3 · 13c9cf3
1 parent c51622c
commit 13c9cf3
Show file tree

Hide file tree

Showing 11 changed files with 200 additions and 136 deletions.
diff --git a/src/components/buttons/OAlignDropdown.vue b/src/components/buttons/OAlignDropdown.vue
@@ -4,7 +4,7 @@
       <q-list>
         <q-item v-for="(item, index) in alignments" :key="index"
                 :class="{ 'is-active': isActive(item.value) }"
-                @click.native="item.command()" clickable v-close-popup>
+                @click.native="item.command({ textAlign: item.value })" clickable v-close-popup>
           <q-item-section side>
             <q-icon :name="`format_align_${item.value}`" />
           </q-item-section>
@@ -43,10 +43,10 @@ export default {
   computed: {
     alignments () {
       return [
-        { label: this.$o.lang.editor.left, value: 'left', command: this.commands.align_left },
-        { label: this.$o.lang.editor.center, value: 'center', command: this.commands.align_center },
-        { label: this.$o.lang.editor.right, value: 'right', command: this.commands.align_right },
-        { label: this.$o.lang.editor.justify, value: 'justify', command: this.commands.align_justify },
+        { label: this.$o.lang.editor.left, value: 'left', command: this.commands.alignment },
+        { label: this.$o.lang.editor.center, value: 'center', command: this.commands.alignment },
+        { label: this.$o.lang.editor.right, value: 'right', command: this.commands.alignment },
+        { label: this.$o.lang.editor.justify, value: 'justify', command: this.commands.alignment },
       ]
     }
   }

diff --git a/src/components/buttons/OAlignGroup.vue b/src/components/buttons/OAlignGroup.vue
@@ -4,7 +4,7 @@
                    :icon="`format_align_${item.value}`"
                    :tooltip="item.label"
                    :class="{ 'is-active': isActive(item.value) }"
-                   @click.native="item.command" />
+                   @click.native="item.command({ textAlign: item.value })" />
   </section>
 </template>
 
@@ -36,9 +36,9 @@ export default {
   computed: {
     alignments () {
       return [
-        { label: this.$o.lang.editor.left, value: 'left', command: this.commands.align_left },
-        { label: this.$o.lang.editor.center, value: 'center', command: this.commands.align_center },
-        { label: this.$o.lang.editor.right, value: 'right', command: this.commands.align_right },
+        { label: this.$o.lang.editor.left, value: 'left', command: this.commands.alignment },
+        { label: this.$o.lang.editor.center, value: 'center', command: this.commands.alignment },
+        { label: this.$o.lang.editor.right, value: 'right', command: this.commands.alignment },
       ]
     }
   }

diff --git a/src/components/menubars/OEditorMenuBar.vue b/src/components/menubars/OEditorMenuBar.vue
@@ -13,8 +13,12 @@
                        :is="getName(item)"
                        :editor="editor"
                        v-bind="editorContext"
-                       v-else>
-            </component>
+                       v-else-if="typeof item === 'string'" />
+            <component :key="index"
+                       :is="item"
+                       :editor="editor"
+                       v-bind="editorContext"
+                       v-else />
             <o-table-group v-bind="editorContext" :key="`table-${index}`" v-if="item==='table'" />
           </template>
         </template>

diff --git a/src/components/menubars/OEditorMenuBubble.vue b/src/components/menubars/OEditorMenuBubble.vue
@@ -2,7 +2,7 @@
   <editor-menu-bubble :editor="editor" v-slot="editorContext">
     <section class="tiptap-menububble"
              :class="{ 'is-active': editorContext.menu.isActive && selectedCellSize === 0 }"
-             :style="`left: ${editorContext.menu.left}px; bottom: ${editorContext.menu.bottom}px;`">
+             :style="`left: ${editorContext.menu.left}px; bottom: ${editorContext.menu.bottom + 8}px;`">
       <template v-for="(item, index) of bubbleToolbar">
         <q-separator vertical inset :key="index" v-if="item==='separator'" />
         <component :key="index"

diff --git a/src/components/views/OTodoItemView.vue b/src/components/views/OTodoItemView.vue
@@ -9,7 +9,7 @@
   >
     <div
       contenteditable="false"
-      class="row items-center todo-checkbox"
+      class="row col-12 items-center todo-checkbox"
       @click.stop="toggle"
     >
       <q-icon :name="done ? 'check_box' : 'check_box_outline_blank'" />
@@ -18,7 +18,7 @@
     <div
       ref="content"
       :contenteditable="view.editable.toString()"
-      class="todo-content"
+      class="full-width todo-content"
     />
   </li>
 </template>

diff --git a/src/data/article.js b/src/data/article.js
diff --git a/src/extentions/Alignment.js b/src/extentions/Alignment.js
@@ -2,6 +2,12 @@ import { Extension } from 'tiptap'
 import { setAlignment } from 'src/utils/alignment'
 
 export default class Alignment extends Extension {
+  constructor (options = {}) {
+    super(options)
+
+    this._alignment = options.alignment || 'left'
+  }
+
   get name () {
     return 'alignment'
   }
@@ -17,25 +23,7 @@ export default class Alignment extends Extension {
     }
   }
 
-  commands () {
-    return this.options.alignments.reduce((commands, alignment) => {
-      return {
-        ...commands,
-        [`align_${alignment}`]: () => (state, dispatch) => {
-          const { selection } = state
-          const tr = setAlignment(
-            state.tr.setSelection(selection),
-            alignment === 'left' ? null : alignment,
-          )
-
-          if (tr.docChanged) {
-            dispatch && dispatch(tr)
-            return true
-          } else {
-            return false
-          }
-        },
-      }
-    }, {})
+  commands ({ type }) {
+    return attrs => setAlignment(type, attrs)
   }
 }
diff --git a/src/pages/examples/all.vue b/src/pages/examples/all.vue
@@ -1,6 +1,6 @@
 <template>
   <q-page class="page-quasar-tiptap-all">
-    <quasar-tiptap v-bind="options" scrollable>
+    <quasar-tiptap v-bind="options" @update="onUpdate" scrollable>
       <template slot="toolbar-left">
         <q-separator vertical inset />
         <o-menubar-btn icon="mdi-overscan"
@@ -89,13 +89,21 @@ export default {
           'redo',
         ]
       },
-      isSlideShow: false
+      isSlideShow: false,
+      json: '',
+      html: ''
     }
   },
   components: {
     OMenubarBtn,
   },
   methods: {
+    onUpdate ({ state, getJSON, getHTML }) {
+      this.json = getJSON()
+      this.html = getHTML()
+      console.log('html', this.html)
+      // console.log('json', JSON.stringify(this.json))
+    },
     onSlideShow () {}
   },
   mounted () {

diff --git a/src/pages/examples/basic.vue b/src/pages/examples/basic.vue
@@ -65,7 +65,7 @@ export default {
       this.json = getJSON()
       this.html = getHTML()
       console.log('html', this.html)
-      console.log('json', JSON.stringify(this.json))
+      // console.log('json', JSON.stringify(this.json))
     }
   },
   mounted () {