yapp 4.0.227 → 4.0.229

package/src/prettyPrinter.js

@@ -3,42 +3,54 @@
 import withStyle from "easy-with-style";  ///
 
 import { React, Element } from "easy";
+import { customEventTypes  } from "easy-richtextarea";
 
 import GutterDiv from "./div/gutter";
-import OverlayDiv from "./div/overlay";
+import PrettyDiv from "./div/pretty";
 import RichTextarea from "./richTextarea";
 
 import { getScrollbarThickness } from "./utilities/scrollbar";
 
+const { CHANGE_CUSTOM_EVENT_TYPE } = customEventTypes;
+
 class PrettyPrinter extends Element {
-  scrollHandler = (event, element) => {
+  customChangeHandler = (event, element) => {
+    const customEventType = CHANGE_CUSTOM_EVENT_TYPE; ///
+
+    this.callCustomHandlers(customEventType);
+  }
+
+  customScrollHandler = (event, element) => {
     const richTextarea = element, ///
           scrollTop = richTextarea.getScrollTop(),
           scrollLeft = richTextarea.getScrollLeft();
 
     this.scrollGutterDiv(scrollTop ,scrollLeft);
 
-    this.scrollOverlayDiv(scrollTop, scrollLeft);
+    this.scrollPrettyDiv(scrollTop, scrollLeft);
   }
 
   update(tokens) {
     this.updateGutterDiv(tokens);
-
-    this.updateOverlayDiv(tokens);
+    this.updatePrettyDiv(tokens);
   }
 
   childElements() {
-    const { editable, onChange, hiddenGutter, fancyScrollbars, hiddenScrollbars } = this.properties,
-          hidden = hiddenGutter,  ///
+    const { editable, hiddenGutter, fancyScrollbars, hiddenScrollbars } = this.properties,
+          scrollbarThickness = getScrollbarThickness(hiddenScrollbars, fancyScrollbars),
           readOnly = !editable,
-          changeHandler = onChange, ///
-          scrollbarThickness = getScrollbarThickness(hiddenScrollbars, fancyScrollbars);
+          hidden = hiddenGutter;  ///
 
     return ([
 
       <GutterDiv hidden={hidden} />,
-      <OverlayDiv scrollbarThickness={scrollbarThickness} />,
-      <RichTextarea onScroll={this.scrollHandler} onChange={changeHandler} fancyScrollbars={fancyScrollbars} hiddenScrollbars={hiddenScrollbars} readOnly={readOnly} />
+      <PrettyDiv scrollbarThickness={scrollbarThickness} />,
+      <RichTextarea readOnly={readOnly}
+                    fancyScrollbars={fancyScrollbars}
+                    hiddenScrollbars={hiddenScrollbars}
+                    onCustomChange={this.customChangeHandler}
+                    onCustomScroll={this.customScrollHandler}
+      />
 
     ]);
   }
@@ -57,8 +69,8 @@ class PrettyPrinter extends Element {
     this.assignContext([
       "updateGutterDiv",
       "scrollGutterDiv",
-      "updateOverlayDiv",
-      "scrollOverlayDiv"
+      "updatePrettyDiv",
+      "scrollPrettyDiv"
     ]);
   }
 
@@ -84,7 +96,7 @@ export default withStyle(PrettyPrinter)`
   display: grid;
   overflow: hidden;
   grid-template-rows: auto;
-  grid-template-areas: "gutter overlay-rich-textarea";
+  grid-template-areas: "gutter pretty-rich-textarea";
   grid-template-columns: min-content auto;  
 
   color: inherit;

package/src/richTextarea.js

@@ -39,13 +39,15 @@ export default withStyle(class extends RichTextarea {
     const getContent = this.getContent.bind(this),  ///
           activateRichTextarea = this.activate.bind(this),  ///
           getRichTextareaContent = this.getContent.bind(this),  ///
-          setRichTextareaContent = this.setContent.bind(this);  ///
+          setRichTextareaContent = this.setContent.bind(this),  ///
+          hasRichTextareaContentChanged = this.hasContentChanged.bind(this);  ///
 
     return ({
       getContent,
       activateRichTextarea,
       getRichTextareaContent,
-      setRichTextareaContent
+      setRichTextareaContent,
+      hasRichTextareaContentChanged
     });
   }
 
@@ -69,7 +71,7 @@ export default withStyle(class extends RichTextarea {
   tab-size: 2;
   overflow: scroll;
   position: relative;
-  grid-area: overlay-rich-textarea;
+  grid-area: pretty-rich-textarea;
   white-space: pre;
   overflow-wrap: normal;
   background-color: transparent;

package/src/yapp.js

@@ -9,6 +9,7 @@ import PrettyPrinter from "./prettyPrinter";
 
 import { getScrollbarThickness } from "./utilities/scrollbar";
 import { pluginFromLanguageAndPlugin } from "./utilities/plugin";
+import { CONTENT_CHANGE_CUSTOM_EVENT_TYPE } from "./customEventTypes";
 import { propertiesFromContentLanguagePluginAndOptions } from "./utilities/properties";
 import { lineCountFromContent, contentFromChildElements } from "./utilities/content";
 import { colour, caretColour, borderColour, backgroundColour } from "./scheme/colour";
@@ -32,6 +33,13 @@ class Yapp extends Element {
     return content;
   }
 
+  hasContentChanged() {
+    const richTextareaContentChanged = this.hasRichTextareaContentChanged(),
+          contentChanged = richTextareaContentChanged;  ///
+
+    return contentChanged;
+  }
+
   getInitialLineCount() {
     const content = this.getContent(),
           lineCount = lineCountFromContent(content),
@@ -40,6 +48,19 @@ class Yapp extends Element {
     return initialLineCount;
   }
 
+  customChangeHandler = (event, element) => {
+    const contentChanged = this.hasContentChanged();
+
+    if (contentChanged) {
+      const content = this.getContent(),
+            customEventType = CONTENT_CHANGE_CUSTOM_EVENT_TYPE;
+
+      this.update();
+
+      this.callCustomHandlers(customEventType, content);
+    }
+  }
+
   setLexer(lexer) { this.plugin.setLexer(lexer); }
 
   setParser(parser) { this.plugin.setParser(parser); }
@@ -52,24 +73,6 @@ class Yapp extends Element {
     this.removeClass("fira-code");
   }
 
-  changeHandler = (event, element) => {
-    const richTextarea = element, ///
-          contentChanged = richTextarea.hasContentChanged();
-
-    if (contentChanged) {
-      const { onContentChange = null } = this.properties,
-            contentChangeHandler = onContentChange;  ///
-
-      this.update();
-
-      if (contentChangeHandler) {
-        element = this; ///
-
-        contentChangeHandler(event, element);
-      }
-    }
-  }
-
   update() {
     const content = this.getContent();
 
@@ -111,11 +114,14 @@ class Yapp extends Element {
   }
 
   childElements() {
-    const { editable = DEFAULT_EDITABLE, hiddenGutter = DEFAULT_HIDDEN_GUTTER, hiddenScrollbars = DEFAULT_HIDDEN_SCROLLBARS, fancyScrollbars = DEFAULT_FANCY_SCROLLBARS } = this.properties;
+    const { editable = DEFAULT_EDITABLE,
+            hiddenGutter = DEFAULT_HIDDEN_GUTTER,
+            fancyScrollbars = DEFAULT_FANCY_SCROLLBARS,
+            hiddenScrollbars = DEFAULT_HIDDEN_SCROLLBARS } = this.properties;
 
     return (
 
-      <PrettyPrinter onChange={this.changeHandler} editable={editable} hiddenGutter={hiddenGutter} fancyScrollbars={fancyScrollbars} hiddenScrollbars={hiddenScrollbars} />
+      <PrettyPrinter onCustomChange={this.customChangeHandler} editable={editable} hiddenGutter={hiddenGutter} fancyScrollbars={fancyScrollbars} hiddenScrollbars={hiddenScrollbars} />
 
     );
   }
@@ -158,8 +164,7 @@ class Yapp extends Element {
     "autoHeight",
     "hiddenGutter",
     "noScrollbars",
-    "fancyScrollbars",
-    "onContentChange"
+    "fancyScrollbars"
   ];
 
   static fromContent(content, language, Plugin, options) {