Merge pull request #2112 from vagostep/feature/2111/emit-editor-index-onfocus

#2111 Adding to onFocus event for Split editor, the index of the editor focused

Author: securingsincity

docs/Split.md

@@ -67,7 +67,7 @@ render(
 | onPaste                   |              | Function         | Triggered by editor `paste` event, and passes text as argument                                                                                                                                              |
 | onSelectionChange         |              | Function         | triggered by editor `selectionChange` event, and passes a [Selection](https://ace.c9.io/#nav=api&api=selection) as it's first argument and the event as the second                                          |
 | onCursorChange            |              | Function         | triggered by editor `changeCursor` event, and passes a [Selection](https://ace.c9.io/#nav=api&api=selection) as it's first argument and the event as the second                                             |
-| onFocus                   |              | Function         | triggered by editor `focus` event                                                                                                                                                                           |
+| onFocus                   |              | Function         | triggered by editor `focus` event, and passes the index of the edifor focused as it's first argument and the event as the second                                                                                                                                                                           |
 | onBlur                    |              | Function         | triggered by editor `blur` event                                                                                                                                                                            |
 | onInput                   |              | Function         | triggered by editor `input` event                                                                                                                                                                           |
 | onScroll                  |              | Function         | triggered by editor `scroll` event                                                                                                                                                                          |

example/split.js

@@ -60,6 +60,9 @@ class App extends Component {
       value: newValue
     });
   }
+  onFocus(event, index) {
+    console.log(`Editor ${index} has been focused. Event emitted: `, event);
+  }
 
   onSelectionChange(newValue, event) {
     console.log("select-change", newValue);
@@ -337,6 +340,7 @@ class App extends Component {
             splits={this.state.splits}
             theme={this.state.theme}
             name="blah2"
+            onFocus={this.onFocus}
             onLoad={this.onLoad}
             debounceChangePeriod={1000}
             onChange={this.onChange}

package.json

@@ -50,8 +50,8 @@
     "node-forge": "1.3.1",
     "prettier": "^3.2.5",
     "pretty-quick": "^4.0.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "react-test-renderer": "^19.0.0",
     "rimraf": "6.0.1",
     "ts-loader": "^9.5.1",

src/split.tsx

@@ -64,7 +64,7 @@ export interface ISplitEditorProps {
   onSelection?: (selectedText: string, event?: any) => void;
   onCopy?: (value: string) => void;
   onPaste?: (value: string) => void;
-  onFocus?: (value: Event) => void;
+  onFocus?: (value: Event, index: number) => void;
   onBlur?: (value: Event) => void;
   onScroll?: (editor: IEditorProps) => void;
   editorProps?: IEditorProps;
@@ -257,7 +257,7 @@ export default class SplitComponent extends React.Component<ISplitEditorProps> {
       editor.renderer.setShowGutter(showGutter);
       editor.getSession().setUseWrapMode(wrapEnabled);
       editor.setShowPrintMargin(showPrintMargin);
-      editor.on("focus", this.onFocus);
+      editor.on("focus", event => this.onFocus(event, index));
       editor.on("blur", this.onBlur);
       editor.on("input" as any, this.onInput);
       editor.on("copy", this.onCopy as any);
@@ -459,9 +459,9 @@ export default class SplitComponent extends React.Component<ISplitEditorProps> {
       this.props.onCursorChange(value, event);
     }
   }
-  public onFocus(event: any) {
+  public onFocus(event: any, index: number) {
     if (this.props.onFocus) {
-      this.props.onFocus(event);
+      this.props.onFocus(event, index);
     }
   }
 

tests/src/split.spec.tsx

@@ -309,7 +309,7 @@ describe("Split Component", () => {
       expect(onPasteCallback).toBeCalledWith(expectText);
     });
 
-    it.skip("should call the onFocus method callback", () => {
+    it("should call the onFocus method callback", () => {
       const onFocusCallback = jest.fn();
       const wrapper = mount(
         <SplitEditor