打字机执行时。字体 字号一起闪动，影响视觉效果

打字机执行时。字体 字号一起闪动，影响视觉效果

Author: china-wangxu

src/components/menus/toolbar/base/font-family.vue

@@ -3,7 +3,11 @@
     :text="t('base.fontFamily.text')"
     menu-type="select"
     hide-text
-    :select-value="editor?.getAttributes('textStyle').fontFamily || null"
+    :select-value="
+      isTypeRunning
+        ? null
+        : editor?.getAttributes('textStyle').fontFamily || null
+    "
     :style="{ width: $toolbar.mode !== 'classic' ? '144px' : '90px' }"
     filterable
     @menu-click="setFontFamily"
@@ -44,6 +48,14 @@ const options = inject('options')
 const $toolbar = useState('toolbar', options)
 const $recent = useState('recent', options)
 
+import { getTypewriterRunState } from '@/extensions/type-writer'
+let isTypeRunning = $ref(false)
+watch(
+  () => getTypewriterRunState(),
+  (newValue: boolean) => {
+    isTypeRunning = newValue
+  },
+)
 const usedFonts = $ref<string[]>([])
 // https://www.cnblogs.com/gaidalou/p/8479452.html
 const fontDetect = (font?: string) => {

src/components/menus/toolbar/base/font-size.vue

@@ -6,7 +6,11 @@
     hide-text
     style="width: 80px"
     :select-options="fontSizes"
-    :select-value="editor?.getAttributes('textStyle').fontSize || '14px'"
+    :select-value="
+      isTypeRunning
+        ? null
+        : editor?.getAttributes('textStyle').fontSize || '14px'
+    "
     v-bind="$attrs"
     :placeholder="t('base.fontSize.text')"
     filterable
@@ -43,7 +47,14 @@ const $toolbar = useState('toolbar', options)
 const disableItem = (name: string) => {
   return options.value.toolbar?.disableMenuItems.includes(name)
 }
-
+import { getTypewriterRunState } from '@/extensions/type-writer'
+let isTypeRunning = $ref(false)
+watch(
+  () => getTypewriterRunState(),
+  (newValue: boolean) => {
+    isTypeRunning = newValue
+  },
+)
 const fontSizes = [
   { label: t('base.fontSize.default'), value: '14px', order: 4 },
   { label: t('base.fontSize.42pt'), value: '42pt', order: 20 }, // 56

src/extensions/type-writer.ts

@@ -219,3 +219,7 @@ export default Extension.create({
     }
   },
 })
+
+export const getTypewriterRunState = () => {
+  return typewriterState.value.isRunning
+}