feat: add bar language change listen

cycleccc · Aug 13, 2024 · f0c89be · f0c89be
1 parent f6a26d8
commit f0c89be
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 4 deletions.
diff --git a/packages/core/src/i18n/index.ts b/packages/core/src/i18n/index.ts
@@ -39,6 +39,16 @@ export function i18nGetResources(lng: string) {
   return i18next.getResourceBundle(lng, NS)
 }
 
+/**
+ * 监听语言变更
+ * @param callback
+ * @returns
+ */
+export function i18nListenLanguage(callback: (lng: string) => void) {
+  i18next.on('languageChanged', callback)
+  return () => i18next.off('languageChanged', callback)
+}
+
 /**
  * 翻译
  */

diff --git a/packages/core/src/menus/bar/HoverBar.ts b/packages/core/src/menus/bar/HoverBar.ts
@@ -16,6 +16,7 @@ import { gen$barItemDivider } from '../helpers/helpers'
 import { getPositionBySelection, getPositionByNode, correctPosition } from '../helpers/position'
 import { IButtonMenu, ISelectMenu, IDropPanelMenu, IModalMenu } from '../interface'
 import { CustomElement } from '../../../../custom-types'
+import { i18nListenLanguage } from '../../i18n'
 
 type MenuType = IButtonMenu | ISelectMenu | IDropPanelMenu | IModalMenu
 
@@ -48,6 +49,7 @@ class HoverBar {
   private hoverbarItems: IBarItem[] = []
   private prevSelectedNode: Node | null = null // 上一次选中的 node
   private isShow = false
+  private lngListen: () => void = () => {}
 
   constructor() {
     // 异步，否则获取不到 DOM 和 editor
@@ -72,6 +74,17 @@ class HoverBar {
       editor.on('fullScreen', hideAndClean)
       editor.on('unFullScreen', hideAndClean)
     })
+
+    // 监听语言变更
+    this.lngListen = i18nListenLanguage(() => {
+      // 清空menu缓存
+      this.menus = {}
+      // 切换语言直接关闭
+      this.hideAndClean()
+      // xxx
+      const editor = this.getEditorInstance()
+      editor.deselect()
+    })
   }
 
   getMenus() {
@@ -336,6 +349,9 @@ class HoverBar {
     // 销毁 DOM
     this.$elem.remove()
 
+    // 销毁语言监听
+    this.lngListen?.()
+
     // 清空属性
     this.menus = {}
     this.hoverbarItems = []

diff --git a/packages/core/src/menus/bar/Toolbar.ts b/packages/core/src/menus/bar/Toolbar.ts
@@ -15,6 +15,7 @@ import { gen$barItemDivider } from '../helpers/helpers'
 import { IMenuGroup, IButtonMenu, ISelectMenu, IDropPanelMenu, IModalMenu } from '../interface'
 import GroupButton from '../bar-item/GroupButton'
 import { IToolbarConfig } from '../../config/interface'
+import { i18nListenLanguage } from '../../i18n'
 
 type MenuType = IButtonMenu | ISelectMenu | IDropPanelMenu | IModalMenu
 
@@ -24,6 +25,7 @@ class Toolbar {
   private menus: { [key: string]: MenuType } = {}
   private toolbarItems: IBarItem[] = []
   private config: Partial<IToolbarConfig> = {}
+  private lngListen: () => void = () => {}
 
   constructor(boxSelector: string | DOMElement, config: Partial<IToolbarConfig>) {
     this.config = config
@@ -41,11 +43,11 @@ class Toolbar {
 
     // 异步，否则拿不到 editor 实例
     promiseResolveThen(() => {
-      // 注册 items
-      this.registerItems()
+      // 首次初始化
+      this.initToolbar()
 
-      // 创建完，先模拟一次 onchange
-      this.changeToolbarState()
+      // 监听语言变更
+      this.lngListen = i18nListenLanguage(() => this.initToolbar())
 
       // 监听 editor onchange
       const editor = this.getEditorInstance()
@@ -61,6 +63,21 @@ class Toolbar {
     return this.config
   }
 
+  // 初始化工具栏
+  private initToolbar() {
+    // 清空menu缓存
+    this.menus = {}
+    // 清空elem
+    const $toolbar = this.$toolbar
+    $toolbar?.empty()
+
+    // 注册 items
+    this.registerItems()
+
+    // 创建完，先模拟一次 onchange
+    this.changeToolbarState()
+  }
+
   // 注册 toolbarItems
   private registerItems() {
     let prevKey = ''
@@ -216,6 +233,9 @@ class Toolbar {
     // 销毁 DOM
     this.$toolbar.remove()
 
+    // 销毁语言监听
+    this.lngListen?.()
+
     // 清空属性
     this.menus = {}
     this.toolbarItems = []