refactor: TicketCreatePage用SchemaSidebar替换手写浏览器+SqlEditor暴露insertText光标定位
- SqlEditor: 添加 forwardRef + useImperativeHandle 暴露 insertText 方法 - 支持在光标位置插入文本并移动光标 - TicketCreatePage: 删除300+行手写表结构/Redis/索引浏览代码 - 统一使用 SchemaSidebar 组件(与查询页一致) - handleSchemaInsert: 已选库插table名,未选库插db.table名 - 清理未用 imports/icons/types/helpers (RedisKeyItem, formatBytes等) - 848行 → 435行
This commit is contained in:
1 parent
c6ef67adba
commit
7e26837c5f
2 files changed
+69
-461
No files matched your search
@@ -1,4 +1,4 @@
|
||||
import React, { useRef, useEffect, useCallback } from 'react';
|
||||
import React, { useRef, useEffect, useCallback, useImperativeHandle, forwardRef } from 'react';
|
||||
import { EditorState, Compartment } from '@codemirror/state';
|
||||
import type { Extension } from '@codemirror/state';
|
||||
import { EditorView, keymap, lineNumbers, placeholder as cmPlaceholder } from '@codemirror/view';
|
||||
@@ -259,7 +259,12 @@ export function formatSQL(input: string): string {
|
||||
// SqlEditor component
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const SqlEditor: React.FC<SqlEditorProps> = ({
|
||||
export interface SqlEditorHandle {
|
||||
/** Insert text at cursor position and move cursor after inserted text */
|
||||
insertText: (text: string) => void;
|
||||
}
|
||||
|
||||
const SqlEditor = forwardRef<SqlEditorHandle, SqlEditorProps>(({
|
||||
value,
|
||||
onChange,
|
||||
placeholder = 'Enter SQL query…',
|
||||
@@ -268,7 +273,7 @@ const SqlEditor: React.FC<SqlEditorProps> = ({
|
||||
readOnly = false,
|
||||
onExecute,
|
||||
schema,
|
||||
}) => {
|
||||
}, ref) => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const viewRef = useRef<EditorView | null>(null);
|
||||
const langCompartmentRef = useRef(new Compartment());
|
||||
@@ -276,6 +281,20 @@ const SqlEditor: React.FC<SqlEditorProps> = ({
|
||||
const placeholderCompartmentRef = useRef(new Compartment());
|
||||
const isExternalUpdateRef = useRef(false);
|
||||
|
||||
// Expose insertText to parent via ref
|
||||
useImperativeHandle(ref, () => ({
|
||||
insertText: (text: string) => {
|
||||
const view = viewRef.current;
|
||||
if (!view) return;
|
||||
const pos = view.state.selection.main.head;
|
||||
view.dispatch({
|
||||
changes: { from: pos, insert: text },
|
||||
selection: { anchor: pos + text.length },
|
||||
});
|
||||
view.focus();
|
||||
},
|
||||
}), []);
|
||||
|
||||
// Keep onChange in a stable ref so callbacks never go stale
|
||||
const onChangeRef = useRef(onChange);
|
||||
onChangeRef.current = onChange;
|
||||
@@ -427,6 +446,6 @@ const SqlEditor: React.FC<SqlEditorProps> = ({
|
||||
className="sql-editor-wrapper"
|
||||
/>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
export default SqlEditor;
|
||||
Reference in new issue
Block a user