keyUp/keyDown event dispatch and textarea style support

README.md

@@ -78,6 +78,8 @@ React.render(<Demo />, container);
 | onChange | Trigger when value changed |(text: string) => void | - |
 | onSelect | Trigger when user select the option | (option: OptionProps, prefix: string) => void | - |
 | onSearch | Trigger when prefix hit | (text: string, prefix: string) => void | - |
+| onKeyDown | Trigger when textarea keyDown before measuring detect | (event: React.KeyboardEvent<HTMLTextAreaElement>, payload?: { measuring: boolean }) => void; | - |
+| onKeyUp | Trigger when textarea keyUp before measuring detect | (event: React.KeyboardEvent<HTMLTextAreaElement>, payload?: { measuring: boolean }) => void; | - |
 | onFocus | Trigger when mentions get focus | React.FocusEventHandler<HTMLTextAreaElement> | - |
 | onBlur | Trigger when mentions lose focus | React.FocusEventHandler<HTMLTextAreaElement> | - |
 

src/Mentions.tsx

@@ -24,6 +24,15 @@ type BaseTextareaAttrs = Omit<
 
 export type Placement = 'top' | 'bottom';
 
+export interface MentionKeyBoardEventPayload {
+  measuring: MentionsState['measuring'];
+}
+
+export type MentionKeyBoardEventHandler = (
+  event: React.KeyboardEvent<HTMLTextAreaElement>,
+  payload?: MentionKeyBoardEventPayload,
+) => void;
+
 export interface MentionsProps extends BaseTextareaAttrs {
   autoFocus?: boolean;
   className?: string;
@@ -41,6 +50,8 @@ export interface MentionsProps extends BaseTextareaAttrs {
   onChange?: (text: string) => void;
   onSelect?: (option: OptionProps, prefix: string) => void;
   onSearch?: (text: string, prefix: string) => void;
+  onKeyDown?: MentionKeyBoardEventHandler;
+  onKeyUp?: MentionKeyBoardEventHandler;
   onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
   onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
 }
@@ -121,6 +132,11 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
   public onKeyDown: React.KeyboardEventHandler<HTMLTextAreaElement> = event => {
     const { which } = event;
     const { activeIndex, measuring } = this.state;
+    const { onKeyDown } = this.props;
+
+    if (onKeyDown) {
+      onKeyDown(event, { measuring });
+    }
 
     // Skip if not measuring
     if (!measuring) {
@@ -162,14 +178,18 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
   public onKeyUp: React.KeyboardEventHandler<HTMLTextAreaElement> = event => {
     const { key, which } = event;
     const { measureText: prevMeasureText, measuring } = this.state;
-    const { prefix = '', onSearch, validateSearch } = this.props;
+    const { prefix = '', onSearch, validateSearch, onKeyUp } = this.props;
     const target = event.target as HTMLTextAreaElement;
     const selectionStartText = getBeforeSelectionText(target);
     const { location: measureIndex, prefix: measurePrefix } = getLastMeasureIndex(
       selectionStartText,
       prefix,
     );
 
+    if (onKeyUp) {
+      onKeyUp(event, { measuring });
+    }
+
     // Skip if match the white key list
     if ([KeyCode.ESC, KeyCode.UP, KeyCode.DOWN, KeyCode.ENTER].indexOf(which) !== -1) {
       return;