From 13c9cf38c4b0dfc77a30639ba0780c1500b1c7d9 Mon Sep 17 00:00:00 2001 From: Micle Bu Date: Sun, 19 Apr 2020 00:26:35 +0800 Subject: [PATCH] fix(alignment): alignment in table, fixed #2 --- src/components/buttons/OAlignDropdown.vue | 10 +- src/components/buttons/OAlignGroup.vue | 8 +- src/components/menubars/OEditorMenuBar.vue | 8 +- src/components/menubars/OEditorMenuBubble.vue | 2 +- src/components/views/OTodoItemView.vue | 4 +- src/data/article.js | 61 +----- src/extentions/Alignment.js | 28 +-- src/pages/examples/all.vue | 12 +- src/pages/examples/basic.vue | 2 +- src/utils/alignment.js | 195 ++++++++++++++---- src/utils/menu.js | 6 +- 11 files changed, 200 insertions(+), 136 deletions(-) diff --git a/src/components/buttons/OAlignDropdown.vue b/src/components/buttons/OAlignDropdown.vue index d163b7a..877637c 100644 --- a/src/components/buttons/OAlignDropdown.vue +++ b/src/components/buttons/OAlignDropdown.vue @@ -4,7 +4,7 @@ + @click.native="item.command({ textAlign: item.value })" clickable v-close-popup> @@ -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 index 7c92fd5..794883c 100644 --- 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 })" /> @@ -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 index 1a5e653..0c44a29 100644 --- 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> - + v-else-if="typeof item === 'string'" /> + diff --git a/src/components/menubars/OEditorMenuBubble.vue b/src/components/menubars/OEditorMenuBubble.vue index 88d827c..5d3edac 100644 --- a/src/components/menubars/OEditorMenuBubble.vue +++ b/src/components/menubars/OEditorMenuBubble.vue @@ -2,7 +2,7 @@
+ :style="`left: ${editorContext.menu.left}px; bottom: ${editorContext.menu.bottom + 8}px;`"> diff --git a/src/data/article.js b/src/data/article.js index 89a7120..e999d3b 100644 --- a/src/data/article.js +++ b/src/data/article.js @@ -6,7 +6,7 @@ * @date 2020.04.11 */ export const BasicFeaturesArticle = ` -

quasar-tiptap

Introduction

Quasar Tiptap Editor is a WYSIWYG rich-text editor using tiptap and Quasar.🔥

Text

Bold text

Italic text

Underline text

Strike through text

Inline code

Text with color

Text with background

Code

This a indent Text.

This is a block quote

Second line

let a = 10
+html 
html quasar-tiptap
Introduction
Quasar Tiptap Editor is a WYSIWYG rich-text editor using tiptap and Quasar.🔥
Text
Bold text
Italic text
Underline text
Strike through text
Inline code
Text with color
Text with background
Table
Title
Name
Description
1
2
3
a
b
c
Code
This a indent Text.
This is a block quote
Second line
let a = 10
 let b = 20
Diagram
Introduction
-
🔥Quasar Tiptap Editor 🔥is a WYSIWYG rich-text editor using tiptap and Quasar.

-
that's easy to use, friendly to developers, fully extensible and clean in design.

-
Heading

-
List

-
Table

-
-  
-    
-      
-      
-      
-    
-    
-      
-      
-      
-    
-    
-      
-      
-      
-    
-  
-

-        

-      		
-        

-      		
-        

-      

-        

-      		
-        

-      		
-        

-      

-        

-      		
-        

-      		
-        

-      

-
Diagrams

-

-Introduction
🔥Quasar Tiptap Editor 🔥is a WYSIWYG rich-text editor using tiptap and Quasar.
that's easy to use, friendly to developers, fully extensible and clean in design.
Heading
List
Table
Title
Name
Description
1
2
3
a
b
c
Diagrams

-
Math Formula

-
Inline

-

-  
-

-
Block

-

-
-

+C -->|Three| F[Cars]">
Math Formula
Inline
Block

 `
diff --git a/src/extentions/Alignment.js b/src/extentions/Alignment.js
index 1f1c44c..0810bf9 100644
--- 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
index 9168795..914d622 100644
--- a/src/pages/examples/all.vue
+++ b/src/pages/examples/all.vue
@@ -1,6 +1,6 @@