feat: jsonviewer support onfocus onblur autofoucs

content/plus/jsonviewer/index-en-US.md

@@ -237,6 +237,8 @@ render(CustomRenderJsonComponent);
 | showSearch | Whether to show search icon | boolean | true |
 | options | Formatting configuration | JsonViewerOptions | - |
 | onChange | Callback for content change | (value: string) => void | - |
+| onBlur        | Callback when input box loses focus        | (e:event) => void                                             | -             |
+| onFocus       | The callback when the input box is focused | (e:event) => void                                             | -             |
 
 ### JsonViewerOptions
 
@@ -247,6 +249,7 @@ render(CustomRenderJsonComponent);
 | readOnly      | Whether to be read-only.    | boolean           | false    | -       |
 | customRenderRule | Custom render rules | CustomRenderRule[] | -       | 2.74.0  |
 | formatOptions | Content format setting                  | FormattingOptions | -       | -       |
+| autoFocus| Whether to auto focus | boolean | false | - | 
 
 ### FormattingOptions
 
@@ -255,7 +258,6 @@ render(CustomRenderJsonComponent);
 | tabSize      | Indent size. Unit: px                 | number  | 4       |
 | insertSpaces | Whether to use spaces for indentation | boolean | true    |
 | eol          | Line break character                  | string  | '\n'    |
-
 ### CustomRenderRule
 
 | Attribute | Description | Type | Default |

content/plus/jsonviewer/index.md

@@ -234,6 +234,8 @@ render(CustomRenderJsonComponent);
 | showSearch        | 是否显示搜索Icon                           | boolean                                  | true   |
 | options           | 编辑器配置                                | JsonViewerOptions                       | -   |
 | onChange          | 内容变化回调                           | (value: string) => void                  | -   |
+| onBlur        | 输入框失去焦点时的回调         | (e:event) => void                                             | -         |
+| onFocus       | 输入框 focus 时的回调          | (e:event) => void                                             | -         |
 
 ### JsonViewerOptions
 
@@ -244,6 +246,7 @@ render(CustomRenderJsonComponent);
 | readOnly        | 是否只读                             | boolean                            | false  | - |
 | customRenderRule | 自定义渲染规则                             | CustomRenderRule[]               |  -  | 2.74.0 |
 | formatOptions     | 格式化配置                               | FormattingOptions                |  -  | - |
+| autoFocus| 是否自动对焦 | boolean | false | - | 
 
 ### CustomRenderRule
 | 属性                | 说明                                          | 类型                              | 默认值    |

packages/semi-foundation/jsonViewer/foundation.ts

@@ -10,7 +10,9 @@ export interface JsonViewerAdapter<P = Record<string, any>, S = Record<string, a
     notifyHover: (value: string, el: HTMLElement) => HTMLElement | undefined;
     setSearchOptions: (key: string) => void;
     showSearchBar: () => void;
-    notifyCustomRender: (customRenderMap: Map<HTMLElement, any>) => void
+    notifyCustomRender: (customRenderMap: Map<HTMLElement, any>) => void;
+    notifyFocus: (e: Event) => void;
+    notifyBlur: (e: Event) => void
 }
 
 class JsonViewerFoundation extends BaseFoundation<JsonViewerAdapter> {
@@ -37,7 +39,12 @@ class JsonViewerFoundation extends BaseFoundation<JsonViewerAdapter> {
                 this.search(this._adapter.getSearchRef().value);
             }
         });
-
+        this.jsonViewer.emitter.on('focus', (e) => {
+            this._adapter.notifyFocus(e);
+        });
+        this.jsonViewer.emitter.on('blur', (e) => {
+            this._adapter.notifyBlur(e);
+        });
     }
 
     search(searchText: string, caseSensitive?: boolean, wholeWord?: boolean, regex?: boolean) {

packages/semi-json-viewer-core/src/common/emitterEvents.ts

@@ -8,6 +8,8 @@ export interface GlobalEvents {
     hoverNode: IHoverNodeEvent;
     renderHoverNode: IRenderHoverNodeEvent;
     forceRender: undefined;
+    focus: Event;
+    blur: Event;
     customRender: ICustomRenderEvent
 }
 

packages/semi-json-viewer-core/src/json-viewer/jsonViewer.ts

@@ -16,7 +16,8 @@ export interface JsonViewerOptions {
     formatOptions?: FormattingOptions;
     completionOptions?: CompletionOptions;
     customRenderRule?: CustomRenderRule[];
-    prefixCls?: string
+    prefixCls?: string;
+    autoFocus?: boolean
 }
 
 export interface CompletionOptions {
@@ -54,6 +55,10 @@ export class JsonViewer {
 
     layout() {
         this._view.layout();
+        const { autoFocus, readOnly } = this._view.options || {};
+        if (autoFocus && !readOnly) {
+            this._view.contentDom.focus();
+        }
     }
 
     getModel() {

packages/semi-json-viewer-core/src/view/edit/editWidget.ts

@@ -75,6 +75,14 @@ export class EditWidget {
             if (e.button !== 0) return; // 只处理左键
             this._selectionModel.updateFromSelectingEnd();
         });
+        this._view.contentDom.addEventListener('focus', e => {
+            if (this._view.options?.readOnly) return;
+            this.emitter.emit('focus', e);
+        });
+        this._view.contentDom.addEventListener('blur', e => {
+            if (this._view.options?.readOnly) return;
+            this.emitter.emit('blur', e);
+        });
     }
 
     private buildBaseOperation(type: IModelContentChangeEvent['type'] = 'insert') {

packages/semi-ui/jsonViewer/_story/jsonViewer.stories.jsx

@@ -82,6 +82,12 @@ export const DefaultJsonViewer = () => {
         console.log(value, 'value');
     };
 
+	const onFocusHandler = (e) => {
+		console.log('focus', e);
+	};
+	const onBlurHandler = (e) => {
+		console.log('blur', e);
+	};
     const [autoWrap, setAutoWrap] = useState(true);
     const [lineHeight, setLineHeight] = useState(20);
     const jsonviewerRef = useRef(null);
@@ -94,8 +100,10 @@ export const DefaultJsonViewer = () => {
                 value={baseStr}
                 width={700}
                 height={400}
-                options={{ lineHeight: lineHeight, autoWrap: autoWrap, formatOptions: { tabSize: 4 } }}
+                options={{ lineHeight: lineHeight, autoWrap: autoWrap, formatOptions: { tabSize: 4 } ,autoFocus: true}}
                 onChange={onChangeHandler}
+                onFocus={onFocusHandler}
+                onBlur={onBlurHandler}
                 ref={jsonviewerRef}
             />
         </>

packages/semi-ui/jsonViewer/index.tsx

@@ -37,7 +37,9 @@ export interface JsonViewerProps extends BaseProps {
     style?: React.CSSProperties;
     onChange?: (value: string) => void;
     renderTooltip?: (value: string, el: HTMLElement) => HTMLElement;
-    options?: JsonViewerOptions
+    options?: JsonViewerOptions;
+    onFocus?: (e: Event) => void;
+    onBlur?: (e: Event) => void
 }
 
 export interface JsonViewerState {
@@ -59,7 +61,8 @@ class JsonViewerCom extends BaseComponent<JsonViewerProps, JsonViewerState> {
         value: '',
         options: {
             readOnly: false,
-            autoWrap: true
+            autoWrap: true,
+            autoFocus: false
         }
     };
 
@@ -126,6 +129,12 @@ class JsonViewerCom extends BaseComponent<JsonViewerProps, JsonViewerState> {
                     }
                 );
             },
+            notifyFocus: (e) => {
+                this.props.onFocus?.(e);
+            },
+            notifyBlur: (e) => {
+                this.props.onBlur?.(e);
+            },
             showSearchBar: () => {
                 this.setState({ showSearchBar: !this.state.showSearchBar });
                 this.setState({ searchOptions: {