fix: 修复electron环境下引入插件报错问题

Author: DymoneLewis

packages/extension/src/tools/label/LabelOverlay.tsx

@@ -4,7 +4,11 @@ import { forEach, merge } from 'lodash-es'
 import LabelPlugin from '.'
 import Label from './Label'
 import LabelModel from './LabelModel'
-import { MediumEditor, defaultOptions, ColorPickerButton } from './mediumEditor'
+import {
+  MediumEditor,
+  defaultOptions,
+  createColorPickerButtonClass,
+} from './mediumEditor'
 
 import LabelConfig = LogicFlow.LabelConfig
 
@@ -47,7 +51,7 @@ export class LabelOverlay extends Component<IToolProps, ILabelOverlayState> {
       merge(defaultOptions, {
         autoLink: true,
         extensions: {
-          colorPicker: new ColorPickerButton(),
+          colorPicker: new (createColorPickerButtonClass(MediumEditor))(),
         },
       }),
     )
@@ -82,7 +86,7 @@ export class LabelOverlay extends Component<IToolProps, ILabelOverlayState> {
         merge(defaultOptions, {
           autoLink: true,
           extensions: {
-            colorPicker: new ColorPickerButton(),
+            colorPicker: new (createColorPickerButtonClass(MediumEditor))(),
           },
         }),
       )

packages/extension/src/tools/label/mediumEditor.ts

@@ -39,56 +39,83 @@ export const defaultOptions = {
   disableEditing: true,
 }
 
-export const ColorPickerButton = MediumEditor.extensions.button.extend({
-  name: 'colorpicker',
-  tagNames: ['mark'],
-  contentDefault: '<b>Color</b>',
-  aria: 'Color Picker',
-  action: 'colorPicker',
-  init: function () {
-    rangy.init()
-    MediumEditor.extensions.button.prototype.init.call(this)
-    this.colorPicker = new Picker({
-      parent: this.button,
-      color: '#000',
-      onDone: (res) => {
-        if (this.coloredText && this.coloredText.isAppliedToSelection()) {
-          this.coloredText.undoToSelection()
-        }
-        this.coloredText = rangy.createClassApplier('colored', {
-          elementTagName: 'span',
-          elementProperties: {
-            style: {
-              color: res.hex,
-            },
-          },
-          normalize: true,
-        })
-        this.coloredText.toggleSelection()
-        this.base.checkContentChanged()
-        this.setInactive()
-      },
-    })
-  },
-  getButton: function () {
-    return this.button
-  },
-  handleClick: function () {
-    this.setActive()
-    this.colorPicker.show()
-  },
-  isAlreadyApplied: function (node) {
-    return node.nodeName.toLowerCase() === 'mark'
-  },
-  isActive: function () {
-    return this.button.classList.contains('medium-editor-button-active')
-  },
-  setInactive: function () {
-    this.button.classList.remove('medium-editor-button-active')
-  },
-  setActive: function () {
-    this.button.classList.add('medium-editor-button-active')
-  },
-})
+export function createColorPickerButtonClass(MediumEditor?: any) {
+  const ButtonBase =
+    MediumEditor?.extensions?.button || MediumEditor?.extensions?.button
+  const ExtensionBase =
+    MediumEditor?.Extension || (MediumEditor as any)?.Extension
+
+  // 当 Button 扩展基类不可用时，回退到 Extension 基类，避免在模块加载阶段抛错
+  const Base = ButtonBase || ExtensionBase
+  if (!Base) {
+    console.warn(
+      'MediumEditor button/extension base not available; using noop extension',
+    )
+    return class {}
+  }
+
+  return Base.extend({
+    name: 'colorpicker',
+    tagNames: ['mark'],
+    contentDefault: '<b>Color</b>',
+    aria: 'Color Picker',
+    action: 'colorPicker',
+    init: function () {
+      try {
+        rangy.init()
+      } catch {
+        console.error('rangy.init failed')
+      }
+      // 初始化按钮（ButtonBase 才有 prototype.init）
+      try {
+        ;(ButtonBase as any)?.prototype?.init?.call(this)
+      } catch {
+        console.error('ButtonBase.init failed')
+      }
+      this.colorPicker = new Picker({
+        parent: (this as any).button || undefined,
+        color: '#000',
+        onDone: (res) => {
+          try {
+            if (this.coloredText && this.coloredText.isAppliedToSelection?.()) {
+              this.coloredText.undoToSelection()
+            }
+            this.coloredText = rangy.createClassApplier('colored', {
+              elementTagName: 'span',
+              elementProperties: { style: { color: res.hex } },
+              normalize: true,
+            })
+            this.coloredText.toggleSelection()
+            this.base?.checkContentChanged?.()
+            this.setInactive?.()
+          } catch {
+            console.error('Picker.onDone failed')
+          }
+        },
+      })
+    },
+    getButton: function () {
+      return (this as any).button
+    },
+    handleClick: function () {
+      this.setActive?.()
+      this.colorPicker?.show?.()
+    },
+    isAlreadyApplied: function (node) {
+      return node?.nodeName?.toLowerCase?.() === 'mark'
+    },
+    isActive: function () {
+      return (this as any).button?.classList?.contains(
+        'medium-editor-button-active',
+      )
+    },
+    setInactive: function () {
+      ;(this as any).button?.classList?.remove('medium-editor-button-active')
+    },
+    setActive: function () {
+      ;(this as any).button?.classList?.add('medium-editor-button-active')
+    },
+  })
+}
 
 export { MediumEditor }