From 19cf9a87613f31e7974a1e05c79d8fb7000f4deb Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <1171051090@qq.com>
Date: Thu, 7 Jan 2021 09:58:52 +0800
Subject: [PATCH] update

---
 src/assets/styles/antd.scss                    |  3 +++
 src/prosemirror/utils.ts                       |  2 +-
 .../ElementStylePanel/TextStylePanel.vue       | 18 ++++++++++--------
 src/views/Editor/Toolbar/index.vue             |  2 +-
 4 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/assets/styles/antd.scss b/src/assets/styles/antd.scss
index 00acc66d..2713bdb9 100644
--- a/src/assets/styles/antd.scss
+++ b/src/assets/styles/antd.scss
@@ -16,4 +16,7 @@
 }
 .ant-select-item-option-content {
   font-size: 13px !important;
+}
+.ant-radio-button-wrapper {
+  text-align: center;
 }
\ No newline at end of file
diff --git a/src/prosemirror/utils.ts b/src/prosemirror/utils.ts
index 1f8cf642..39c079a9 100644
--- a/src/prosemirror/utils.ts
+++ b/src/prosemirror/utils.ts
@@ -88,7 +88,7 @@ export const getTextAttrs = (view: EditorView) => {
   const backcolor = getAttrValue(view, 'backcolor', 'backcolor') || '#000'
   const fontsize = getAttrValue(view, 'fontsize', 'fontsize') || '12px'
   const fontname = getAttrValue(view, 'fontname', 'fontname') || '微软雅黑'
-  const align = getAttrValueInSelection(view, 'align')
+  const align = getAttrValueInSelection(view, 'align') || 'left'
   const isBulletList = isActiveOfParentNodeType('bullet_list', view.state)
   const isOrderedList = isActiveOfParentNodeType('ordered_list', view.state)
   const isBlockquote = isActiveOfParentNodeType('blockquote', view.state)
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
index a65bc8fb..b6b90d48 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
@@ -66,11 +66,11 @@
 
     <Divider />
 
-    <ButtonGroup class="row">
-      <Button style="flex: 1;" :type="richTextAttrs.align === 'left' || '' ? 'primary' : 'default'"><AlignLeftOutlined /></Button>
-      <Button style="flex: 1;" :type="richTextAttrs.align === 'center' ? 'primary' : 'default'"><AlignCenterOutlined /></Button>
-      <Button style="flex: 1;" :type="richTextAttrs.align === 'right' ? 'primary' : 'default'"><AlignRightOutlined /></Button>
-    </ButtonGroup>
+    <RadioGroup class="row" button-style="solid" :value="richTextAttrs.align">
+      <RadioButton value="left" style="flex: 1;"><AlignLeftOutlined /></RadioButton>
+      <RadioButton value="center" style="flex: 1;"><AlignCenterOutlined /></RadioButton>
+      <RadioButton value="right" style="flex: 1;"><AlignRightOutlined /></RadioButton>
+    </RadioGroup>
 
     <ButtonGroup class="row">
       <Button style="flex: 1;" :type="richTextAttrs.bulletList ? 'primary' : 'default'"><UnorderedListOutlined /></Button>
@@ -83,14 +83,14 @@
       <div style="flex: 2;">行间距：</div>
       <Select style="flex: 3;" :value="lineHeight" @change="value => updateLineHeight(value)">
         <template #suffixIcon><ColumnHeightOutlined /></template>
-        <SelectOption v-for="item in lineHeightOptions" :key="item" :value="item">{{item}}</SelectOption>
+        <SelectOption v-for="item in lineHeightOptions" :key="item" :value="item">{{item}}倍</SelectOption>
       </Select>
     </div>
     <div class="row">
       <div style="flex: 2;">字间距：</div>
       <Select style="flex: 3;" :value="wordSpace" @change="value => updateWordSpace(value)">
         <template #suffixIcon><ColumnWidthOutlined /></template>
-        <SelectOption v-for="item in wordSpaceOptions" :key="item" :value="item">{{item}}</SelectOption>
+        <SelectOption v-for="item in wordSpaceOptions" :key="item" :value="item">{{item}}px</SelectOption>
       </Select>
     </div>
 
@@ -121,7 +121,7 @@ import ElementOpacity from '../common/ElementOpacity.vue'
 import ElementOutline from '../common/ElementOutline.vue'
 import ElementShadow from '../common/ElementShadow.vue'
 import ColorPicker from '@/components/ColorPicker/index.vue'
-import { Select, Input, Button, Divider, Popover } from 'ant-design-vue'
+import { Select, Input, Button, Divider, Popover, Radio } from 'ant-design-vue'
 import {
   FontColorsOutlined,
   HighlightOutlined,
@@ -150,6 +150,8 @@ export default defineComponent({
     ButtonGroup: Button.Group,
     Divider,
     Popover,
+    RadioGroup: Radio.Group,
+    RadioButton: Radio.Button,
     FontColorsOutlined,
     HighlightOutlined,
     BgColorsOutlined,
diff --git a/src/views/Editor/Toolbar/index.vue b/src/views/Editor/Toolbar/index.vue
index 6be73565..dd04f42d 100644
--- a/src/views/Editor/Toolbar/index.vue
+++ b/src/views/Editor/Toolbar/index.vue
@@ -122,6 +122,6 @@ export default defineComponent({
 .content {
   padding: 12px;
   font-size: 13px;
-  overflow: auto;
+  overflow: overlay;
 }
 </style>
\ No newline at end of file