yapp 3.0.8 → 4.0.2

package/src/prettyPrinter.js

@@ -2,164 +2,46 @@
 
 import withStyle from "easy-with-style";  ///
 
-import { React, Bounds, Element } from "easy";
+import { React, Element } from "easy";
 
 import Gutter from "./gutter";
-import Syntax from "./syntax";
+import Highlights from "./highlights";
+import RichTextarea from "./richTextarea";
 
 class PrettyPrinter extends Element {
-  getWidth() {
-    const hidden = this.isHidden();
+  scrollHandler = (event, element) => {
+    const richTextarea = element, ///
+          scrollTop = richTextarea.getScrollTop(),
+          scrollLeft = richTextarea.getScrollLeft();
 
-    if (hidden) {
-      this.show();
-    }
-
-    const width = super.getWidth();
-
-    if (hidden) {
-      this.hide();
-    }
-
-    return width;
-  }
-
-  getHeight() {
-    const hidden = this.isHidden();
-
-    if (hidden) {
-      this.show();
-    }
-
-    const height = super.getHeight();
-
-    if (hidden) {
-      this.hide();
-    }
-
-    return height;
-  }
-
-  scroll(scrollTop, scrollLeft) {
     this.scrollGutter(scrollTop ,scrollLeft);
     this.scrollSyntax(scrollTop, scrollLeft);
   }
 
   update(tokens) {
-    let gutterWidth = this.getGutterWidth(),
-        previousGutterWidth = this.getPreviousGutterWidth();
-
     this.updateSyntax(tokens);
-
     this.updateGutter(tokens);
-
-    if (previousGutterWidth !== gutterWidth) {
-      previousGutterWidth = gutterWidth;  ///
-
-      this.setPreviousGutterWidth(previousGutterWidth);
-
-      this.resize();
-    } else {
-      gutterWidth = null;
-    }
-
-    return gutterWidth;
-  }
-
-  getInnerBounds(gutterWidth) {
-    let top = 0,
-        left = 0,
-        width = this.getWidth(),
-        height = this.getHeight();
-
-    left += gutterWidth;
-    width -= gutterWidth;
-
-    const bounds = Bounds.fromTopLeftWidthAndHeight(top, left, width, height),
-          innerBounds = bounds; ///
-
-    return innerBounds;
-  }
-
-  resize() {
-    const gutterWidth = this.getGutterWidth(),
-          innerBounds = this.getInnerBounds(gutterWidth),
-          syntaxBounds = innerBounds; ///
-
-    this.positionGutter();
-
-    this.setSyntaxBounds(syntaxBounds);
-
-    return gutterWidth;
-  }
-
-  setBounds(bounds) {
-    const top = bounds.getTop(),
-          left = bounds.getLeft(),
-          width = bounds.getWidth(),
-          height = bounds.getHeight();
-
-    this.position(top, left);
-    this.setWidth(width);
-    this.setHeight(height);
-  }
-
-  position(top, left) {
-    top = `${top}px`;
-    left = `${left}px`;
-
-    const css = {
-      top,
-      left
-    };
-
-    this.css(css);
-  }
-
-  getPreviousGutterWidth() {
-    const state = this.getState(),
-          { previousGutterWidth } = state;
-
-    return previousGutterWidth;
-  }
-
-  setPreviousGutterWidth(previousGutterWidth) {
-    this.updateState({
-      previousGutterWidth
-    });
-  }
-
-  setInitialState() {
-    const previousGutterWidth = 0;
-
-    this.setState({
-      previousGutterWidth
-    })
   }
 
   childElements() {
-    const { hiddenGutter, scrollbarThickness } = this.properties,
-          hidden = hiddenGutter;  ///
+    const { onChange, hiddenGutter, fancyScrollbars, hiddenScrollbars, scrollbarThickness } = this.properties,
+          hidden = hiddenGutter,  ///
+          changeHandler = onChange; ///
 
     return ([
 
       <Gutter hidden={hidden} />,
-      <Syntax scrollbarThickenss={scrollbarThickness} />,
+      <Highlights scrollbarThickness={scrollbarThickness} />,
+      <RichTextarea onScroll={this.scrollHandler} onChange={changeHandler} fancyScrollbars={fancyScrollbars} hiddenScrollbars={hiddenScrollbars} active />
 
     ]);
   }
   
   parentContext() {
     const context = this.getContext(),
-          resizePrettyPrinter = this.resize.bind(this), ///
           updatePrettyPrinter = this.update.bind(this), ///
-          scrollPrettyPrinter = this.scroll.bind(this), ///
-          setPrettyPrinterBounds = this.setBounds.bind(this), ///
           parentContext = Object.assign({}, context, {
-            resizePrettyPrinter,
-            updatePrettyPrinter,
-            scrollPrettyPrinter,
-            setPrettyPrinterBounds
+            updatePrettyPrinter
           });
     
     return parentContext;
@@ -175,8 +57,6 @@ class PrettyPrinter extends Element {
       "getGutterWidth",
       "setSyntaxBounds"
     ]);
-
-    this.setInitialState();
   }
 
   static tagName = "div";
@@ -186,16 +66,26 @@ class PrettyPrinter extends Element {
   };
 
   static ignoredProperties = [
+    "onChange",
     "hiddenGutter",
+    "hiddenGutter",
+    "noScrollbars",
+    "fancyScrollbars",
     "scrollbarThickness"
   ];
 }
 
 export default withStyle(PrettyPrinter)`
 
+  width: 100%;
+  height: 100%;
+  display: grid;
   overflow: hidden;
-  position: absolute;
   
+  grid-template-rows: auto;
+  grid-template-columns: min-content auto;  
+  grid-template-areas: "gutter syntax";
+
   color: inherit;
   border-color: inherit;
   background-color: inherit;

package/src/richTextarea.js

@@ -7,29 +7,6 @@ import { scrollbarThickness, scrollbarThumbBorderRadius } from "./styles";
 import { selectionColour, backgroundColour, selectionBackgroundColour, scrollbarThumbBoxShadowColour, scrollbarThumbBackgroundColour  } from "./scheme/colour";
 
 export default withStyle(class extends RichTextarea {
-  position(top, left) {
-    top = `${top}px`;
-    left = `${left}px`;
-
-    const css = {
-      top,
-      left
-    };
-
-    this.css(css);
-  }
-
-  setBounds(bounds) {
-    const top = bounds.getTop(),
-          left = bounds.getLeft(),
-          width = bounds.getWidth(),
-          height = bounds.getHeight();
-
-    this.position(top, left);
-    this.setWidth(width);
-    this.setHeight(height);
-  }
-
   didMount() {
     const { fancyScrollbars, hiddenScrollbars } = this.properties;
 
@@ -60,14 +37,12 @@ export default withStyle(class extends RichTextarea {
 
   parentContext() {
     const getContent = this.getContent.bind(this),  ///
-          setRichTextareaBounds = this.setBounds.bind(this),  ///
           getRichTextareaContent = this.getContent.bind(this),  ///
           setRichTextareaContent = this.setContent.bind(this),  ///
           setRichTextareaReadOnly = this.setReadOnly.bind(this);  ///
 
     return ({
       getContent,
-      setRichTextareaBounds,
       getRichTextareaContent,
       setRichTextareaContent,
       setRichTextareaReadOnly
@@ -79,7 +54,8 @@ export default withStyle(class extends RichTextarea {
   };
 
   static ignoredProperties = [
-    "fancyScrollbars"
+    "fancyScrollbars",
+    "hiddenScrollbars"
   ];
 })`
 
@@ -91,13 +67,13 @@ export default withStyle(class extends RichTextarea {
   outline: none;
   z-index: 1;
   tab-size: 2;
-  position: absolute;
   overflow: scroll;
+  grid-area: syntax;
   border-top: none;
   white-space: pre;
   overflow-wrap: normal;
   background-color: transparent;
-  
+
   ::selection {
     color: ${selectionColour};
     background-color: ${selectionBackgroundColour};

package/src/styles.js

@@ -1,5 +1,4 @@
 "use strict";
 
-export const gutterHeight = "100000px";
 export const scrollbarThickness = "12px";
 export const scrollbarThumbBorderRadius = "8px";

package/src/syntax.js

@@ -2,20 +2,11 @@
 
 import withStyle from "easy-with-style";  ///
 
-import ScrollableElement from "./element/scrollable";
-
-class Syntax extends ScrollableElement {
-  setBounds(bounds) {
-    const top = bounds.getTop(),
-          left = bounds.getLeft(),
-          width = bounds.getWidth(),
-          height = bounds.getHeight();
-
-    this.position(top, left);
-    this.setWidth(width);
-    this.setHeight(height);
-  }
+import { Element } from "easy";
+
+import { EMPTY_STRING } from "./constants";
 
+class Syntax extends Element {
   setLanguage(language) {
     const state = {
       language
@@ -57,11 +48,22 @@ class Syntax extends ScrollableElement {
             html += tokenWithSelectionHTML;
 
             return html;
-          }, "");
+          }, EMPTY_STRING);
 
     this.html(html);
   }
 
+  scroll(scrollTop, scrollLeft) {
+    const top = `${-scrollTop}px`,
+          left = `${-scrollLeft}px`,
+          css = {
+            top,
+            left
+          };
+
+    this.css(css);
+  }
+
   setInitialState() {
     const language = null;
 
@@ -73,14 +75,12 @@ class Syntax extends ScrollableElement {
   parentContext() {
 	  const setLanguage = this.setLanguage.bind(this),
           updateSyntax = this.update.bind(this), ///
-				  scrollSyntax = this.scroll.bind(this), ///
-          setSyntaxBounds = this.setBounds.bind(this);  //
+				  scrollSyntax = this.scroll.bind(this);  ///
 
     return ({
       setLanguage,
       updateSyntax,
-      scrollSyntax,
-      setSyntaxBounds
+      scrollSyntax
     });
   }
 
@@ -97,12 +97,10 @@ class Syntax extends ScrollableElement {
 
 export default withStyle(Syntax)`
 
-  z-index: 0;
-  overflow: hidden;
-  position: absolute;
+  position: relative;
   white-space: pre;
+  user-select: none;
   pointer-events: none;
-  background-color: inherit;
 
   font-size: inherit;
   line-height: inherit;

package/src/yapp.js

@@ -2,10 +2,9 @@
 
 import withStyle from "easy-with-style";  ///
 
-import { React, Bounds, Element } from "easy";
+import { React, Element } from "easy";
 
 import styleMixins from "./mixins/style";
-import RichTextarea from "./richTextarea";
 import PrettyPrinter from "./prettyPrinter";
 
 import { getScrollbarThickness } from "./utilities/scrollbarThickness";
@@ -13,7 +12,7 @@ import { pluginFromLanguageAndPlugin } from "./utilities/plugin";
 import { propertiesFromContentLanguagePluginAndOptions } from "./utilities/properties";
 import { lineCountFromContent, contentFromChildElements } from "./utilities/content";
 import { colour, caretColour, borderColour, backgroundColour } from "./scheme/colour";
-import { DEFAULT_EDITABLE, DEFAULT_FIRA_CODE, DEFAULT_DEFER_RENDER, DEFAULT_HIDDEN_GUTTER, DEFAULT_HIDDEN_SCROLLBARS, DEFAULT_FANCY_SCROLLBARS } from "./defaults";
+import { DEFAULT_EDITABLE, DEFAULT_FIRA_CODE, DEFAULT_AUTO_HEIGHT, DEFAULT_HIDDEN_GUTTER, DEFAULT_HIDDEN_SCROLLBARS, DEFAULT_FANCY_SCROLLBARS } from "./defaults";
 
 class Yapp extends Element {
   constructor(selector, plugin) {
@@ -22,6 +21,24 @@ 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;
   }
@@ -33,38 +50,6 @@ class Yapp extends Element {
     return content;
   }
 
-  getInnerBounds(gutterWidth) {
-    let top,
-        left,
-        width = this.getWidth(),
-        height = this.getHeight();
-
-    const paddingTop = this.getPaddingTop(),
-          paddingLeft = this.getPaddingLeft(),
-          paddingRight = this.getPaddingRight(),
-          paddingBottom = this.getPaddingBottom(),
-          borderTopWidth = this.getBorderTopWidth(),
-          borderLeftWidth = this.getBorderLeftWidth(),
-          borderRightWidth = this.getBorderRightWidth(),
-          borderBottomWidth = this.getBorderBottomWidth();
-
-    top = paddingTop;
-    left = paddingLeft;
-
-    width -= ( borderLeftWidth + paddingLeft + paddingRight + borderRightWidth );
-    height -= ( borderTopWidth + paddingTop + paddingBottom + borderBottomWidth );
-
-    if (gutterWidth !== null) {
-      left += gutterWidth;
-      width -= gutterWidth;
-    }
-
-    const bounds = Bounds.fromTopLeftWidthAndHeight(top, left, width, height),
-          innerBounds = bounds; ///
-
-    return innerBounds;
-  }
-
   getInitialLineCount() {
     const content = this.getContent(),
           lineCount = lineCountFromContent(content),
@@ -91,96 +76,35 @@ class Yapp extends Element {
 
   setParser(parser) { this.plugin.setParser(parser); }
 
-  changeHandler(event, element) {
-    const richTextarea = element, ///
-          contentChanged = richTextarea.hasContentChanged();
-
-    if (contentChanged) {
-      const { onContentChange } = this.properties,
-            contentChangeHandler = onContentChange; ///
-
-      this.update();
-
-      element = this; ///
-
-      contentChangeHandler && contentChangeHandler(event, element); ///
-    }
-  }
-
-  scrollHandler(event, element) {
-    const richTextarea = element, ///
-          scrollTop = richTextarea.getScrollTop(),
-          scrollLeft = richTextarea.getScrollLeft();
-
-    this.scrollPrettyPrinter(scrollTop, scrollLeft);
-  }
-
   update() {
     const content = this.getContent();
 
     this.plugin.update(content);
 
-    const tokens = this.plugin.getTokens(),
-          gutterWidth = this.updatePrettyPrinter(tokens);
-
-    if (gutterWidth !== null) {
-      const innerBounds = this.getInnerBounds(gutterWidth),
-            richTextareaBounds = innerBounds; ///
-
-      this.setRichTextareaBounds(richTextareaBounds);
-    }
-  }
-
-  resize() {
-    let innerBounds,
-        gutterWidth;
-
-    gutterWidth = null;
-
-    innerBounds = this.getInnerBounds(gutterWidth);
-
-    const prettyPrinterBounds = innerBounds;  ///
-
-    this.setPrettyPrinterBounds(prettyPrinterBounds);
-
-    gutterWidth = this.resizePrettyPrinter();
-
-    innerBounds = this.getInnerBounds(gutterWidth);
+    const tokens = this.plugin.getTokens();
 
-    const richTextareaBounds = innerBounds; ///
-
-    this.setRichTextareaBounds(richTextareaBounds);
-  }
-
-  render() {
-    const lineHeight = this.getLineHeight(),
-          paddingTop = this.getPaddingTop(),
-          paddingBottom = this.getPaddingBottom(),
-          borderTopWidth = this.getBorderTopWidth(),
-          initialLineCount = this.getInitialLineCount(),
-          borderBottomWidth = this.getBorderBottomWidth(),
-          scrollbarThickness = this.getScrollbarThickness(),
-          height = borderTopWidth + paddingTop + initialLineCount * lineHeight + paddingBottom + borderBottomWidth + scrollbarThickness;
-
-    this.setHeight(height);
-
-    this.resize();
-
-    this.update();
+    this.updatePrettyPrinter(tokens);
   }
 
   didMount() {
-    const { firaCode = DEFAULT_FIRA_CODE, deferRender = DEFAULT_DEFER_RENDER } = this.properties;
+    const { firaCode = DEFAULT_FIRA_CODE, autoHeight = DEFAULT_AUTO_HEIGHT } = this.properties;
 
     if (firaCode) {
       this.addClass("fira-code");
     }
 
-    if (deferRender) {
-      return;
+    if (autoHeight) {
+      const lineHeight = this.getLineHeight(),
+            paddingTop = this.getPaddingTop(),
+            paddingBottom = this.getPaddingBottom(),
+            borderTopWidth = this.getBorderTopWidth(),
+            initialLineCount = this.getInitialLineCount(),
+            borderBottomWidth = this.getBorderBottomWidth(),
+            scrollbarThickness = this.getScrollbarThickness(),
+            height = borderTopWidth + paddingTop + initialLineCount * lineHeight + paddingBottom + borderBottomWidth + scrollbarThickness;
+
+      this.setHeight(height);
     }
-
-    this.render();
   }
 
   willUnmount() {
@@ -193,36 +117,35 @@ class Yapp extends Element {
 
   childElements() {
     const { hiddenGutter = DEFAULT_HIDDEN_GUTTER, hiddenScrollbars = DEFAULT_HIDDEN_SCROLLBARS, fancyScrollbars = DEFAULT_FANCY_SCROLLBARS } = this.properties,
-          changeHandler = this.changeHandler.bind(this),
-          scrollHandler = this.scrollHandler.bind(this),
           scrollbarThickness = this.getScrollbarThickness();
 
-    return ([
+    return (
 
-      <PrettyPrinter hiddenGutter={hiddenGutter} scrollbarThickness={scrollbarThickness} />,
-      <RichTextarea onChange={changeHandler} onScroll={scrollHandler} hiddenScrollbars={hiddenScrollbars} fancyScrollbars={fancyScrollbars} active />
+      <PrettyPrinter onChange={this.changeHandler}
+                     hiddenGutter={hiddenGutter}
+                     fancyScrollbars={fancyScrollbars}
+                     hiddenScrollbars={hiddenScrollbars}
+                     scrollbarThickness={scrollbarThickness} />
 
-    ]);
+    );
   }
 
   parentContext() {
     const getPlugin = this.getPlugin.bind(this),
           getContent = this.getContent.bind(this),
           updateYapp = this.update.bind(this),  ///
-          resizeYapp = this.resize.bind(this),  ///
+          setYappLexer = this.setLexer.bind(this),  ///
           setYappWidth = this.setWidth.bind(this),  ///
           setYappHeight = this.setHeight.bind(this),  ///
-          setYappLexer = this.setLexer.bind(this),  ///
           setYappParser = this.setParser.bind(this);  ///
 
     return ({
       getPlugin,
       getContent,
       updateYapp,
-      resizeYapp,
+      setYappLexer,
       setYappWidth,
       setYappHeight,
-      setYappLexer,
       setYappParser
     });
   }
@@ -233,19 +156,15 @@ class Yapp extends Element {
     const { childElements, editable = DEFAULT_EDITABLE } = this.properties,
           language = this.plugin.getLanguage(),
           content = contentFromChildElements(childElements),
-          readOnly = !editable,
-          scrollTop = 0,  ///
-          scrollLeft = 0; ///
+          readOnly = !editable;
 
     this.setLanguage(language);
 
-    this.scrollPrettyPrinter(scrollTop, scrollLeft);
-
     this.setRichTextareaContent(content);
 
     this.setRichTextareaReadOnly(readOnly);
 
-    this.onResize((event, element) => this.resize());
+    this.update();
   }
 
   static tagName = "div";
@@ -259,10 +178,11 @@ class Yapp extends Element {
     "language",
     "firaCode",
     "editable",
-    "deferRender",
+    "autoHeight",
     "hiddenGutter",
     "noScrollbars",
-    "fancyScrollbars"
+    "fancyScrollbars",
+    "onContentChange"
   ];
 
   static fromContent(content, language, Plugin, options) {
@@ -288,8 +208,7 @@ Object.assign(Yapp.prototype, styleMixins);
 export default withStyle(Yapp)`
 
   width: 100%;
-  overflow: hidden;
-  position: relative;
+  height: 100%;
 
   border: 1px solid;