54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
import { type RefObject, useCallback, useEffect } from 'react';
|
|
import { editorCommands } from '~/.client/stores/editor';
|
|
import type { Editor } from '~/types/editor';
|
|
import { logger } from '~/utils/logger';
|
|
|
|
/**
|
|
* 用于监听编辑器命令的自定义 hook
|
|
* @param editorRef 编辑器实例引用
|
|
* @returns 包含处理特定元素的方法
|
|
*/
|
|
export function useEditorCommands(editorRef: RefObject<Editor | null>) {
|
|
// 处理滚动到指定元素
|
|
const scrollToElement = useCallback(
|
|
(domId: string) => {
|
|
const editor = editorRef.current;
|
|
if (!editor) {
|
|
return;
|
|
}
|
|
editor.scrollToElement(`#${domId}`);
|
|
},
|
|
[editorRef],
|
|
);
|
|
|
|
// 监听编辑器命令
|
|
useEffect(() => {
|
|
const unsubscribe = editorCommands.listen((command) => {
|
|
if (!command) {
|
|
return;
|
|
}
|
|
|
|
switch (command.type) {
|
|
case 'scrollToElement': {
|
|
const { domId } = command.payload;
|
|
scrollToElement(domId);
|
|
break;
|
|
}
|
|
default:
|
|
logger.warn('未知的编辑器命令类型', command);
|
|
}
|
|
|
|
// 处理完命令后重置
|
|
editorCommands.set(null);
|
|
});
|
|
|
|
return () => {
|
|
unsubscribe();
|
|
};
|
|
}, [scrollToElement]);
|
|
|
|
return {
|
|
scrollToElement,
|
|
};
|
|
}
|