yapp 5.0.8 → 5.0.11

package/src/div/syntax.js

@@ -100,15 +100,11 @@ export default withStyle(SyntaxDiv)`
   user-select: none;
   pointer-events: none;
 
-  color: inherit;
   font-size: inherit;
   line-height: inherit;
   font-family: inherit;
   font-weight: inherit;
-  caret-color: inherit;
-  border-color: inherit;
   text-rendering: inherit;
-  background-color: inherit;
   font-feature-settings: inherit;
 
 `;

package/src/example/yapp.js

@@ -1,17 +1,11 @@
 "use strict";
 
-import withStyle from "easy-with-style";  ///
-
 import Yapp from "../index";  ///
 
-export default withStyle(class extends Yapp {
+export default class extends Yapp {
   static defaultProperties = {
     editable: true,
     autoHeight: false,
     fancyScrollbars: true
   };
-})`
-
-  border-color: #666;
-  
-`;
+}

package/src/prettyPrinter.js

@@ -99,15 +99,11 @@ export default withStyle(PrettyPrinter)`
   grid-template-areas: "gutter pretty-rich-textarea";
   grid-template-columns: min-content auto;  
 
-  color: inherit;
   font-size: inherit;
   line-height: inherit;
   font-family: inherit;
   font-weight: inherit;
-  caret-color: inherit;
-  border-color: inherit;
   text-rendering: inherit;
-  background-color: transparent;
   font-feature-settings: inherit;
 
 `;

package/src/renderYappStyles.js

@@ -6,11 +6,9 @@ import yappStyle from "./style/yapp"
 import syntaxStyle from "./style/syntax"
 import firaCodeStyle from "./style/firaCode"
 
-import { DEFAULT_HOST } from "./defaults";
-
 const { renderStyle } = withStyle;
 
-export function renderYappStyles(host = DEFAULT_HOST) {
+export function renderYappStyles(host) {
   renderStyle(yappStyle);
 
   renderStyle(syntaxStyle);

package/src/richTextarea.js

@@ -3,8 +3,6 @@
 import withStyle from "easy-with-style";  ///
 
 import { RichTextarea } from "easy-richtextarea";
-import { scrollbarThickness, scrollbarThumbBorderRadius } from "./styles";
-import { scrollbarColour, selectionColour, backgroundColour, selectionBackgroundColour  } from "./scheme/colour";
 
 export default withStyle(class extends RichTextarea {
   didMount() {
@@ -76,48 +74,15 @@ export default withStyle(class extends RichTextarea {
   overflow-wrap: normal;
   background-color: transparent;
 
-  ::selection {
-    color: ${selectionColour};
-    background-color: ${selectionBackgroundColour};
-  }
-  
   .hidden-scrollbars {
     overflow: hidden;
   }
   
-  .fancy-scrollbars {
-    scrollbar-color: ${scrollbarColour} transparent;
-    scrollbar-gutter: auto;
-  }
-  
-  .fancy-scrollbars::-webkit-scrollbar {
-    width: ${scrollbarThickness};
-    height: ${scrollbarThickness};
-  }
-
-  .fancy-scrollbars::-webkit-scrollbar-track {
-    display: none;
-  }
-
-  .fancy-scrollbars::-webkit-scrollbar-thumb {
-    border: 2px solid ${backgroundColour};
-    border-radius: ${scrollbarThumbBorderRadius};
-    background-color: ${scrollbarColour};
-  }
-
-  .fancy-scrollbars::-webkit-scrollbar-corner {
-    display: none;
-  }
-
-  color: transparent;
   font-size: inherit;
   line-height: inherit;
   font-family: inherit;
   font-weight: inherit;
-  caret-color: inherit;
-  border-color: initial;
   text-rendering: inherit;
-  background-color: transparent;
   font-feature-settings: inherit;
 
 `;

package/src/style/firaCode.js

@@ -1,6 +1,8 @@
 "use strict";
 
-const firaCodeStyle = (host) => `
+import { DEFAULT_HOST } from "../defaults";
+
+const firaCodeStyle = (host = DEFAULT_HOST) => `
 
   @font-face {
     src: url("${host}/css/woff2/FiraCode-Regular.woff2");

package/src/style/yapp.js

@@ -1,33 +1,72 @@
 "use strict";
 
-import { colour, caretColour, borderColour, backgroundColour } from "../scheme/colour";
+import { scrollbarThickness, scrollbarThumbBorderRadius } from "../styles";
+import { colour, caretColour, borderColour, scrollbarColour, selectionColour, backgroundColour, selectionBackgroundColour } from "../scheme/colour";
 
 const yappStyle = `
 
   .yapp {
     width: 100%;
     height: 100%;
-    border: 1px solid;
+    border: 1px solid ${borderColour};
+    background-color: ${backgroundColour};
     
-    color: ${colour};
     font-size: 13px;
     line-height: 20px;
     font-family: "Menlo", "Lucida Sans Typewriter", monospace;
     font-weight: normal;
-    caret-color: ${caretColour};
-    border-color: ${borderColour};
     text-rendering: initial;
-    background-color: ${backgroundColour};
     font-feature-settings: initial;
+  }    
+
+  .yapp.fira-code {
+    font-family: "Fira Code";
+    text-rendering: optimizeLegibility;
+    font-feature-settings: "calt" 1;
+  }
   
-    .fira-code {
+  .yapp>.pretty-printer>.gutter {
+    border-right: 1px dotted ${borderColour};
+  }
   
-      font-family: "Fira Code";
-      text-rendering: optimizeLegibility;
-      font-feature-settings: "calt" 1;
-      
-    }
-  }    
+  .yapp>.pretty-printer>.gutter>.line-numbers {
+    color: ${colour};
+    margin: 0 6px 0 6px;
+    text-align: right;
+  }
+  
+  .yapp>.pretty-printer textarea.rich {
+    caret-color: ${caretColour};
+  }
+
+  .yapp>.pretty-printer textarea.rich::selection {
+    color: ${selectionColour};
+    background-color: ${selectionBackgroundColour};
+  }
+  
+  .yapp>.pretty-printer textarea.rich.fancy-scrollbars {
+    scrollbar-color: ${scrollbarColour} transparent;
+    scrollbar-gutter: auto;
+  }
+  
+  .yapp>.pretty-printer textarea.rich.fancy-scrollbars::-webkit-scrollbar {
+    width: ${scrollbarThickness};
+    height: ${scrollbarThickness};
+  }
+
+  .yapp>.pretty-printer textarea.rich.fancy-scrollbars::-webkit-scrollbar-track {
+    display: none;
+  }
+
+  .yapp>.pretty-printer textarea.rich.fancy-scrollbars::-webkit-scrollbar-thumb {
+    border: 2px solid ${backgroundColour};
+    border-radius: ${scrollbarThumbBorderRadius};
+    background-color: ${scrollbarColour};
+  }
+
+  .yapp>.pretty-printer textarea.rich.fancy-scrollbars::-webkit-scrollbar-corner {
+    display: none;
+  }
 
 `;
 

package/src/utilities/{properties.js → configuration.js}

@@ -1,11 +1,11 @@
 "use strict";
 
-export function propertiesFromContentAndOptions(content, options) {
+export function propertiesFromContentAndConfiguration(content, configuration) {
   const text = content, ///
         childElements = [{
           getText: () => text,
         }],
-        properties = Object.assign({}, options, { ///
+        properties = Object.assign({}, configuration, { ///
           childElements
         });
 

package/src/yapp.js

@@ -7,8 +7,8 @@ import PrettyPrinter from "./prettyPrinter";
 
 import { pluginFromProperties } from "./utilities/plugin";
 import { getScrollbarThickness } from "./utilities/scrollbar";
-import { propertiesFromContentAndOptions } from "./utilities/properties";
 import { CONTENT_CHANGE_CUSTOM_EVENT_TYPE } from "./customEventTypes";
+import { propertiesFromContentAndConfiguration } from "./utilities/configuration";
 import { lineCountFromContent, contentFromChildElements } from "./utilities/content";
 import { DEFAULT_EDITABLE, DEFAULT_FIRA_CODE, DEFAULT_AUTO_HEIGHT, DEFAULT_HIDDEN_GUTTER, DEFAULT_HIDDEN_SCROLLBARS, DEFAULT_FANCY_SCROLLBARS } from "./defaults";
 
@@ -171,16 +171,16 @@ export default class Yapp extends Element {
     return yapp;
   }
 
-  static fromContentAndOptions(Class, content, options) {
-    if (options === undefined) {
-      options = content;  ///
+  static fromContentAndConfiguration(Class, content, configuration) {
+    if (configuration === undefined) {
+      configuration = content;  ///
 
       content = Class;  ///
 
       Class = Yapp;
     }
 
-    const properties = propertiesFromContentAndOptions(content, options),
+    const properties = propertiesFromContentAndConfiguration(content, configuration),
           plugin = pluginFromProperties(properties),
           yapp = Element.fromClass(Class, properties, plugin);
 

package/lib/utilities/properties.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "propertiesFromContentAndOptions", {
-    enumerable: true,
-    get: function() {
-        return propertiesFromContentAndOptions;
-    }
-});
-function propertiesFromContentAndOptions(content, options) {
-    var text = content, childElements = [
-        {
-            getText: function() {
-                return text;
-            }
-        }
-    ], properties = Object.assign({}, options, {
-        childElements: childElements
-    });
-    return properties;
-}
-
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy91dGlsaXRpZXMvcHJvcGVydGllcy5qcyJdLCJzb3VyY2VzQ29udGVudCI6WyJcInVzZSBzdHJpY3RcIjtcblxuZXhwb3J0IGZ1bmN0aW9uIHByb3BlcnRpZXNGcm9tQ29udGVudEFuZE9wdGlvbnMoY29udGVudCwgb3B0aW9ucykge1xuICBjb25zdCB0ZXh0ID0gY29udGVudCwgLy8vXG4gICAgICAgIGNoaWxkRWxlbWVudHMgPSBbe1xuICAgICAgICAgIGdldFRleHQ6ICgpID0+IHRleHQsXG4gICAgICAgIH1dLFxuICAgICAgICBwcm9wZXJ0aWVzID0gT2JqZWN0LmFzc2lnbih7fSwgb3B0aW9ucywgeyAvLy9cbiAgICAgICAgICBjaGlsZEVsZW1lbnRzXG4gICAgICAgIH0pO1xuXG4gIHJldHVybiBwcm9wZXJ0aWVzO1xufVxuIl0sIm5hbWVzIjpbInByb3BlcnRpZXNGcm9tQ29udGVudEFuZE9wdGlvbnMiLCJjb250ZW50Iiwib3B0aW9ucyIsInRleHQiLCJjaGlsZEVsZW1lbnRzIiwiZ2V0VGV4dCIsInByb3BlcnRpZXMiLCJPYmplY3QiLCJhc3NpZ24iXSwibWFwcGluZ3MiOiJBQUFBOzs7OytCQUVnQkE7OztlQUFBQTs7O0FBQVQsU0FBU0EsZ0NBQWdDQyxPQUFPLEVBQUVDLE9BQU87SUFDOUQsSUFBTUMsT0FBT0YsU0FDUEcsZ0JBQWdCO1FBQUM7WUFDZkMsU0FBUzt1QkFBTUY7O1FBQ2pCO0tBQUUsRUFDRkcsYUFBYUMsT0FBT0MsTUFBTSxDQUFDLENBQUMsR0FBR04sU0FBUztRQUN0Q0UsZUFBQUE7SUFDRjtJQUVOLE9BQU9FO0FBQ1QifQ==