easy-richtextarea 4.0.200 → 4.0.202

package/src/richTextarea.js

@@ -5,65 +5,105 @@ import { Element, document, eventTypes } from "easy";
 import Selection from "./selection"
 import customEventMixins from "./mixins/customEvent";
 
-import { BLUR_CUSTOM_EVENT_TYPE, FOCUS_CUSTOM_EVENT_TYPE, SCROLL_CUSTOM_EVENT_TYPE, CHANGE_CUSTOM_EVENT_TYPE } from "./customEventTypes";
+import { BLUR_CUSTOM_EVENT_TYPE,
+         FOCUS_CUSTOM_EVENT_TYPE,
+         SCROLL_CUSTOM_EVENT_TYPE,
+         CHANGE_CUSTOM_EVENT_TYPE,
+         ACTIVATE_CUSTOM_EVENT_TYPE,
+         DEACTIVATE_CUSTOM_EVENT_TYPE } from "./customEventTypes";
 
-const { BLUR_EVENT_TYPE,
-        FOCUS_EVENT_TYPE,
-        INPUT_EVENT_TYPE,
-        SCROLL_EVENT_TYPE,
-        SELECTIONCHANGE_EVENT_TYPE } = eventTypes;
+const { BLUR_EVENT_TYPE, FOCUS_EVENT_TYPE, INPUT_EVENT_TYPE, SCROLL_EVENT_TYPE } = eventTypes;
 
 export default class RichTextarea extends Element {
   blurHandler = (event, element) => {
+    const active = this.isActive();
+
+    if (!active) {
+      return;
+    }
+
     const customEventType = BLUR_CUSTOM_EVENT_TYPE,
-          selectionChanged = true;
+          forced = true;
 
-    this.customHandler(customEventType, event, element, selectionChanged);
+    this.customHandler(customEventType, event, element, forced);
   }
 
   focusHandler = (event, element) => {
     defer(() => {
+      const active = this.isActive();
+
+      if (!active) {
+        this.addClass("active");
+
+        const customEventType = ACTIVATE_CUSTOM_EVENT_TYPE,
+              event = null,
+              element = this,
+              forced = true;
+
+        this.customHandler(customEventType, event, element, forced);
+      }
+
       const customEventType = FOCUS_CUSTOM_EVENT_TYPE,
-            selectionChanged = true;
+            forced = true;
 
-      this.customHandler(customEventType, event, element, selectionChanged);
+      this.customHandler(customEventType, event, element, forced);
     });
   }
 
   inputHandler = (event, element) => {
-    const customEventType = CHANGE_CUSTOM_EVENT_TYPE,
-          selectionChanged = this.hasSelectionChanged();
+    const active = this.isActive();
 
-    this.customHandler(customEventType, event, element, selectionChanged);
+    if (!active) {
+      return;
+    }
+
+    const customEventType = CHANGE_CUSTOM_EVENT_TYPE;
+
+    this.customHandler(customEventType, event, element);
   }
 
   scrollHandler = (event, element) => {
-    const customEventType = SCROLL_CUSTOM_EVENT_TYPE;
+    const active = this.isActive();
+
+    if (!active) {
+      return;
+    }
+
+    const customEventType = SCROLL_CUSTOM_EVENT_TYPE,
+          forced = true;
 
-    this.callCustomHandlers(customEventType, event, element);
+    this.customHandler(customEventType, event, element, forced);
   }
 
-  selectChangeHandler = (event, element) => {
+  selectionChangeHandler = (event, element) => {
+    const active = this.isActive();
+
+    if (!active) {
+      return;
+    }
+
     const { currentTarget } = event,
           { activeElement } = currentTarget,
           domElement = this.getDOMElement();
 
-    if (activeElement === domElement) {
-      element = this; ///
+    if (activeElement !== domElement) {
+      return;
+    }
 
-      const customEventType = CHANGE_CUSTOM_EVENT_TYPE,
-            selectionChanged = this.hasSelectionChanged();
+    element = this; ///
 
-      this.customHandler(customEventType, event, element, selectionChanged);
-    }
+    const customEventType = CHANGE_CUSTOM_EVENT_TYPE;
+
+    this.customHandler(customEventType, event, element);
   }
 
-  customHandler = (customEventType, event, element, selectionChanged) => {
+  customHandler = (customEventType, event, element, forced = false) => {
     const content = this.getContent(),
           selection = this.getSelection(),
-          contentChanged = this.hasContentChanged();
+          contentChanged = this.hasContentChanged(),
+          selectionChanged = this.hasSelectionChanged();
 
-    if (contentChanged || selectionChanged) {
+    if (forced || contentChanged || selectionChanged) {
       this.callCustomHandlers(customEventType, event, element);
     }
 
@@ -161,31 +201,30 @@ export default class RichTextarea extends Element {
   }
 
   activate() {
-    this.onEvent(BLUR_EVENT_TYPE, this.blurHandler);
-
-    this.onEvent(FOCUS_EVENT_TYPE, this.focusHandler);
-
-    this.onEvent(INPUT_EVENT_TYPE, this.inputHandler);
-
-    this.onEvent(SCROLL_EVENT_TYPE, this.scrollHandler);
+    const active = this.isActive();
 
-    document.onEvent(SELECTIONCHANGE_EVENT_TYPE, this.selectChangeHandler);
+    if (active) {
+      return;
+    }
 
-    this.addClass("active");
+    this.focus();
   }
 
   deactivate() {
-    this.offEvent(BLUR_EVENT_TYPE, this.blurHandler);
-
-    this.offEvent(FOCUS_EVENT_TYPE, this.focusHandler);
+    const active = this.isActive();
 
-    this.offEvent(INPUT_EVENT_TYPE, this.inputHandler);
+    if (!active) {
+      return;
+    }
 
-    this.offEvent(SCROLL_EVENT_TYPE, this.scrollHandler);
+    this.removeClass("active");
 
-    document.offEvent(SELECTIONCHANGE_EVENT_TYPE, this.selectChangeHandler);
+    const customEventType = DEACTIVATE_CUSTOM_EVENT_TYPE,
+          event = null,
+          element = this,
+          forced = true;
 
-    this.removeClass("active");
+    this.customHandler(customEventType, event, element, forced);
   }
 
   getPreviousContent() {
@@ -212,6 +251,16 @@ export default class RichTextarea extends Element {
     });
   }
 
+  setInitialState() {
+    const previousContent = null,
+          previousSelection = null;
+
+    this.setState({
+      previousContent,
+      previousSelection
+    });
+  }
+
   didMount() {
     const content = this.getContent(),
           selection = this.getSelection(),
@@ -221,24 +270,28 @@ export default class RichTextarea extends Element {
     this.setPreviousContent(previousContent);
 
     this.setPreviousSelection(previousSelection);
+
+    this.onEvent(BLUR_EVENT_TYPE, this.blurHandler);
+
+    this.onEvent(FOCUS_EVENT_TYPE, this.focusHandler);
+
+    this.onEvent(INPUT_EVENT_TYPE, this.inputHandler);
+
+    this.onEvent(SCROLL_EVENT_TYPE, this.scrollHandler);
+
+    document.onSelectionChange(this.selectionChangeHandler, this);
   }
 
   willUnmount() {
-    const active = this.isActive();
+    this.offEvent(BLUR_EVENT_TYPE, this.blurHandler);
 
-    if (active) {
-      this.deactivate();
-    }
-  }
+    this.offEvent(FOCUS_EVENT_TYPE, this.focusHandler);
 
-  setInitialState() {
-    const previousContent = null,
-          previousSelection = null;
+    this.offEvent(INPUT_EVENT_TYPE, this.inputHandler);
 
-    this.setState({
-      previousContent,
-      previousSelection
-    });
+    this.offEvent(SCROLL_EVENT_TYPE, this.scrollHandler);
+
+    document.offSelectionChange(this.selectionChangeHandler, this);
   }
 
   initialise() {

package/lib/example/richTextarea.js

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
-        return _default;
-    }
-});
-var _easywithstyle = /*#__PURE__*/ _interop_require_default(require("easy-with-style"));
-var _index = require("../index");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n\n  width: 48rem;\n  border: solid 1px black;\n  resize: none;\n  height: 32rem;\n  padding: 0.25rem;\n  font-family: monospace;\n\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-var _default = (0, _easywithstyle.default)(_index.RichTextarea)(_templateObject());
-
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9leGFtcGxlL3JpY2hUZXh0YXJlYS5qcyJdLCJzb3VyY2VzQ29udGVudCI6WyJcInVzZSBzdHJpY3RcIjtcblxuaW1wb3J0IHdpdGhTdHlsZSBmcm9tIFwiZWFzeS13aXRoLXN0eWxlXCI7XG5cbmltcG9ydCB7IFJpY2hUZXh0YXJlYSB9IGZyb20gXCIuLi9pbmRleFwiOyAgLy8vXG5cbmV4cG9ydCBkZWZhdWx0IHdpdGhTdHlsZShSaWNoVGV4dGFyZWEpYFxuXG4gIHdpZHRoOiA0OHJlbTtcbiAgYm9yZGVyOiBzb2xpZCAxcHggYmxhY2s7XG4gIHJlc2l6ZTogbm9uZTtcbiAgaGVpZ2h0OiAzMnJlbTtcbiAgcGFkZGluZzogMC4yNXJlbTtcbiAgZm9udC1mYW1pbHk6IG1vbm9zcGFjZTtcblxuYDtcbiJdLCJuYW1lcyI6WyJ3aXRoU3R5bGUiLCJSaWNoVGV4dGFyZWEiXSwibWFwcGluZ3MiOiJBQUFBOzs7OytCQU1BOzs7ZUFBQTs7O29FQUpzQjtxQkFFTzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztJQUU3QixXQUFlQSxJQUFBQSxzQkFBUyxFQUFDQyxtQkFBWSJ9