feat: 添加增大/减小字号按钮

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,

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>

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;
 }

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;">
+          <Button class="text-color-btn" style="flex: 3;">
-            <IconBackgroundColor />
+            <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;
 

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)