easy-richtextarea 4.0.1 → 4.0.4

package/src/richTextarea.js

@@ -1,86 +1,136 @@
 "use strict";
 
-import { window, Element, eventTypes } from "easy";
+import { Element, document, eventTypes } from "easy";
 
 import Selection from "./selection"
+import UndoBuffer from "./undoBuffer";
+import InsertOperation from "./operation/insert";
+import DeleteOperation from "./operation/delete";
+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;
 
-const { BLUR_EVENT_TYPE,
-         INPUT_EVENT_TYPE,
-         FOCUS_EVENT_TYPE,
-         CHANGE_EVENT_TYPE,
-         SCROLL_EVENT_TYPE,
-         KEYDOWN_EVENT_TYPE,
-         MOUSEUP_EVENT_TYPE,
-         MOUSEDOWN_EVENT_TYPE,
-         MOUSEMOVE_EVENT_TYPE,
-         CONTEXTMENU_EVENT_TYPE } = eventTypes;
+export default class RichTextarea extends Element {
+  constructor(selector, focused, readOnly, undoBuffer, previousContent, previousSelection) {
+    super(selector);
 
-const defer = (func) => setTimeout(func, 0);
+    this.focused = focused;
+    this.readOnly = readOnly;
+    this.undoBuffer = undoBuffer;
+    this.previousContent = previousContent;
+    this.previousSelection = previousSelection;
+  }
 
-export default class RichTextarea extends Element {
-  intermediateHandler = (event, element, eventType, forced) => {
-    const readOnly = this.isReadOnly();
+  isFocused() {
+    return this.focused;
+  }
 
-    if (readOnly) {
-      const previousContent = this.getPreviousContent(),
-            content = previousContent;  ///
+  isReadOnly() {
+    return this.readOnly;
+  }
 
-      this.setContent(content);
-    }
+  getUndoBuffer() {
+    return this.undoBuffer;
+  }
 
-    const changed = this.hasChanged();
+  getPreviousContent() {
+    return this.prevousContent;
+  }
 
-    if (changed || forced) {
-      this.callHandlers(eventType, event, element);
+  getPreviousSelection() {
+    return this.previousSelection;
+  }
+
+  setFocused(focused) {
+    this.focused = focused;
+  }
+
+  setReadOnly(readOnly) {
+    this.readOnly = readOnly;
+  }
+
+  setPreviousContent(previousContent) {
+    this.previousContent = previousContent;
+  }
+
+  setPreviousSelection(previousSelection) {
+    this.previousSelection = previousSelection;
+  }
+
+  intermediateHandler = (event, element, undoable = true, eventType = CHANGE_EVENT_TYPE, selectionChanged = this.hasSelectionChanged()) => {
+    if (this.readOnly) {
+      const content = this.previousContent;  ///
+
+      this.setContent(content);
     }
 
     const content = this.getContent(),
           selection = this.getSelection(),
-          previousContent = content,  ///
-          previousSelection = selection;  ///
+          contentChanged = this.hasContentChanged(),
+          changed = (contentChanged || selectionChanged);
 
-    this.setPreviousContent(previousContent);
-    this.setPreviousSelection(previousSelection);
-  }
+    if (changed) {
+      this.callHandlers(eventType, event, element);
+    }
 
-  mouseDownHandler = (event, element) => {
-    const forced = false,
-          mouseDown = true,
-          eventType = CHANGE_EVENT_TYPE;
+    if (undoable) {
+      if (contentChanged) {
+        const operations = generateOperations(this.previousContent, content);
 
-    this.setMouseDown(mouseDown);
+        this.undoBuffer.addOperations(operations);
+      }
+    }
 
-    defer(() => this.intermediateHandler(event, element, eventType, forced));
-  }
+    this.previousContent = content;  ///
 
-  mouseMoveHandler = (event, element) => {
-    const forced = false,
-          mouseDown = this.isMouseDown(),
-          eventTYpe = CHANGE_EVENT_TYPE;
+    this.previousSelection = selection;  ///
+  }
 
-    if (mouseDown) {
-      this.intermediateHandler(event, element, eventTYpe, forced);
+  selectChangeHandler = (event, element) => {
+    if (this.focused) {
+      this.intermediateHandler(event, element);
     }
   }
 
-  mouseUpHandler = (event, element) => {
-    const mouseDown = false;
-
-    this.setMouseDown(mouseDown);
-  };
+  contextmenuHandler = (event, element) => {
+    event.preventDefault();
+  }
 
   keyDownHandler = (event, element) => {
-    const forced = false,
-          eventType = CHANGE_EVENT_TYPE;
+    const { keyCode } = event;
 
-    defer(() => this.intermediateHandler(event, element, eventType, forced));
-  }
+    if (keyCode === Z_KEY_CODE) {
+      const { ctrlKey, metaKey } = event;
 
-  inputHandler = (event, element) => {
-    const forced = false,
-          eventType = CHANGE_EVENT_TYPE;
+      if (ctrlKey || metaKey) {
+        const { shiftKey } = event;
+
+        shiftKey ?
+          this.redo(event, element) :
+            this.undo(event, element);
+
+        event.preventDefault();
+
+        return;
+      }
+    }
 
-    this.intermediateHandler(event, element, eventType, forced);
+    defer(() => {
+      this.intermediateHandler(event, element);
+    });
   }
 
   scrollHandler = (event, element) => {
@@ -90,17 +140,97 @@ export default class RichTextarea extends Element {
   }
 
   focusHandler = (event, element) => {
-    const forced = true,
-          eventType = FOCUS_EVENT_TYPE;
+    this.focused = true;
+
+    defer(() => {
+      const undoable = true,
+            eventType = FOCUS_EVENT_TYPE,
+            selectionChanged = true;
 
-    defer(() => this.intermediateHandler(event, element, eventType, forced));
+      this.intermediateHandler(event, element, undoable, eventType, selectionChanged);
+    });
   }
 
   blurHandler = (event, element) => {
-    const forced = true,
-          eventType = BLUR_EVENT_TYPE;
+    this.focused = false;
+
+    const undoable = true,
+          eventType = BLUR_EVENT_TYPE,
+          selectionChanged = true;
+
+    this.intermediateHandler(event, element, undoable, eventType, selectionChanged);
+  }
+
+  inputHandler = (event, element) => {
+    this.intermediateHandler(event, element);
+  }
+
+  pasteHandler = (event, element) => {
+    const { clipboardData } = event,
+          textData = clipboardData.getData(TEXT);
+
+    if (textData === EMPTY_STRING) {
+      return;
+    }
+
+    const selection = this.getSelection(),
+          selectionEmpty = selection.isEmpty();
+
+    if (!selectionEmpty) {
+      const content = this.getContent(),
+            deleteOperation = DeleteOperation.fromContentAndSelection(content, selection),
+            operation = deleteOperation;
+
+      this.applyOperation(operation);
+    }
+
+    const content = textData, ///
+          insertOperation = InsertOperation.fromContentAndSelection(content, selection),
+          operation = insertOperation;  ///
 
-    this.intermediateHandler(event, element, eventType, forced);
+    this.applyOperation(operation);
+
+    this.intermediateHandler(event, element);
+
+    event.preventDefault();
+  }
+
+  copyHandler = (event, element) => {
+    const selection = this.getSelection(),
+          selectionEmpty = selection.isEmpty();
+
+    if (selectionEmpty) {
+      return;
+    }
+
+    const selectedContent = this.getSelectedContent();
+
+    navigator.clipboard.writeText(selectedContent);
+
+    event.preventDefault();
+  }
+
+  cutHandler = (event, element) => {
+    const selection = this.getSelection(),
+          selectionEmpty = selection.isEmpty();
+
+    if (selectionEmpty) {
+      return;
+    }
+
+    const selectedContent = this.getSelectedContent();
+
+    navigator.clipboard.writeText(selectedContent);
+
+    const content = this.getContent(),
+          deleteOperation = DeleteOperation.fromContentAndSelection(content, selection),
+          operation = deleteOperation;  ///
+
+    this.applyOperation(operation);
+
+    this.intermediateHandler(event, element);
+
+    event.preventDefault();
   }
 
   isActive() {
@@ -109,6 +239,30 @@ export default class RichTextarea extends Element {
     return active;
   }
 
+  undo(event, element) {
+    const operation = this.undoBuffer.undo();
+
+    if (operation !== null) {
+      const undoable = false;
+
+      this.applyOperation(operation);
+
+      this.intermediateHandler(event, element, undoable);
+    }
+  }
+
+  redo(event, element) {
+    const operation = this.undoBuffer.redo();
+
+    if (operation !== null) {
+      const undoable = false;
+
+      this.applyOperation(operation);
+
+      this.intermediateHandler(event, element, undoable);
+    }
+  }
+
   getContent() {
     const domElement = this.getDOMElement(),
           { value } = domElement,
@@ -124,71 +278,81 @@ export default class RichTextarea extends Element {
     return selection;
   }
 
-  setContent(content) {
+  getSelectedContent() {
+    const content = this.getContent(),
+          selection = this.getSelection(),
+          endPosition = selection.getEndPosition(),
+          startPosition = selection.getStartPosition(),
+          start = startPosition,  ///
+          end = endPosition,  ///
+          selectedContent = content.slice(start, end);
+
+    return selectedContent;
+  }
+
+  hasContentChanged() {
+    const content = this.getContent(),
+          contentPreviousContent = (content === this.previousContent),
+          contentChanged = !contentPreviousContent;
+
+    return contentChanged;
+  }
+
+  hasSelectionChanged() {
+    const selection = this.getSelection(),
+          selectionPreviousSelection = selection.isEqualTo(this.previousSelection),
+          selectionChanged = !selectionPreviousSelection; ///
+
+    return selectionChanged;
+  }
+
+  setContent(content, setPreviousContent = true) {
     const value = content,  ///
-          previousContent = content,  ///
           domElement = this.getDOMElement();
 
     Object.assign(domElement, {
       value
     });
 
-    this.setPreviousContent(previousContent);
+    if (setPreviousContent) {
+      this.previousContent = content;  ///
+    }
   }
 
-  setSelection(selection) {
+  setSelection(selection, setPreviousSelection = true) {
     const selectionStartPosition = selection.getStartPosition(),
           selectionEndPosition = selection.getEndPosition(),
           selectionStart = selectionStartPosition,  ///
           selectionEnd = selectionEndPosition,  ///
-          previousSelection = selection,  ///
           domElement = this.getDOMElement();
 
-    Object.assign(domElement, {
-      selectionStart,
-      selectionEnd
-    });
+    domElement.setSelectionRange(selectionStart, selectionEnd);
 
-    this.setPreviousSelection(previousSelection);
+    if (setPreviousSelection) {
+      this.previousSelection = selection;  ///
+    }
   }
 
-  hasChanged() {
-    const contentChanged = this.hasContentChanged(),
-          selectionChanged = this.hasSelectionChanged(),
-          changed = (contentChanged || selectionChanged);
+  applyOperation(operation) {
+    let content = this.getContent(),
+        selection = this.getSelection();
 
-    return changed;
-  }
+    const transformedContent = operation.transformContent(content),
+          transformedSelection = operation.transformSelection(selection);
 
-  hasContentChanged() {
-    const content = this.getContent(),
-          previousContent = this.getPreviousContent(),
-          contentDifferentToPreviousContent = (content !== previousContent),
-          contentChanged = contentDifferentToPreviousContent; ///
+    content = transformedContent; ///
 
-    return contentChanged;
-  }
+    selection = transformedSelection; ///
 
-  hasSelectionChanged() {
-    const selection = this.getSelection(),
-          previousSelection = this.getPreviousSelection(),
-          selectionDifferentToPreviousSelection = selection.isDifferentTo(previousSelection),
-          selectionChanged = selectionDifferentToPreviousSelection; ///
+    const setPreviousContent = false,
+          setPreviousSelection = false;
 
-    return selectionChanged;
+    this.setContent(content, setPreviousContent);
+
+    this.setSelection(selection, setPreviousSelection);
   }
 
   activate() {
-    const mouseDown = false;
-
-    this.setMouseDown(mouseDown);
-
-    window.on(`${BLUR_EVENT_TYPE} ${MOUSEUP_EVENT_TYPE} ${CONTEXTMENU_EVENT_TYPE}`, this.mouseUpHandler, this); ///
-
-    this.on(MOUSEDOWN_EVENT_TYPE, this.mouseDownHandler, this);
-
-    this.on(MOUSEMOVE_EVENT_TYPE, this.mouseMoveHandler, this);
-
     this.on(KEYDOWN_EVENT_TYPE, this.keyDownHandler, this);
 
     this.on(INPUT_EVENT_TYPE, this.inputHandler, this);
@@ -203,16 +367,6 @@ export default class RichTextarea extends Element {
   }
 
   deactivate() {
-    const mouseDown = false;
-
-    this.setMouseDown(mouseDown);
-
-    window.off(`${BLUR_EVENT_TYPE} ${MOUSEUP_EVENT_TYPE} ${CONTEXTMENU_EVENT_TYPE}`, this.mouseUpHandler, this); ///
-
-    this.off(MOUSEDOWN_EVENT_TYPE, this.mouseDownHandler, this);
-
-    this.off(MOUSEMOVE_EVENT_TYPE, this.mouseMoveHandler, this);
-
     this.off(KEYDOWN_EVENT_TYPE, this.keyDownHandler, this);
 
     this.off(INPUT_EVENT_TYPE, this.inputHandler, this);
@@ -286,8 +440,12 @@ export default class RichTextarea extends Element {
     const eventListeners = this.findEventListeners(eventType);
 
     eventListeners.forEach((eventListener) => {
-      const { handler, element: handlerElement } = eventListener,
-            element = this; ///
+      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);
@@ -295,88 +453,37 @@ export default class RichTextarea extends Element {
     });
   }
 
-  isReadOnly() {
-    const { readOnly } = this.getState();
-
-    return readOnly;
-  }
-
-  isMouseDown() {
-    const { mouseDown } = this.getState();
-
-    return mouseDown;
-  }
-
-  getPreviousContent() {
-    const { previousContent } = this.getState();
-
-    return previousContent;
-  }
-
-  getPreviousSelection() {
-    const { previousSelection } = this.getState();
+  didMount() {
+    const { onChange, onScroll, onFocus, onBlur } = this.properties,
+          changeHandler = onChange, ///
+          scrollHandler = onScroll, ///
+          focusHandler = onFocus, ///
+          blurHandler = onBlur; ///
 
-    return previousSelection;
-  }
+    const content = this.getContent(),
+          selection = this.getSelection();
 
-  setReadOnly(readOnly) {
-    this.updateState({
-      readOnly
-    });
-  }
+    this.previousContent = content;  ///
 
-  setMouseDown(mouseDown) {
-    this.updateState({
-      mouseDown
-    });
-  }
+    this.previousSelection = selection;  ///
 
-  setPreviousContent(previousContent) {
-    this.updateState({
-      previousContent
-    });
-  }
+    changeHandler && this.onChange(changeHandler, this);
 
-  setPreviousSelection(previousSelection) {
-    this.updateState({
-      previousSelection
-    });
-  }
+    scrollHandler && this.onScroll(scrollHandler, this);
 
-  setInitialState() {
-    const readOnly = false,
-          mouseDown = false,
-          previousContent = null,
-          previousSelection = null;
+    focusHandler && this.onFocus(focusHandler, this);
 
-    this.setState({
-      readOnly,
-      mouseDown,
-      previousContent,
-      previousSelection
-    });
-  }
+    blurHandler && this.onBlur(blurHandler, this);
 
-  didMount() {
-    const { onChange, onScroll, onFocus, onBlur } = this.properties,
-            changeHandler = onChange, ///
-            scrollHandler = onScroll, ///
-            focusHandler = onFocus, ///
-            blurHandler = onBlur; ///
+    this.on(CUT_EVENT_TYPE, this.cutHandler);
 
-    changeHandler && this.onChange(changeHandler, this);
-    scrollHandler && this.onScroll(scrollHandler, this);
-    focusHandler && this.onFocus(focusHandler, this);
-    blurHandler && this.onBlur(blurHandler, this);
+    this.on(COPY_EVENT_TYPE, this.copyHandler);
 
-    const content = this.getContent(),
-          selection = this.getSelection(),
-          previousContent = content,  ///
-          previousSelection = selection;  ///
+    this.on(PASTE_EVENT_TYPE, this.pasteHandler);
 
-    this.setPreviousSelection(previousSelection);
+    this.on(CONTEXTMENU_EVENT_TYPE, this.contextmenuHandler);
 
-    this.setPreviousContent(previousContent);
+    document.on(SELECTIONCHANGE_EVENT_TYPE, this.selectChangeHandler);
   }
 
   willUnmount() {
@@ -387,10 +494,23 @@ export default class RichTextarea extends Element {
           blurHandler = onBlur; ///
 
     changeHandler && this.offChange(changeHandler, this);
+
     scrollHandler && this.offScroll(scrollHandler, this);
+
     focusHandler && this.offFocus(focusHandler, this);
+
     blurHandler && this.offBlur(blurHandler, 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);
+
     const active = this.isActive();
 
     if (active) {
@@ -398,10 +518,6 @@ export default class RichTextarea extends Element {
     }
   }
 
-  initialise() {
-    this.setInitialState();
-  }
-
   static tagName = "textarea";
 
   static ignoredProperties = [
@@ -414,4 +530,19 @@ export default class RichTextarea extends Element {
   static defaultProperties = {
     className: "rich"
   };
+
+  static fromClass(Class, properties, ...remainingArguments) {
+    const focused = false,
+          readOnly = false,
+          undoBuffer = UndoBuffer.fromNothing(),
+          previousContent = null,
+          previousSelection = null,
+          richTextarea = Element.fromClass(Class, properties, focused, readOnly, undoBuffer, previousContent, previousSelection, ...remainingArguments);
+
+    return richTextarea;
+  }
+}
+
+function defer(func) {
+  setTimeout(func, 0);
 }