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:
@@ -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)
|
||||
|
||||
@@ -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'
|
||||
|
||||
|
||||
Reference in New Issue
Block a user