yapp 4.0.12 → 4.0.18

package/src/highlights.js

@@ -6,6 +6,8 @@ import { Element } from "easy";
 
 import Syntax from "./syntax";
 
+import { MARGIN_RIGHT, MARGIN_BOTTOM } from "./constants";
+
 class Highlights extends Element {
   update(tokens) {
     this.updateSyntax(tokens);
@@ -15,6 +17,19 @@ class Highlights extends Element {
     this.scrollSyntax(scrollTop, scrollLeft);
   }
 
+  didMount() {
+    const { scrollbarThickness } = this.properties,
+          marginRight = `${scrollbarThickness}px`,
+          marginBottom = `${scrollbarThickness}px`;
+
+    this.style(MARGIN_RIGHT, marginRight);
+    this.style(MARGIN_BOTTOM, marginBottom);
+  }
+
+  willUnmount() {
+    ///
+  }
+
   childElements() {
     return (
 
@@ -44,6 +59,10 @@ class Highlights extends Element {
 
   static tagName = "div";
 
+  static ignoredProperties = [
+    "scrollbarThickness"
+  ];
+
   static defaultProperties = {
     className: "highlights"
   };
@@ -52,8 +71,8 @@ class Highlights extends Element {
 export default withStyle(Highlights)`
 
   z-index: 0;
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
   overflow: hidden;
   position: relative;
   grid-area: highlights-rich-textarea;

package/src/prettyPrinter.js

@@ -8,6 +8,8 @@ import Gutter from "./gutter";
 import Highlights from "./highlights";
 import RichTextarea from "./richTextarea";
 
+import { getScrollbarThickness } from "./utilities/scrollbarThickness";
+
 class PrettyPrinter extends Element {
   scrollHandler = (event, element) => {
     const richTextarea = element, ///
@@ -26,9 +28,10 @@ class PrettyPrinter extends Element {
   }
 
   childElements() {
-    const { onChange, hiddenGutter, fancyScrollbars, hiddenScrollbars, scrollbarThickness } = this.properties,
+    const { onChange, hiddenGutter, fancyScrollbars, hiddenScrollbars } = this.properties,
           hidden = hiddenGutter,  ///
-          changeHandler = onChange; ///
+          changeHandler = onChange, ///
+          scrollbarThickness = getScrollbarThickness(hiddenScrollbars, fancyScrollbars);
 
     return ([
 
@@ -69,8 +72,7 @@ class PrettyPrinter extends Element {
     "hiddenGutter",
     "hiddenGutter",
     "noScrollbars",
-    "fancyScrollbars",
-    "scrollbarThickness"
+    "fancyScrollbars"
   ];
 }
 

package/src/utilities/scrollbarThickness.js

@@ -31,10 +31,16 @@ const outerDivWidth = outerDiv.getWidth(),
 
 outerDiv.remove();
 
-export function getScrollbarThickness(fancyScrollbars) {
-  const scrollbarThickness = fancyScrollbars ?
-                               stripPixels(stylesScrollbarThickness) :
-                                 outerDivWidth - innerDivWidth; ///
+export function getScrollbarThickness(hiddenScrollbars, fancyScrollbars) {
+  let scrollbarThickness;
+
+  if (hiddenScrollbars) {
+    scrollbarThickness = 0;
+  } else {
+    scrollbarThickness = fancyScrollbars ?
+                           stripPixels(stylesScrollbarThickness) :  ///
+                             outerDivWidth - innerDivWidth; ///
+  }
 
   return scrollbarThickness;
 }

package/src/yapp.js

@@ -7,7 +7,6 @@ import { React, Element } from "easy";
 import styleMixins from "./mixins/style";
 import PrettyPrinter from "./prettyPrinter";
 
-import { getScrollbarThickness } from "./utilities/scrollbarThickness";
 import { pluginFromLanguageAndPlugin } from "./utilities/plugin";
 import { propertiesFromContentLanguagePluginAndOptions } from "./utilities/properties";
 import { lineCountFromContent, contentFromChildElements } from "./utilities/content";
@@ -21,24 +20,6 @@ class Yapp extends Element {
     this.plugin = plugin;
   }
 
-  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);
-      }
-    }
-  }
-
   getPlugin() {
     return this.plugin;
   }
@@ -58,23 +39,27 @@ class Yapp extends Element {
     return initialLineCount;
   }
 
-  getScrollbarThickness() {
-    let scrollbarThickness = 0;
+  setLexer(lexer) { this.plugin.setLexer(lexer); }
 
-    const { hiddenScrollbars = DEFAULT_HIDDEN_SCROLLBARS } = this.properties;
+  setParser(parser) { this.plugin.setParser(parser); }
 
-    if (!hiddenScrollbars) {
-      const { fancyScrollbars = DEFAULT_FANCY_SCROLLBARS } = this.properties;
+  changeHandler = (event, element) => {
+    const richTextarea = element, ///
+          contentChanged = richTextarea.hasContentChanged();
 
-      scrollbarThickness = getScrollbarThickness(fancyScrollbars);
-    }
+    if (contentChanged) {
+      const { onContentChange = null } = this.properties,
+            contentChangeHandler = onContentChange;  ///
 
-    return scrollbarThickness;
-  }
+      this.update();
 
-  setLexer(lexer) { this.plugin.setLexer(lexer); }
+      if (contentChangeHandler) {
+        element = this; ///
 
-  setParser(parser) { this.plugin.setParser(parser); }
+        contentChangeHandler(event, element);
+      }
+    }
+  }
 
   update() {
     const content = this.getContent();
@@ -116,16 +101,11 @@ class Yapp extends Element {
   }
 
   childElements() {
-    const { hiddenGutter = DEFAULT_HIDDEN_GUTTER, hiddenScrollbars = DEFAULT_HIDDEN_SCROLLBARS, fancyScrollbars = DEFAULT_FANCY_SCROLLBARS } = this.properties,
-          scrollbarThickness = this.getScrollbarThickness();
+    const { hiddenGutter = DEFAULT_HIDDEN_GUTTER, hiddenScrollbars = DEFAULT_HIDDEN_SCROLLBARS, fancyScrollbars = DEFAULT_FANCY_SCROLLBARS } = this.properties;
 
     return (
 
-      <PrettyPrinter onChange={this.changeHandler}
-                     hiddenGutter={hiddenGutter}
-                     fancyScrollbars={fancyScrollbars}
-                     hiddenScrollbars={hiddenScrollbars}
-                     scrollbarThickness={scrollbarThickness} />
+      <PrettyPrinter onChange={this.changeHandler} hiddenGutter={hiddenGutter} fancyScrollbars={fancyScrollbars} hiddenScrollbars={hiddenScrollbars} />
 
     );
   }
@@ -135,8 +115,6 @@ class Yapp extends Element {
           getContent = this.getContent.bind(this),
           updateYapp = this.update.bind(this),  ///
           setYappLexer = this.setLexer.bind(this),  ///
-          setYappWidth = this.setWidth.bind(this),  ///
-          setYappHeight = this.setHeight.bind(this),  ///
           setYappParser = this.setParser.bind(this);  ///
 
     return ({
@@ -144,8 +122,6 @@ class Yapp extends Element {
       getContent,
       updateYapp,
       setYappLexer,
-      setYappWidth,
-      setYappHeight,
       setYappParser
     });
   }