easy-richtextarea 4.0.20 → 4.0.21

package/src/eventTypes.js

@@ -0,0 +1,17 @@
+"use strict";
+
+import { eventTypes } from "easy";
+
+export const { CUT_EVENT_TYPE,
+               COPY_EVENT_TYPE,
+               BLUR_EVENT_TYPE,
+               PASTE_EVENT_TYPE,
+               INPUT_EVENT_TYPE,
+               FOCUS_EVENT_TYPE,
+               CHANGE_EVENT_TYPE,
+               SCROLL_EVENT_TYPE,
+               KEYDOWN_EVENT_TYPE,
+               CONTEXTMENU_EVENT_TYPE,
+               SELECTIONCHANGE_EVENT_TYPE } = eventTypes;
+
+export const FIND_EVENT_TYPE = "find";

package/src/example/view.js

@@ -5,7 +5,7 @@ import RichTextarea from "./richTextarea";
 const content = "",
       richTextarea =
 
-        <RichTextarea onChange={changeHandler} onScroll={scrollHandler} onFocus={focusHandler} onBlur={blurHandler} />
+        <RichTextarea onFind={findHandler} onBlur={blurHandler} onFocus={focusHandler} onChange={changeHandler} onScroll={scrollHandler} />
 
       ;
 
@@ -23,6 +23,18 @@ const View = (properties) =>
 
 export default View;
 
+function findHandler(event, element) {
+  console.log("find")
+}
+
+function blurHandler(event, element) {
+  console.log("blur")
+}
+
+function focusHandler(event, element) {
+  console.log("focus")
+}
+
 function changeHandler(event, element) {
   const contentChanged = richTextarea.hasContentChanged(),
         selectionChanged = richTextarea.hasSelectionChanged();
@@ -36,11 +48,3 @@ function scrollHandler(event, element) {
 
   console.log(scrollTop, scrollLeft)
 }
-
-function focusHandler(event, element) {
-  console.log("focus")
-}
-
-function blurHandler(event, element) {
-  console.log("blur")
-}

package/src/keyCodes.js

@@ -1,3 +1,4 @@
 "use strict";
 
+export const F_KEY_CODE = 70;
 export const Z_KEY_CODE = 90;

package/src/richTextarea.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import { Element, document, eventTypes } from "easy";
+import { Element, document } from "easy";
 
 import Selection from "./selection"
 import UndoBuffer from "./undoBuffer";
@@ -10,20 +10,20 @@ import transformContent from "./transform/content";
 import transformSelection from "./transform/selection";
 import generateOperations from "./operations/generate";
 
-import { Z_KEY_CODE } from "./keyCodes";
 import { TEXT, EMPTY_STRING } from "./constants";
-
-const { CUT_EVENT_TYPE,
-        COPY_EVENT_TYPE,
-        BLUR_EVENT_TYPE,
-        PASTE_EVENT_TYPE,
-        INPUT_EVENT_TYPE,
-        FOCUS_EVENT_TYPE,
-        CHANGE_EVENT_TYPE,
-        SCROLL_EVENT_TYPE,
-        KEYDOWN_EVENT_TYPE,
-        CONTEXTMENU_EVENT_TYPE,
-        SELECTIONCHANGE_EVENT_TYPE } = eventTypes;
+import { F_KEY_CODE, Z_KEY_CODE } from "./keyCodes";
+import { CUT_EVENT_TYPE,
+         COPY_EVENT_TYPE,
+         FIND_EVENT_TYPE,
+         BLUR_EVENT_TYPE,
+         PASTE_EVENT_TYPE,
+         INPUT_EVENT_TYPE,
+         FOCUS_EVENT_TYPE,
+         CHANGE_EVENT_TYPE,
+         SCROLL_EVENT_TYPE,
+         KEYDOWN_EVENT_TYPE,
+         CONTEXTMENU_EVENT_TYPE,
+         SELECTIONCHANGE_EVENT_TYPE } from "./eventTypes";
 
 export default class RichTextarea extends Element {
   constructor(selector, focused, readOnly, undoBuffer, previousContent, previousSelection) {
@@ -132,6 +132,18 @@ export default class RichTextarea extends Element {
       }
     }
 
+    if (keyCode === F_KEY_CODE) {
+      const { ctrlKey, metaKey } = event;
+
+      if (ctrlKey || metaKey) {
+        this.find(event, element);
+
+        event.preventDefault();
+
+        return;
+      }
+    }
+
     defer(() => {
       this.intermediateHandler(event, element);
     });
@@ -313,6 +325,12 @@ export default class RichTextarea extends Element {
     }
   }
 
+  find(event, element) {
+    const eventType = FIND_EVENT_TYPE;
+
+    this.callHandlers(eventType, event, element);
+  }
+
   undo(event, element) {
     const undoOperation = this.undoBuffer.undo();
 
@@ -437,6 +455,20 @@ export default class RichTextarea extends Element {
     this.removeClass("active");
   }
 
+  onFind(findHandler, element) {
+    const eventType = FIND_EVENT_TYPE,
+          handler = findHandler;  ///
+
+    this.addEventListener(eventType, handler, element);
+  }
+
+  offFind(findHandler, element) {
+    const eventType = FIND_EVENT_TYPE,
+          handler = findHandler;  ///
+
+    this.removeEventListener(eventType, handler, element);
+  }
+
   onBlur(blurHandler, element) {
     const eventType = BLUR_EVENT_TYPE,
           handler = blurHandler;  ///
@@ -494,11 +526,12 @@ export default class RichTextarea extends Element {
   }
 
   didMount() {
-    const { onChange, onScroll, onFocus, onBlur } = this.properties,
-          changeHandler = onChange, ///
-          scrollHandler = onScroll, ///
+    const { onFind, onBlur, onFocus, onChange, onScroll } = this.properties,
+          findHandler = onFind, ///
+          blurHandler = onBlur, ///
           focusHandler = onFocus, ///
-          blurHandler = onBlur; ///
+          changeHandler = onChange, ///
+          scrollHandler = onScroll; ///
 
     const content = this.getContent(),
           selection = this.getSelection();
@@ -507,13 +540,15 @@ export default class RichTextarea extends Element {
 
     this.previousSelection = selection;  ///
 
-    changeHandler && this.onChange(changeHandler, this);
+    findHandler && this.onFind(findHandler, this);
 
-    scrollHandler && this.onScroll(scrollHandler, this);
+    blurHandler && this.onBlur(blurHandler, this);
 
     focusHandler && this.onFocus(focusHandler, this);
 
-    blurHandler && this.onBlur(blurHandler, this);
+    changeHandler && this.onChange(changeHandler, this);
+
+    scrollHandler && this.onScroll(scrollHandler, this);
 
     this.on(CUT_EVENT_TYPE, this.cutHandler);
 
@@ -527,19 +562,22 @@ export default class RichTextarea extends Element {
   }
 
   willUnmount() {
-    const { onChange, onScroll, onFocus, onBlur } = this.properties,
-          changeHandler = onChange, ///
-          scrollHandler = onScroll, ///
-          focusHandler = onFocus, ///
-          blurHandler = onBlur; ///
+    const { onFind, onBlur, onFocus, onChange, onScroll } = this.properties,
+            findHandler = onFind, ///
+            blurHandler = onBlur, ///
+            focusHandler = onFocus, ///
+            changeHandler = onChange, ///
+            scrollHandler = onScroll; ///
 
-    changeHandler && this.offChange(changeHandler, this);
+    findHandler && this.offFind(findHandler, this);
 
-    scrollHandler && this.offScroll(scrollHandler, this);
+    blurHandler && this.offBlur(blurHandler, this);
 
     focusHandler && this.offFocus(focusHandler, this);
 
-    blurHandler && this.offBlur(blurHandler, this);
+    changeHandler && this.offChange(changeHandler, this);
+
+    scrollHandler && this.offScroll(scrollHandler, this);
 
     this.off(CUT_EVENT_TYPE, this.cutHandler);
 
@@ -561,10 +599,11 @@ export default class RichTextarea extends Element {
   static tagName = "textarea";
 
   static ignoredProperties = [
+    "onFind",
+    "onBlur",
+    "onFocus",
     "onChange",
     "onScroll",
-    "onFocus",
-    "onBlur"
   ];
 
   static defaultProperties = {