easy-richtextarea 4.0.25 → 4.0.27

package/src/richTextarea.js

@@ -4,6 +4,7 @@ import { Element, document } from "easy";
 
 import Selection from "./selection"
 import UndoBuffer from "./undoBuffer";
+import eventMixins from "./mixins/event";
 import InsertOperation from "./operation/insert";
 import DeleteOperation from "./operation/delete";
 import transformContent from "./transform/content";
@@ -54,90 +55,86 @@ export default class RichTextarea extends Element {
     this.readOnly = readOnly;
   }
 
-  intermediateHandler = (event, element, undoable = true, eventType = CHANGE_EVENT_TYPE, selectionChanged = this.hasSelectionChanged()) => {
-    if (this.readOnly) {
-      const previousContent = this.getPreviousContent(),
-            content = previousContent;  ///
+  cutHandler = (event, element) => {
+    const selection = this.getSelection(),
+          selectionEmpty = selection.isEmpty();
 
-      this.setContent(content);
+    if (selectionEmpty) {
+      return;
     }
 
-    const content = this.getContent(),
-          selection = this.getSelection(),
-          contentChanged = this.hasContentChanged(),
-          changed = (contentChanged || selectionChanged);
-
-    if (changed) {
-      this.callHandlers(eventType, event, element);
-    }
+    const selectedContent = this.getSelectedContent();
 
-    if (undoable) {
-      if (contentChanged) {
-        const previousContent = this.getPreviousContent(),
-              operations = generateOperations(previousContent, content);
+    navigator.clipboard.writeText(selectedContent);
 
-        this.undoBuffer.addOperations(operations);
-      }
-    }
+    const content = this.getContent(),
+          deleteOperation = DeleteOperation.fromContentAndSelection(content, selection),
+          operation = deleteOperation;  ///
 
-    const previousContent = content,  ///
-          previousSelection = selection;  ///
+    this.applyOperation(operation);
 
-    this.setPreviousContent(previousContent);
+    this.intermediateHandler(event, element);
 
-    this.setPreviousSelection(previousSelection);
+    event.preventDefault();
   }
 
-  selectChangeHandler = (event, element) => {
-    if (this.focused) {
-      element = this; ///
+  copyHandler = (event, element) => {
+    const selection = this.getSelection(),
+          selectionEmpty = selection.isEmpty();
 
-      this.intermediateHandler(event, element);
+    if (selectionEmpty) {
+      return;
     }
-  }
 
-  contextmenuHandler = (event, element) => {
+    const selectedContent = this.getSelectedContent();
+
+    navigator.clipboard.writeText(selectedContent);
+
     event.preventDefault();
   }
 
-  keyDownHandler = (event, element) => {
-    const { ctrlKey, metaKey } = event;
+  pasteHandler = (event, element) => {
+    const { clipboardData } = event,
+          textData = clipboardData.getData(TEXT);
 
-    if (ctrlKey || metaKey) {
-      const { keyCode } = event;
+    if (textData === EMPTY_STRING) {
+      return;
+    }
 
-      switch (keyCode) {
-        case F_KEY_CODE: {
-          this.find(event, element);
+    const selection = this.getSelection(),
+          selectionEmpty = selection.isEmpty();
 
-          event.preventDefault();
+    if (!selectionEmpty) {
+      const content = this.getContent(),
+            deleteOperation = DeleteOperation.fromContentAndSelection(content, selection),
+            operation = deleteOperation;
 
-          return;
-        }
+      this.applyOperation(operation);
+    }
 
-        case Z_KEY_CODE: {
-          const { shiftKey } = event;
+    const content = textData, ///
+          insertOperation = InsertOperation.fromContentAndSelection(content, selection),
+          operation = insertOperation;  ///
 
-          shiftKey ?
-            this.redo(event, element) :
-              this.undo(event, element);
+    this.applyOperation(operation);
 
-          event.preventDefault();
+    this.intermediateHandler(event, element);
 
-          return;
-        }
-      }
-    }
+    event.preventDefault();
+  }
 
-    defer(() => {
-      this.intermediateHandler(event, element);
-    });
+  inputHandler = (event, element) => {
+    this.intermediateHandler(event, element);
   }
 
-  scrollHandler = (event, element) => {
-    const eventType = SCROLL_EVENT_TYPE;
+  blurHandler = (event, element) => {
+    this.focused = false;
 
-    this.callHandlers(eventType, event, element);
+    const undoable = true,
+          eventType = BLUR_EVENT_TYPE,
+          selectionChanged = true;
+
+    this.intermediateHandler(event, element, undoable, eventType, selectionChanged);
   }
 
   focusHandler = (event, element) => {
@@ -152,86 +149,111 @@ export default class RichTextarea extends Element {
     });
   }
 
-  blurHandler = (event, element) => {
-    this.focused = false;
-
-    const undoable = true,
-          eventType = BLUR_EVENT_TYPE,
-          selectionChanged = true;
+  scrollHandler = (event, element) => {
+    const eventType = SCROLL_EVENT_TYPE;
 
-    this.intermediateHandler(event, element, undoable, eventType, selectionChanged);
+    this.callHandlers(eventType, event, element);
   }
 
-  inputHandler = (event, element) => {
-    this.intermediateHandler(event, element);
-  }
+  keyDownHandler = (event, element) => {
+    let preventDefault = false;
 
-  pasteHandler = (event, element) => {
-    const { clipboardData } = event,
-          textData = clipboardData.getData(TEXT);
+    const { keyCode } = event;
 
-    if (textData === EMPTY_STRING) {
-      return;
-    }
+    switch (keyCode) {
+      case Z_KEY_CODE:
+        preventDefault = this.zKeyDown(event, element);
 
-    const selection = this.getSelection(),
-          selectionEmpty = selection.isEmpty();
+        break;
 
-    if (!selectionEmpty) {
-      const content = this.getContent(),
-            deleteOperation = DeleteOperation.fromContentAndSelection(content, selection),
-            operation = deleteOperation;
+      case F_KEY_CODE:
+        preventDefault = this.fKeyDown(event, element);
 
-      this.applyOperation(operation);
+        break;
     }
 
-    const content = textData, ///
-          insertOperation = InsertOperation.fromContentAndSelection(content, selection),
-          operation = insertOperation;  ///
+    if (preventDefault) {
+      event.preventDefault();
 
-    this.applyOperation(operation);
+      return;
+    }
 
-    this.intermediateHandler(event, element);
+    defer(() => {
+      this.intermediateHandler(event, element);
+    });
+  }
 
+  contextmenuHandler = (event, element) => {
     event.preventDefault();
   }
 
-  copyHandler = (event, element) => {
-    const selection = this.getSelection(),
-          selectionEmpty = selection.isEmpty();
+  selectChangeHandler = (event, element) => {
+    if (this.focused) {
+      element = this; ///
 
-    if (selectionEmpty) {
-      return;
+      this.intermediateHandler(event, element);
     }
+  }
 
-    const selectedContent = this.getSelectedContent();
+  intermediateHandler = (event, element, undoable = true, eventType = CHANGE_EVENT_TYPE, selectionChanged = this.hasSelectionChanged()) => {
+    if (this.readOnly) {
+      const previousContent = this.getPreviousContent(),
+            content = previousContent;  ///
 
-    navigator.clipboard.writeText(selectedContent);
+      this.setContent(content);
+    }
 
-    event.preventDefault();
-  }
+    const content = this.getContent(),
+          selection = this.getSelection(),
+          contentChanged = this.hasContentChanged(),
+          changed = (contentChanged || selectionChanged);
 
-  cutHandler = (event, element) => {
-    const selection = this.getSelection(),
-          selectionEmpty = selection.isEmpty();
+    if (changed) {
+      this.callHandlers(eventType, event, element);
+    }
 
-    if (selectionEmpty) {
-      return;
+    if (undoable) {
+      if (contentChanged) {
+        const previousContent = this.getPreviousContent(),
+              operations = generateOperations(previousContent, content);
+
+        this.undoBuffer.addOperations(operations);
+      }
     }
 
-    const selectedContent = this.getSelectedContent();
+    const previousContent = content,  ///
+          previousSelection = selection;  ///
 
-    navigator.clipboard.writeText(selectedContent);
+    this.setPreviousContent(previousContent);
 
-    const content = this.getContent(),
-          deleteOperation = DeleteOperation.fromContentAndSelection(content, selection),
-          operation = deleteOperation;  ///
+    this.setPreviousSelection(previousSelection);
+  }
 
-    this.applyOperation(operation);
+  callHandlers(eventType, ...remainingArguments) {
+    const eventListeners = this.findEventListeners(eventType);
 
-    this.intermediateHandler(event, element);
+    eventListeners.forEach((eventListener) => {
+      let { element } = eventListener;
 
-    event.preventDefault();
+      const { handler } = eventListener,
+            handlerElement = element; ///
+
+      element = this; ///
+
+      if ( (handler !== this.cutHandler)
+        && (handler !== this.copyHandler)
+        && (handler !== this.pasteHandler)
+        && (handler !== this.inputHandler)
+        && (handler !== this.blurHandler)
+        && (handler !== this.focusHandler)
+        && (handler !== this.scrollHandler)
+        && (handler !== this.keyDownHandler)
+        && (handler !== this.contextmenuHandler)
+        && (handler !== this.selectChangeHandler) ) {
+
+        handler.call(handlerElement, ...remainingArguments, element);
+      }
+    });
   }
 
   isActive() {
@@ -316,42 +338,49 @@ export default class RichTextarea extends Element {
     }
   }
 
-  find(event, element) {
-    const eventType = FIND_EVENT_TYPE;
+  fKeyDown(event, element) {
+    let preventDefault = false;
 
-    this.callHandlers(eventType, event, element);
-  }
+    const { ctrlKey, metaKey } = event;
 
-  undo(event, element) {
-    const undoOperation = this.undoBuffer.undo();
+    if (ctrlKey || metaKey) {
+      const eventType = FIND_EVENT_TYPE;
 
-    if (undoOperation !== null) {
-      const operation = undoOperation;  ///
+      this.callHandlers(eventType, event, element);
 
-      this.revert(event, element, operation);
+      preventDefault = true;
     }
+
+    return preventDefault;
   }
 
-  redo(event, element) {
-    const redoOperation = this.undoBuffer.redo();
+  zKeyDown(event, element) {
+    let preventDefault = false;
 
-    if (redoOperation !== null) {
-      const operation = redoOperation;  ///
+    const { ctrlKey, metaKey, shiftKey } = event;
 
-      this.revert(event, element, operation);
-    }
-  }
+    if (ctrlKey || metaKey) {
+      const operation = shiftKey ?
+                          this.undoBuffer.redo() :
+                            this.undoBuffer.undo();
 
-  revert(event, element, operation) {
-    const undoable = false,
-          selection = Selection.fromOperation(operation),
-          setPreviousSelection = false;
+      if (operation !== null) {
+        const undoable = false,
+              eventType = CHANGE_EVENT_TYPE,
+              selection = Selection.fromOperation(operation),
+              setPreviousSelection = false;
 
-    this.applyOperation(operation);
+        this.applyOperation(operation);
 
-    this.setSelection(selection, setPreviousSelection);
+        this.setSelection(selection, setPreviousSelection);
+
+        this.intermediateHandler(event, element, undoable, eventType);
+      }
+
+      preventDefault = true;
+    }
 
-    this.intermediateHandler(event, element, undoable);
+    return preventDefault;
   }
 
   transform(operations) {
@@ -382,23 +411,6 @@ export default class RichTextarea extends Element {
     this.intermediateHandler(event, element, undoable, eventType);
   }
 
-  callHandlers(eventType, ...remainingArguments) {
-    const eventListeners = this.findEventListeners(eventType);
-
-    eventListeners.forEach((eventListener) => {
-      let { element } = eventListener;
-
-      const { handler } = eventListener,
-              handlerElement = element; ///
-
-      element = this; ///
-
-      if ((handler !== this.blurHandler) && (handler !== this.focusHandler) && (handler !== this.scrollHandler)) {
-        handler.call(handlerElement, ...remainingArguments, element);
-      }
-    });
-  }
-
   applyOperation(operation) {
     let content = this.getContent(),
         selection = this.getSelection();
@@ -419,101 +431,51 @@ export default class RichTextarea extends Element {
   }
 
   activate() {
-    this.on(KEYDOWN_EVENT_TYPE, this.keyDownHandler, this);
-
-    this.on(INPUT_EVENT_TYPE, this.inputHandler, this);
-
-    this.on(SCROLL_EVENT_TYPE, this.scrollHandler, this);
-
-    this.on(FOCUS_EVENT_TYPE, this.focusHandler, this);
-
-    this.on(BLUR_EVENT_TYPE, this.blurHandler, this);
-
-    this.addClass("active");
-  }
-
-  deactivate() {
-    this.off(KEYDOWN_EVENT_TYPE, this.keyDownHandler, this);
-
-    this.off(INPUT_EVENT_TYPE, this.inputHandler, this);
-
-    this.off(SCROLL_EVENT_TYPE, this.scrollHandler, this);
-
-    this.off(FOCUS_EVENT_TYPE, this.focusHandler, this);
+    this.on(CUT_EVENT_TYPE, this.cutHandler);
 
-    this.off(BLUR_EVENT_TYPE, this.blurHandler, this);
+    this.on(COPY_EVENT_TYPE, this.copyHandler);
 
-    this.removeClass("active");
-  }
+    this.on(PASTE_EVENT_TYPE, this.pasteHandler);
 
-  onFind(findHandler, element) {
-    const eventType = FIND_EVENT_TYPE,
-          handler = findHandler;  ///
+    this.on(INPUT_EVENT_TYPE, this.inputHandler);
 
-    this.addEventListener(eventType, handler, element);
-  }
+    this.on(BLUR_EVENT_TYPE, this.blurHandler);
 
-  offFind(findHandler, element) {
-    const eventType = FIND_EVENT_TYPE,
-          handler = findHandler;  ///
+    this.on(FOCUS_EVENT_TYPE, this.focusHandler);
 
-    this.removeEventListener(eventType, handler, element);
-  }
+    this.on(SCROLL_EVENT_TYPE, this.scrollHandler);
 
-  onBlur(blurHandler, element) {
-    const eventType = BLUR_EVENT_TYPE,
-          handler = blurHandler;  ///
+    this.on(KEYDOWN_EVENT_TYPE, this.keyDownHandler);
 
-    this.addEventListener(eventType, handler, element);
-  }
+    this.on(CONTEXTMENU_EVENT_TYPE, this.contextmenuHandler);
 
-  offBlur(blurHandler, element) {
-    const eventType = BLUR_EVENT_TYPE,
-          handler = blurHandler;  ///
+    document.on(SELECTIONCHANGE_EVENT_TYPE, this.selectChangeHandler);
 
-    this.removeEventListener(eventType, handler, element);
+    this.addClass("active");
   }
 
-  onFocus(blurHandler, element) {
-    const eventType = FOCUS_EVENT_TYPE,
-          handler = blurHandler;  ///
-
-    this.addEventListener(eventType, handler, element);
-  }
+  deactivate() {
+    this.off(CUT_EVENT_TYPE, this.cutHandler);
 
-  offFocus(blurHandler, element) {
-    const eventType = FOCUS_EVENT_TYPE,
-          handler = blurHandler;  ///
+    this.off(COPY_EVENT_TYPE, this.copyHandler);
 
-    this.removeEventListener(eventType, handler, element);
-  }
+    this.off(PASTE_EVENT_TYPE, this.pasteHandler);
 
-  onScroll(scrollHandler, element) {
-    const eventType = SCROLL_EVENT_TYPE,
-          handler = scrollHandler;  ///
+    this.off(INPUT_EVENT_TYPE, this.inputHandler);
 
-    this.addEventListener(eventType, handler, element);
-  }
+    this.off(BLUR_EVENT_TYPE, this.blurHandler);
 
-  offScroll(scrollHandler, element) {
-    const eventType = SCROLL_EVENT_TYPE,
-          handler = scrollHandler;  ///
+    this.off(FOCUS_EVENT_TYPE, this.focusHandler);
 
-    this.removeEventListener(eventType, handler, element);
-  }
+    this.off(SCROLL_EVENT_TYPE, this.scrollHandler);
 
-  onChange(changeHandler, element) {
-    const eventType = CHANGE_EVENT_TYPE,
-          handler = changeHandler;  ///
+    this.off(KEYDOWN_EVENT_TYPE, this.keyDownHandler);
 
-    this.addEventListener(eventType, handler, element);
-  }
+    this.off(CONTEXTMENU_EVENT_TYPE, this.contextmenuHandler);
 
-  offChange(changeHandler, element) {
-    const eventType = CHANGE_EVENT_TYPE,
-          handler = changeHandler;  ///
+    document.off(SELECTIONCHANGE_EVENT_TYPE, this.selectChangeHandler);
 
-    this.removeEventListener(eventType, handler, element);
+    this.removeClass("active");
   }
 
   getPreviousContent() {
@@ -541,12 +503,12 @@ export default class RichTextarea extends Element {
   }
 
   didMount() {
-    const { onFind, onBlur, onFocus, onChange, onScroll } = this.properties,
+    const { onFind, onBlur, onFocus, onScroll, onChange } = this.properties,
           findHandler = onFind, ///
           blurHandler = onBlur, ///
           focusHandler = onFocus, ///
-          changeHandler = onChange, ///
-          scrollHandler = onScroll; ///
+          scrollHandler = onScroll, ///
+          changeHandler = onChange; ///
 
     this.updateInitialState();
 
@@ -556,28 +518,18 @@ export default class RichTextarea extends Element {
 
     focusHandler && this.onFocus(focusHandler, this);
 
-    changeHandler && this.onChange(changeHandler, this);
-
     scrollHandler && this.onScroll(scrollHandler, this);
 
-    this.on(CUT_EVENT_TYPE, this.cutHandler);
-
-    this.on(COPY_EVENT_TYPE, this.copyHandler);
-
-    this.on(PASTE_EVENT_TYPE, this.pasteHandler);
-
-    this.on(CONTEXTMENU_EVENT_TYPE, this.contextmenuHandler);
-
-    document.on(SELECTIONCHANGE_EVENT_TYPE, this.selectChangeHandler);
+    changeHandler && this.onChange(changeHandler, this);
   }
 
   willUnmount() {
-    const { onFind, onBlur, onFocus, onChange, onScroll } = this.properties,
+    const { onFind, onBlur, onFocus, onScroll, onChange } = this.properties,
             findHandler = onFind, ///
             blurHandler = onBlur, ///
             focusHandler = onFocus, ///
-            changeHandler = onChange, ///
-            scrollHandler = onScroll; ///
+            scrollHandler = onScroll, ///
+            changeHandler = onChange; ///
 
     findHandler && this.offFind(findHandler, this);
 
@@ -585,19 +537,9 @@ export default class RichTextarea extends Element {
 
     focusHandler && this.offFocus(focusHandler, this);
 
-    changeHandler && this.offChange(changeHandler, this);
-
     scrollHandler && this.offScroll(scrollHandler, this);
 
-    this.off(CUT_EVENT_TYPE, this.cutHandler);
-
-    this.off(COPY_EVENT_TYPE, this.copyHandler);
-
-    this.off(PASTE_EVENT_TYPE, this.pasteHandler);
-
-    this.off(CONTEXTMENU_EVENT_TYPE, this.contextmenuHandler);
-
-    document.off(SELECTIONCHANGE_EVENT_TYPE, this.selectChangeHandler);
+    changeHandler && this.offChange(changeHandler, this);
 
     const active = this.isActive();
 
@@ -637,8 +579,8 @@ export default class RichTextarea extends Element {
     "onFind",
     "onBlur",
     "onFocus",
-    "onChange",
     "onScroll",
+    "onChange"
   ];
 
   static defaultProperties = {
@@ -655,6 +597,8 @@ export default class RichTextarea extends Element {
   }
 }
 
+Object.assign(RichTextarea.prototype, eventMixins);
+
 function defer(func) {
   setTimeout(func, 0);
 }

package/src/selection.js

@@ -74,6 +74,22 @@ export default class Selection {
     return transformedSelection;
   }
 
+  compareTo(selection) {
+    let result = 0;
+
+    const startPosition = selection.getStartPosition();
+
+    if (this.startPosition > startPosition) {
+      result = +1;
+    }
+
+    if (this.startPosition < startPosition) {
+      result = -1;
+    }
+
+    return result;
+  }
+
   shifted(offset) {
     const startPosition = this.startPosition + offset,
           endPosition = this.endPosition + offset,