release: v0.4.4 — 升级 MetonaEditor 0.2.4 & MetonaToast 0.2.1

依赖升级:
- @metona-team/metona-editor: 0.1.14 → 0.2.4
- @metona-team/metona-toast: 0.1.2 → 0.2.1(精确版本)

Editor.tsx 适配 v0.2.4:
- 移除 ExtendedEditorOptions 类型 hack(lineNumbers/autoBrackets 已原生支持)
- 本地声明 EditMode/ThemeName 类型(v0.2.4 不再命名导出)
- 适配 onModeChange 签名 (mode: EditMode → mode: string)
- 适配 onLinkClick 签名 ({href}) → (href, text, editor)
- 新增 syncScroll: true 同步滚动
- 新增 wordWrap: true 自动换行
- 新增 outline: false(保留自研 OutlinePanel)
- 新增 historyLimit: 100 / historyDebounce: 400
- 新增 shortcutHelp 预设插件(按 ? 弹出快捷键面板)
- 新增 onLinkClick 回调(通过 openExternal 安全打开链接)
- 新增 onFocus / onBlur 回调(预留扩展点)

toast.ts 适配 v0.2.1:
- 安装 keyboard 插件(ESC 关闭所有 Toast)
- 安装 accessibility 插件(屏幕阅读器朗读)
- 新增 width: 360 配置
This commit is contained in:
thzxx
2026-07-25 16:23:59 +08:00
parent 8bbbb7ff70
commit 2e7baa1073
8 changed files with 531 additions and 940 deletions
+30 -10
View File
@@ -1,17 +1,15 @@
import React, { useEffect, useRef } from 'react'
import MeEditor from '@metona-team/metona-editor'
import type { MarkdownEditor, MarkdownEditorOptions, EditMode, ThemeName } from '@metona-team/metona-editor'
import type { MarkdownEditor } from '@metona-team/metona-editor'
import { useTabStore } from '../../stores/tabStore'
import { setMetonaEditorGetter, useEditorStore } from '../../stores/editorStore'
import { settingsRepository } from '../../db/settingsRepository'
import { renderMarkdownSync } from '../../lib/markdown'
import type { ThemeMode } from '../../types/settings'
// v0.1.9 demo 验证过但类型声明未收录的配置项
interface ExtendedEditorOptions extends MarkdownEditorOptions {
lineNumbers?: boolean
autoBrackets?: boolean
}
// v0.2.4: 这些类型不再作为命名导出暴露,本地声明以保持类型安全
type EditMode = 'edit' | 'split' | 'preview'
type ThemeName = 'light' | 'dark' | 'auto' | 'warm' | string
interface EditorProps {
themeMode: ThemeMode
@@ -37,6 +35,7 @@ const EDITOR_PLUGINS: string[] = [
'searchReplace', // Ctrl+F/Ctrl+H
'imagePaste', // Ctrl+V 粘贴图片
'exportTool', // 导出 MD/HTML
'shortcutHelp', // 按 ? 弹出快捷键面板
]
/**
@@ -64,7 +63,7 @@ export const Editor = React.memo(function Editor({ themeMode, onAppSave }: Edito
const container = containerRef.current
if (!container) return
const config: ExtendedEditorOptions = {
const config = {
value: activeTab?.content ?? '',
mode: mapViewMode(viewMode),
height: '100%',
@@ -87,6 +86,12 @@ export const Editor = React.memo(function Editor({ themeMode, onAppSave }: Edito
autoBrackets: true,
readOnly: viewMode === 'preview',
plugins: EDITOR_PLUGINS,
// v0.2.4 新增配置项
syncScroll: true,
wordWrap: true,
outline: false, // 使用自研 OutlinePanel
historyLimit: 100,
historyDebounce: 400,
// 使用 unified 管线渲染,保留图片路径修复能力
render: (md: string) => {
@@ -109,8 +114,8 @@ export const Editor = React.memo(function Editor({ themeMode, onAppSave }: Edito
},
// 模式切换 → 同步到 editorStore 并持久化
onModeChange: (mode: EditMode) => {
const mapped = reverseMapMode(mode)
onModeChange: (mode: string) => {
const mapped = reverseMapMode(mode as EditMode)
setViewMode(mapped)
settingsRepository.save({ viewMode: mapped })
},
@@ -118,7 +123,22 @@ export const Editor = React.memo(function Editor({ themeMode, onAppSave }: Edito
// Ctrl+S → 触发应用层保存(Electron IPC 写文件系统)
onSave: () => {
onAppSave?.()
}
},
// v0.2.4 新增回调: 链接点击 → 安全打开外部链接
onLinkClick: (href: string) => {
if (window.electronAPI?.openExternal) {
window.electronAPI.openExternal(href)
}
},
// v0.2.4 新增回调: 焦点事件(预留扩展点)
onFocus: () => {
// 编辑器获得焦点
},
onBlur: () => {
// 编辑器失去焦点
},
}
const editor = MeEditor.create(container, config)
+9
View File
@@ -5,6 +5,8 @@ import MeToast from '@metona-team/metona-toast'
*
* 替代原自研 Toast 组件(components/Toast),由 MeToast 接管全部通知渲染。
* MeToast 自管理 DOM 与样式,无需在 React 树中挂载容器组件。
*
* v0.4.4: 升级 MeToast 0.2.1,安装 keyboard / accessibility 插件。
*/
MeToast.configure({
position: 'top-right',
@@ -17,8 +19,15 @@ MeToast.configure({
showProgress: true,
draggable: true,
locale: 'zh-CN',
width: 360,
})
// 安装内置插件
// eslint-disable-next-line react-hooks/rules-of-hooks -- MeToast.use() 是插件安装方法,非 React Hook
MeToast.use('keyboard') // ESC 关闭所有 Toast
// eslint-disable-next-line react-hooks/rules-of-hooks
MeToast.use('accessibility') // 屏幕阅读器实时朗读 Toast 内容
/** 与原 showToast 保持兼容的类型子集 */
export type ToastType = 'success' | 'error' | 'warning' | 'info'