From 6fe17bc6d82a97d94016b1861f94c544942292b1 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Sat, 14 May 2022 17:01:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=A2=9E=E5=A4=A7/?=
 =?UTF-8?q?=E5=87=8F=E5=B0=8F=E5=AD=97=E5=8F=B7=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/prosemirror/utils.ts                |  6 +++
 .../ElementStylePanel/MultiStylePanel.vue     | 45 ++++++++++++++++++-
 .../ElementStylePanel/ShapeStylePanel.vue     | 34 +++++++++++++-
 .../ElementStylePanel/TextStylePanel.vue      | 24 ++++++++--
 .../components/element/ProsemirrorEditor.vue  | 17 ++++++-
 5 files changed, 120 insertions(+), 6 deletions(-)

diff --git a/src/utils/prosemirror/utils.ts b/src/utils/prosemirror/utils.ts
index 902fd2c1..300a7e94 100644
--- a/src/utils/prosemirror/utils.ts
+++ b/src/utils/prosemirror/utils.ts
@@ -217,6 +217,12 @@ export const getTextAttrs = (view: EditorView, defaultAttrs: DefaultAttrs = {})
 
 export type TextAttrs = ReturnType<typeof getTextAttrs>
 
+export const getFontsize = (view: EditorView) => {
+  const marks = getMarkAttrs(view)
+  const fontsize = getAttrValue(marks, 'fontsize', 'fontsize') || _defaultAttrs.fontsize
+  return parseInt(fontsize)
+}
+
 export const defaultRichTextAttrs: TextAttrs = {
   bold: false,
   em: false,
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue
index 09b39fba..1e6e60eb 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue
@@ -87,12 +87,40 @@
           />
         </template>
         <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文字颜色">
-          <Button class="text-color-btn" style="flex: 1;">
+          <Button class="text-color-btn" style="flex: 3;">
             <IconText />
             <div class="text-color-block" :style="{ backgroundColor: richTextAttrs.color }"></div>
           </Button>
         </Tooltip>
       </Popover>
+      <Popover trigger="click">
+        <template #content>
+          <ColorPicker
+            :modelValue="richTextAttrs.backcolor"
+            @update:modelValue="value => updateFontStyle('backcolor', value)"
+          />
+        </template>
+        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文字高亮">
+          <Button class="text-color-btn" style="flex: 3;">
+            <IconHighLight />
+            <div class="text-color-block" :style="{ backgroundColor: richTextAttrs.backcolor }"></div>
+          </Button>
+        </Tooltip>
+      </Popover>
+      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="增大字号">
+        <Button 
+          class="font-size-btn"
+          style="flex: 2;"
+          @click="updateFontStyle('fontsize-add', '2')"
+        ><IconFontSize />+</Button>
+      </Tooltip>
+      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="减小字号">
+        <Button 
+          class="font-size-btn"
+          style="flex: 2;"
+          @click="updateFontStyle('fontsize-reduce', '2')"
+        ><IconFontSize />-</Button>
+      </Tooltip>
     </ButtonGroup>
     <RadioGroup 
       class="row" 
@@ -245,4 +273,19 @@ export default defineComponent({
   align-items: center;
   margin-bottom: 10px;
 }
+.text-color-btn {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+}
+.text-color-block {
+  width: 16px;
+  height: 3px;
+  margin-top: 1px;
+}
+.font-size-btn {
+  padding: 0;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
index 6ba212e5..51e6ea67 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
@@ -111,12 +111,40 @@
             />
           </template>
           <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文字颜色">
-            <Button class="text-color-btn" style="flex: 1;">
+            <Button class="text-color-btn" style="flex: 3;">
               <IconText />
               <div class="text-color-block" :style="{ backgroundColor: richTextAttrs.color }"></div>
             </Button>
           </Tooltip>
         </Popover>
+        <Popover trigger="click">
+          <template #content>
+            <ColorPicker
+              :modelValue="richTextAttrs.backcolor"
+              @update:modelValue="value => emitRichTextCommand('backcolor', value)"
+            />
+          </template>
+          <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文字高亮">
+            <Button class="text-color-btn" style="flex: 3;">
+              <IconHighLight />
+              <div class="text-color-block" :style="{ backgroundColor: richTextAttrs.backcolor }"></div>
+            </Button>
+          </Tooltip>
+        </Popover>
+        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="增大字号">
+          <Button 
+            class="font-size-btn"
+            style="flex: 2;"
+            @click="emitRichTextCommand('fontsize-add')"
+          ><IconFontSize />+</Button>
+        </Tooltip>
+        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="减小字号">
+          <Button 
+            class="font-size-btn"
+            style="flex: 2;"
+            @click="emitRichTextCommand('fontsize-reduce')"
+          ><IconFontSize />-</Button>
+        </Tooltip>
       </ButtonGroup>
 
       <CheckboxButtonGroup class="row">
@@ -325,12 +353,16 @@ export default defineComponent({
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  padding: 0;
 }
 .text-color-block {
   width: 16px;
   height: 3px;
   margin-top: 1px;
 }
+.font-size-btn {
+  padding: 0;
+}
 .slider {
   flex: 3;
 }
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
index 78575a7d..24fa0bb2 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
@@ -51,7 +51,7 @@
           />
         </template>
         <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文字颜色">
-          <Button class="text-color-btn" style="flex: 1;">
+          <Button class="text-color-btn" style="flex: 3;">
             <IconText />
             <div class="text-color-block" :style="{ backgroundColor: richTextAttrs.color }"></div>
           </Button>
@@ -65,12 +65,26 @@
           />
         </template>
         <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文字高亮">
-          <Button class="text-color-btn" style="flex: 1;">
-            <IconBackgroundColor />
+          <Button class="text-color-btn" style="flex: 3;">
+            <IconHighLight />
             <div class="text-color-block" :style="{ backgroundColor: richTextAttrs.backcolor }"></div>
           </Button>
         </Tooltip>
       </Popover>
+      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="增大字号">
+        <Button 
+          class="font-size-btn"
+          style="flex: 2;"
+          @click="emitRichTextCommand('fontsize-add')"
+        ><IconFontSize />+</Button>
+      </Tooltip>
+      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="减小字号">
+        <Button 
+          class="font-size-btn"
+          style="flex: 2;"
+          @click="emitRichTextCommand('fontsize-reduce')"
+        ><IconFontSize />-</Button>
+      </Tooltip>
     </ButtonGroup>
 
     <CheckboxButtonGroup class="row">
@@ -476,12 +490,16 @@ export default defineComponent({
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  padding: 0;
 }
 .text-color-block {
   width: 16px;
   height: 3px;
   margin-top: 1px;
 }
+.font-size-btn {
+  padding: 0;
+}
 .link-popover {
   width: 240px;
 
diff --git a/src/views/components/element/ProsemirrorEditor.vue b/src/views/components/element/ProsemirrorEditor.vue
index c84fe6e3..008258eb 100644
--- a/src/views/components/element/ProsemirrorEditor.vue
+++ b/src/views/components/element/ProsemirrorEditor.vue
@@ -13,7 +13,7 @@ import { useMainStore } from '@/store'
 import { EditorView } from 'prosemirror-view'
 import { toggleMark, wrapIn, selectAll } from 'prosemirror-commands'
 import { initProsemirrorEditor, createDocument } from '@/utils/prosemirror'
-import { findNodesWithSameMark, getTextAttrs, autoSelectAll, addMark, markActive } from '@/utils/prosemirror/utils'
+import { findNodesWithSameMark, getTextAttrs, autoSelectAll, addMark, markActive, getFontsize } from '@/utils/prosemirror/utils'
 import emitter, { EmitterEvents, RichTextCommand } from '@/utils/emitter'
 import { alignmentCommand } from '@/utils/prosemirror/commands/setTextAlign'
 import { toggleList } from '@/utils/prosemirror/commands/toggleList'
@@ -141,6 +141,21 @@ export default defineComponent({
           autoSelectAll(editorView)
           addMark(editorView, mark)
         }
+        else if (item.command === 'fontsize-add') {
+          const step = item.value ? +item.value : 2
+          autoSelectAll(editorView)
+          const fontsize = getFontsize(editorView) + step + 'px'
+          const mark = editorView.state.schema.marks.fontsize.create({ fontsize })
+          addMark(editorView, mark)
+        }
+        else if (item.command === 'fontsize-reduce') {
+          const step = item.value ? +item.value : 2
+          autoSelectAll(editorView)
+          let fontsize = getFontsize(editorView) - step
+          if (fontsize < 12) fontsize = 12
+          const mark = editorView.state.schema.marks.fontsize.create({ fontsize: fontsize + 'px' })
+          addMark(editorView, mark)
+        }
         else if (item.command === 'color' && item.value) {
           const mark = editorView.state.schema.marks.forecolor.create({ color: item.value })
           autoSelectAll(editorView)