Skip to content

Commit da67cbb

Browse files
jaywcjlovejaywcjlove
committed
fix: Fixed issue that cannot be trigger events. #19 
1 parent 06a3f4e commit da67cbb

File tree

3 files changed

+155
-3
lines changed

3 files changed

+155
-3
lines changed

‎README.md

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,120 @@ const code = 'const a = 0;';
8888
- `value` value of the auto created model in the editor.
8989
- `options` refer to [codemirror options](https://codemirror.net/doc/manual.html#config).
9090

91+
## Props Events
92+
93+
```tsx
94+
import React from 'react';
95+
import CodeMirror from 'codemirror';
96+
export type DOMEvent = 'onMouseDown' | 'onDblClick' | 'onTouchStart' | 'onContextMenu' | 'onKeyDown' | 'onKeyPress'
97+
| 'onKeyUp' | 'onCut' | 'onCopy' | 'onPaste' | 'onDragStart' | 'onDragEnter' | 'onDragOver' | 'onDragLeave' | 'onDrop';
98+
99+
export type IDOMEvent = {
100+
[P in DOMEvent]?: (instance: CodeMirror.Editor, event: Event) => void;
101+
}
102+
103+
export type Editor = CodeMirror.Editor;
104+
export interface IReactCodemirror extends IDOMEvent {
105+
/**
106+
* Fired whenever a change occurs to the document.
107+
* changeObj has a similar type as the object passed to the editor's "change" event,
108+
* but it never has a next property, because document change events are not batched (whereas editor change events are).
109+
*/
110+
onChange?: (instance: CodeMirror.Editor, change: CodeMirror.EditorChangeLinkedList[]) => void;
111+
/**
112+
* Like the "change" event, but batched per operation, passing an
113+
* array containing all the changes that happened in the operation.
114+
* This event is fired after the operation finished, and display
115+
* changes it makes will trigger a new operation.
116+
* */
117+
onChanges?: (instance: CodeMirror.Editor, change: CodeMirror.EditorChangeLinkedList[]) => void;
118+
/**
119+
* This event is fired before a change is applied, and its handler may choose to modify or cancel the change.
120+
* The changeObj never has a next property, since this is fired for each individual change, and not batched per operation.
121+
* Note: you may not do anything from a "beforeChange" handler that would cause changes to the document or its visualization.
122+
* Doing so will, since this handler is called directly from the bowels of the CodeMirror implementation,
123+
* probably cause the editor to become corrupted.
124+
*/
125+
onBeforeChange?: (instance: CodeMirror.Editor, change: CodeMirror.EditorChangeCancellable) => void;
126+
/**
127+
* Will be fired when the cursor or selection moves, or any change is made to the editor content.
128+
*/
129+
onCursorActivity?: (instance: CodeMirror.Editor) => void;
130+
/**
131+
* This event is fired before the selection is moved. Its handler may modify the resulting selection head and anchor.
132+
* Handlers for this event have the same restriction as "beforeChange" handlers they should not do anything to directly update the state of the editor.
133+
*/
134+
onBeforeSelectionChange?: (instance: CodeMirror.Editor, selection: { head: Position; anchor: Position; }) => void;
135+
/**
136+
* Fires whenever the view port of the editor changes (due to scrolling, editing, or any other factor).
137+
* The from and to arguments give the new start and end of the viewport.
138+
*/
139+
onViewportChange?: (instance: CodeMirror.Editor, from: number, to: number) => void;
140+
/** Fires when the editor gutter (the line-number area) is clicked. Will pass the editor instance as first argument,
141+
* the (zero-based) number of the line that was clicked as second argument, the CSS class of the gutter that was clicked as third argument,
142+
* and the raw mousedown event object as fourth argument.
143+
*/
144+
onGutterClick?: (instance: CodeMirror.Editor, line: number, gutter: string, clickEvent: Event) => void;
145+
146+
/** Fires whenever the editor is focused. */
147+
onFocus?: (instance: CodeMirror.Editor) => void;
148+
149+
/** Fires whenever the editor is unfocused. */
150+
onBlur?: (instance: CodeMirror.Editor) => void;
151+
152+
/** Fires when the editor is scrolled. */
153+
onScroll?: (instance: CodeMirror.Editor) => void;
154+
155+
/** Will be fired whenever CodeMirror updates its DOM display. */
156+
onUpdate?: (instance: CodeMirror.Editor) => void;
157+
158+
/** Fired whenever a line is (re-)rendered to the DOM. Fired right after the DOM element is built, before it is added to the document.
159+
* The handler may mess with the style of the resulting element, or add event handlers, but should not try to change the state of the editor.
160+
*/
161+
onRenderLine?: (instance: CodeMirror.Editor, line: CodeMirror.LineHandle, element: HTMLElement) => void;
162+
/**
163+
* Fires when the overwrite flag is flipped.
164+
* */
165+
onOverwriteToggle?: (instance: CodeMirror.Editor, overwrite: boolean) => void;
166+
/**
167+
* Fired whenever the cursor or selection in this document changes.
168+
* */
169+
onCursorActivity?(instance: CodeMirror.Editor): void;
170+
/**
171+
* Will be fired when the line object is deleted. A line object is associated with the start of the line.
172+
* Mostly useful when you need to find out when your gutter markers on a given line are removed.
173+
* */
174+
onDelete?(): void;
175+
/**
176+
* Fired when the cursor enters the marked range.
177+
* From this event handler, the editor state may be inspected but not modified,
178+
* with the exception that the range on which the event fires may be cleared.
179+
* */
180+
onBeforeCursorEnter?(): void;
181+
/**
182+
* Fired when the cursor enters the marked range.
183+
* From this event handler, the editor state may be inspected but not modified,
184+
* with the exception that the range on which the event fires may be cleared.
185+
* */
186+
onClear?(): void;
187+
/**
188+
* Fired when the last part of the marker is removed from the document by editing operations.
189+
* */
190+
onHide?(): void;
191+
/**
192+
* Fired when, after the marker was removed by editing, a undo operation brought the marker back.
193+
* */
194+
onUnhide?(): void;
195+
/**
196+
* Fired whenever the editor re-adds the widget to the DOM.
197+
* This will happen once right after the widget is added (if it is scrolled into view),
198+
* and then again whenever it is scrolled out of view and back in again, or when changes to the editor options
199+
* or the line the widget is on require the widget to be redrawn.
200+
* */
201+
onRedraw?(): void;
202+
}
203+
```
204+
91205
## Options
92206

93207
[codemirror options](https://codemirror.net/doc/manual.html#config)

‎src/CodeMirror.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,8 @@ export default class ReactCodeMirror extends Component {
7979

8080
const eventDict = {};
8181
eventHandle.forEach((ele) => {
82-
eventDict[ele] = ele.slice(2).toLowerCase();
82+
const name = ele.slice(2);
83+
eventDict[ele] = name.replace(name[0],name[0].toLowerCase());
8384
});
8485

8586
return eventDict;

‎typings/index.d.ts

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react';
22
import CodeMirror from 'codemirror';
3-
import { string } from 'prop-types';
43

54
export type DOMEvent = 'onMouseDown' | 'onDblClick' | 'onTouchStart' | 'onContextMenu' | 'onKeyDown' | 'onKeyPress'
65
| 'onKeyUp' | 'onCut' | 'onCopy' | 'onPaste' | 'onDragStart' | 'onDragEnter' | 'onDragOver' | 'onDragLeave' | 'onDrop';
@@ -85,8 +84,46 @@ export interface IReactCodemirror extends IDOMEvent {
8584
* The handler may mess with the style of the resulting element, or add event handlers, but should not try to change the state of the editor.
8685
*/
8786
onRenderLine?: (instance: CodeMirror.Editor, line: CodeMirror.LineHandle, element: HTMLElement) => void;
88-
/** Fires when the overwrite flag is flipped. */
87+
/**
88+
* Fires when the overwrite flag is flipped.
89+
* */
8990
onOverwriteToggle?: (instance: CodeMirror.Editor, overwrite: boolean) => void;
91+
/**
92+
* Fired whenever the cursor or selection in this document changes.
93+
* */
94+
onCursorActivity?(instance: CodeMirror.Editor): void;
95+
/**
96+
* Will be fired when the line object is deleted. A line object is associated with the start of the line.
97+
* Mostly useful when you need to find out when your gutter markers on a given line are removed.
98+
* */
99+
onDelete?(): void;
100+
/**
101+
* Fired when the cursor enters the marked range.
102+
* From this event handler, the editor state may be inspected but not modified,
103+
* with the exception that the range on which the event fires may be cleared.
104+
* */
105+
onBeforeCursorEnter?(): void;
106+
/**
107+
* Fired when the cursor enters the marked range.
108+
* From this event handler, the editor state may be inspected but not modified,
109+
* with the exception that the range on which the event fires may be cleared.
110+
* */
111+
onClear?(): void;
112+
/**
113+
* Fired when the last part of the marker is removed from the document by editing operations.
114+
* */
115+
onHide?(): void;
116+
/**
117+
* Fired when, after the marker was removed by editing, a undo operation brought the marker back.
118+
* */
119+
onUnhide?(): void;
120+
/**
121+
* Fired whenever the editor re-adds the widget to the DOM.
122+
* This will happen once right after the widget is added (if it is scrolled into view),
123+
* and then again whenever it is scrolled out of view and back in again, or when changes to the editor options
124+
* or the line the widget is on require the widget to be redrawn.
125+
* */
126+
onRedraw?(): void;
90127
}
91128
export default class ReactCodemirror extends React.Component<IReactCodemirror> {
92129
editor: Editor;

0 commit comments

Comments
 (0)