highmark-markdown 0.0.204 → 0.0.209

package/src/example/view.js

@@ -3,22 +3,16 @@
 import withStyle from "easy-with-style";  ///
 
 import { Element } from "easy";
-import { RowDiv, RowsDiv, ColumnDiv, ColumnsDiv, VerticalSplitterDiv, HorizontalSplitterDiv } from "easy-layout";
+import { MarkdownLexer, MarkdownParser } from "../index";
+import { RowDiv, RowsDiv, ColumnDiv, ColumnsDiv, VerticalSplitterDiv } from "easy-layout";
 
 import XMP from "./view/xmp";
 import PreviewDiv from "./view/div/preview";
 import SubHeading from "./view/subHeading";
-import BNFTextarea from "./view/textarea/bnf";
+import CSSTextarea from "./view/textarea/css";
 import LeftSizeableDiv from "./view/div/sizeable/left";
-import RightSizeableDiv from "./view/div/sizeable/right";
 import MarkdownTextarea from "./view/textarea/markdown";
-import ParseTreeTextarea from "./view/textarea/parseTree";
-import LexicalEntriesTextarea from "./view/textarea/lexicalEntries";
-
-import { MarkdownLexer, MarkdownParser } from "../index";
-
-const { bnf } = MarkdownParser,
-      { entries } = MarkdownLexer;
+import MarkdownStyleTextarea from "./view/textarea/markdownStyle";
 
 const markdownLexer = MarkdownLexer.fromNothing(),
       markdownParser = MarkdownParser.fromNothing();
@@ -28,16 +22,22 @@ class View extends Element {
     this.update();
   }
 
-  update() {
+  updateMarkdownStyle() {
+    const { markdownStyleElement } = this.properties,
+          markdownStyle = this.getMarkdownStyle(),
+          css = markdownStyleElement.update(markdownStyle);
+
+    this.setCSS(css);
+  }
+
+  updateMarkdown() {
     const markdown = this.getMarkdown(),
-          lexer = markdownLexer,  ///
-          parser =  markdownParser, ///
           content = markdown, ///
+          lexer = markdownLexer,
+          parser =  markdownParser,
           tokens = lexer.tokenise(content),
           node = parser.parse(tokens);
 
-    let parseTree = null;
-
     if (node !== null) {
       const divisionMarkdownNode = node,  ///
             parentNode = null,
@@ -58,15 +58,16 @@ class View extends Element {
       this.xmpHTML(html);
 
       this.updatePreviewDiv(domElement);
-
-      parseTree = node.asParseTree(tokens);
     } else {
       this.clearXMP();
 
       this.clearPreviewDiv();
     }
+  }
 
-    this.setParseTree(parseTree);
+  update() {
+    this.updateMarkdown();
+    this.updateMarkdownStyle();
   }
 
   childElements() {
@@ -75,37 +76,29 @@ class View extends Element {
       <ColumnsDiv>
         <LeftSizeableDiv>
           <SubHeading>
-            Lexical entries
-          </SubHeading>
-          <LexicalEntriesTextarea onKeyUp={this.keyUpHandler} />
-          <SubHeading>
-            BNF
+            Markdown
           </SubHeading>
-          <BNFTextarea onKeyUp={this.keyUpHandler} />
+          <MarkdownTextarea onKeyUp={this.keyUpHandler} />
           <SubHeading>
-            Parse tree
+            Markdown style
           </SubHeading>
-          <ParseTreeTextarea/>
+          <MarkdownStyleTextarea onKeyUp={this.keyUpHandler} />
         </LeftSizeableDiv>
         <VerticalSplitterDiv/>
         <ColumnDiv>
           <RowsDiv>
-            <RightSizeableDiv>
-              <XMP/>
-            </RightSizeableDiv>
-            <HorizontalSplitterDiv/>
-            <RowDiv>
-              <RowsDiv>
-                <SubHeading>
-                  Preview
-                </SubHeading>
-                <PreviewDiv/>
-                <SubHeading>
-                  Markdown
-                </SubHeading>
-                <MarkdownTextarea onKeyUp={this.keyUpHandler} />
-              </RowsDiv>
-            </RowDiv>
+            <SubHeading>
+              HTML
+            </SubHeading>
+            <XMP/>
+            <SubHeading>
+              CSS
+            </SubHeading>
+            <CSSTextarea/>
+            <SubHeading>
+              Preview
+            </SubHeading>
+            <PreviewDiv/>
           </RowsDiv>
         </ColumnDiv>
       </ColumnsDiv>
@@ -116,25 +109,36 @@ class View extends Element {
   initialise() {
     this.assignContext();
 
-    const { initialMarkdown } = this.constructor,
-          markdown = initialMarkdown, ///
-          lexicalEntries = entries; ///
-
-    this.setBNF(bnf);
+    const { initialMarkdown, initialMarkdownStyle } = this.constructor,
+          markdownStyle = initialMarkdownStyle, ///
+          markdown = initialMarkdown; ///
 
     this.setMarkdown(markdown);
 
-    this.setLexicalEntries(lexicalEntries);
+    this.setMarkdownStyle(markdownStyle);
 
     this.update();
   }
 
+  static initialMarkdownStyle = `
+min-height: initial;
+  
+paragraph {
+  colour: red;
+}
+
+`;
+
   static initialMarkdown = `1. First item.
 3. Third item.
 `;
 
   static tagName = "div";
 
+  static ignoredProperties = [
+    "markdownStyleElement"
+  ];
+
   static defaultProperties = {
     className: "view"
   };

package/src/example.js

@@ -5,17 +5,26 @@ import "juxtapose";
 import withStyle from "easy-with-style";  ///
 
 import { Body } from "easy";
+import { MarkdownStyleElement, DefaultMarkdownStyleElement } from "./index";  ///
 
 import View from "./example/view";
 
+import { PREVIEW_DIV_SELECTORS_STRING } from "./example/constants";
+
 const { renderStyles } = withStyle;
 
+const selectorSString = PREVIEW_DIV_SELECTORS_STRING;
+
+DefaultMarkdownStyleElement.fromSelectorsString(selectorSString);
+
+const markdownStyleElement = MarkdownStyleElement.fromSelectorsString(selectorSString);
+
 renderStyles();
 
 const body = new Body();
 
 body.mount(
 
-  <View/>
+  <View markdownStyleElement={markdownStyleElement} />
 
 );

package/src/index.js

@@ -4,7 +4,13 @@ export { default as nodeMap } from "./nodeMap";
 export { default as ruleNames } from "./ruleNames";
 export { default as tokenTypes } from "./tokenTypes";
 export { default as elementMap } from "./elementMap";
+export { default as cssUtilities } from "./utilities/css";
 export { default as MarkdownNode } from "./node/markdown";
 export { default as MarkdownLexer } from "./markdown/lexer";
 export { default as MarkdownParser } from "./markdown/parser";
 export { default as queryUtilities } from "./utilities/query";
+export { default as MarkdownStyleLexer } from "./markdownStyle/lexer";
+export { default as MarkdownStyleParser } from "./markdownStyle/parser";
+export { default as MarkdownStyleElement } from "./styleElement/markdown";
+export { default as defaultMarkdownStyle } from "./defaultMarkdownStyle";
+export { default as DefaultMarkdownStyleElement } from "./styleElement/markdown/default";

package/src/markdown/bnf.js

@@ -95,7 +95,7 @@ const bnf = `
     tableSeparator          ::=  [many-dashes] endOfLine ;
 
     
-    orderedListItem         ::=  marker line ;
+    orderedListItem.        ::=  marker line ;
     
     
     unorderedListItem       ::=  bullet line ;

package/src/markdownStyle/bnf.js

@@ -0,0 +1,81 @@
+"use strict";
+
+const bnf = `
+
+    style          ::=  ( ruleSet | declaration | nonsense | error )+ ;
+
+    
+    ruleSet..      ::=  selectorsList "{" ( ruleSet | declaration | nonsense )* "}" ;
+    
+    
+    declaration    ::=  name ":" values ";" ;
+
+    
+    nonsense.      ::=  [string-literal] | [escaped] | [rule-name] | [number] | [colour] | [unit] | [name] | [special] | [unassigned] ;
+
+
+    error.         ::=  . ;
+
+
+    selectorsList  ::=  selectors ( "," selectors )* ;
+
+
+    selectors      ::=  selector+ ;
+
+
+    selector       ::=  [rule-name] class* pseudoClass* 
+    
+                     |  class+ pseudoClass*
+
+                     |  pseudoClass+
+
+                     ;
+
+    
+    values         ::=  value+ ;
+
+    
+    class          ::=  <NO_WHITESPACE>"."<NO_WHITESPACE>identifier ;
+
+    
+    pseudoClass    ::=  <NO_WHITESPACE>":"<NO_WHITESPACE>identifier ;
+    
+    
+    name.          ::=  identifier ;
+
+    
+    value.         ::=  identifier ( <NO_WHITESPACE>"(" arguments ")" )?
+    
+                     |  [number]<NO_WHITESPACE>[unit]
+    
+                     |  [string-literal] 
+                              
+                     |  [number]
+                              
+                     |  [colour]
+                              
+                     ;
+                     
+
+    arguments      ::=  argument ( "," argument )* ;
+    
+
+    argument       ::=  identifier
+    
+                     |  [number]<NO_WHITESPACE>[unit]
+    
+                     |  [string-literal] 
+                              
+                     |  [number]
+                              
+                     |  [colour]
+                     
+                     ;
+
+
+    identifier     ::=  ( [rule-name] | [name] ) ( <NO_WHITESPACE>"-"<NO_WHITESPACE>( [rule-name] | [name] ) )* ;
+
+    
+`;
+
+export default bnf;

package/src/markdownStyle/entries.js

@@ -0,0 +1,39 @@
+"use strict";
+
+import elementMap from "../elementMap";
+
+import { ruleNamesExpressionFromElementMap } from "../utilities/entries";
+
+const ruleNamesExpression = ruleNamesExpressionFromElementMap(elementMap);
+
+const entries = [
+  {
+    "escaped": "^\\\\[^\\s]"
+  },
+  {
+    "rule-name": `^(?:${ruleNamesExpression})`
+  },
+  {
+    "number": "^(?:0|[1-9][0-9]*)(?:\\.[0-9]+)?"
+  },
+  {
+    "colour": "^#(?:[0-9a-fA-F]{6}|[0-9a-fA-F]{3})"
+  },
+  {
+    "unit": "^(?:deg|%)"
+  },
+  {
+    "name": "^[_a-zA-Z0-9]+"
+  },
+  {
+    "bracket": "^(?:\\{|\\})"
+  },
+  {
+    "special": "^(?:,|:|;|-|\\.|\\(|\\)|\\[|\\])"
+  },
+  {
+    "unassigned": "^[^\\s]+"
+  }
+];
+
+export default entries;

package/src/markdownStyle/lexer.js

@@ -0,0 +1,43 @@
+"use strict";
+
+import { CommonLexer } from "occam-lexers";
+import { WhitespaceToken,
+         EndOfLineNonSignificantToken,
+         CStyleSingleLineCommentToken,
+         DoublyQuotedStringLiteralToken,
+         EndOfLineCommentSignificantToken,
+         CStyleEndOfMultiLineCommentToken,
+         CStyleStartOfMultiLineCommentToken,
+         CStyleMiddleOfMultiLineCommentToken } from "occam-lexers";
+
+import entries from "./entries";
+
+export default class MarkdownStyleLexer extends CommonLexer {
+  static entries = entries;
+
+  static EndOfLineToken = EndOfLineNonSignificantToken;
+
+  static WhitespaceToken = WhitespaceToken;
+
+  static EndOfLineCommentToken = EndOfLineCommentSignificantToken;  ///
+
+  static SingleLineCommentToken = CStyleSingleLineCommentToken; ///
+
+  static RegularExpressionToken = null;
+
+  static EndOfMultiLineCommentToken = CStyleEndOfMultiLineCommentToken; ///
+
+  static StartOfMultiLineCommentToken = CStyleStartOfMultiLineCommentToken; ///
+
+  static MiddleOfMultiLineCommentToken = CStyleMiddleOfMultiLineCommentToken; ///
+
+  static SinglyQuotedStringLiteralToken = null;
+
+  static DoublyQuotedStringLiteralToken = DoublyQuotedStringLiteralToken;
+
+  static fromNothing() { return CommonLexer.fromNothing(MarkdownStyleLexer); }
+
+  static fromRules(rules) { return CommonLexer.fromRules(MarkdownStyleLexer, rules); }
+
+  static fromEntries(entries) { return CommonLexer.fromEntries(MarkdownStyleLexer, entries); }
+}

package/src/markdownStyle/parser.js

@@ -0,0 +1,15 @@
+"use strict";
+
+import { CommonParser } from "occam-parsers";
+
+import bnf from "./bnf";
+
+export default class MarkdownStyleParser extends CommonParser {
+  static bnf = bnf;
+
+  static fromNothing() { return CommonParser.fromNothing(MarkdownStyleParser); }
+
+  static fromBNF(bnf) { return CommonParser.fromBNF(MarkdownStyleParser, bnf); }
+
+  static fromRules(rules) { return CommonParser.fromRules(MarkdownStyleParser, rules); }
+}

package/src/style/declaration.js

@@ -0,0 +1,42 @@
+"use strict";
+
+import { COLOUR } from "../constants";
+import { nodeQuery } from "../utilities/query";
+import { contentFromNodeAndTokens } from "../utilities/content";
+
+const nameNonTerminalNodeQuery = nodeQuery("/*/name"),
+      valuesNonTerminalNodeQuery = nodeQuery("/*/values");
+
+export default class Declaration {
+  constructor(name, values) {
+    this.name = name;
+    this.values = values;
+  }
+
+  getName() {
+    return this.name;
+  }
+
+  getValues() {
+    return this.values;
+  }
+
+  asCSS() {
+    const name = this.name.replace(/colour/g, COLOUR),
+          css = `  ${name}: ${this.values};`;
+
+    return css;
+  }
+
+  static fromNodeAndTokens(node, tokens) {
+    const nameNonTerminalNode = nameNonTerminalNodeQuery(node),
+          valuesNonTerminalNode = valuesNonTerminalNodeQuery(node),
+          nameNonTerminalNodeContent = contentFromNodeAndTokens(nameNonTerminalNode, tokens),
+          valuesNonTerminalNodesContent = contentFromNodeAndTokens(valuesNonTerminalNode, tokens),
+          name = nameNonTerminalNodeContent, ///
+          values = valuesNonTerminalNodesContent, ///
+          declaration = new Declaration(name, values);
+
+    return declaration;
+  }
+}

package/src/style/declarations.js

@@ -0,0 +1,64 @@
+"use strict";
+
+import Declaration from "./declaration";
+
+import { nodesQuery } from "../utilities/query";
+import { EMPTY_STRING } from "../constants";
+
+const declarationNonTerminalNodesQuery = nodesQuery("/*/declaration");
+
+export default class Declarations {
+  constructor(array) {
+    this.array = array;
+  }
+
+  getLength() { return this.array.length; }
+
+  asCSS(selectorsList) {
+    let css = EMPTY_STRING;
+
+    const length = this.getLength(),
+          selectorsListLength = selectorsList.getLength();
+
+    if ((length > 0) && (selectorsListLength > 0)) {
+      const declarationsCSS = this.array.reduce((declarationsCSS, declaration) => {
+              const declarationCSS = declaration.asCSS();
+
+              declarationsCSS = (declarationsCSS === null) ?
+                                  declarationCSS : ///
+                                    `${declarationsCSS}
+${declarationCSS}`;
+
+              return declarationsCSS;
+            }, null),
+            selectorsListCSS = selectorsList.asCSS();
+
+      css = `${selectorsListCSS} {
+${declarationsCSS}
+}
+`;
+    }
+
+    return css;
+  }
+
+  static fromNothing() {
+    const array = [],
+          declarations = new Declarations(array);
+
+    return declarations;
+  }
+
+  static fromNodeAndTokens(node, tokens) {
+    const declarationNonTerminalNodes = declarationNonTerminalNodesQuery(node),
+          array = declarationNonTerminalNodes.map((declarationNonTerminalNode) => {
+            const node = declarationNonTerminalNode, ///
+                  declaration = Declaration.fromNodeAndTokens(node, tokens);
+
+            return declaration;
+          }),
+          declarations = new Declarations(array);
+
+    return declarations;
+  }
+}

package/src/style/division.js

@@ -0,0 +1,46 @@
+"use strict";
+
+import RuleSets from "./ruleSets";
+import Declarations from "./declarations";
+
+import { EMPTY_STRING } from "../constants";
+
+export default class Division {
+  constructor(ruleSets, declarations, selectorsList) {
+    this.ruleSets = ruleSets;
+    this.declarations = declarations;
+    this.selectorsList = selectorsList;
+  }
+
+  getRuleSets() {
+    return this.ruleSets;
+  }
+
+  getDeclarations() {
+    return this.declarations;
+  }
+
+  getSelectorsList() {
+    return this.selectorsList;
+  }
+
+  asCSS() {
+    const outermost = true,
+          ruleSetsCSS = this.ruleSets.asCSS(this.selectorsList, outermost),
+          declarationsCSS = this.declarations.asCSS(this.selectorsList, outermost),
+          css = (declarationsCSS === EMPTY_STRING) ?
+                  ruleSetsCSS : ///
+                    `${declarationsCSS}
+${ruleSetsCSS}`;
+
+    return css;
+  }
+
+  static fromNodeTokensAndSelectorsList(node, tokens, selectorsList) {
+    const ruleSets = RuleSets.fromNodeAndTokens(node, tokens),
+          declarations = Declarations.fromNodeAndTokens(node, tokens),
+          division = new Division(ruleSets, declarations, selectorsList);
+
+    return division;
+  }
+}

package/src/style/ruleSet.js

@@ -0,0 +1,48 @@
+"use strict";
+
+import Declarations from "./declarations";
+import SelectorsList from "./selectorsList";
+
+import { EMPTY_STRING } from "../constants";
+
+export default class RuleSet {
+  constructor(ruleSets, declarations, selectorsList) {
+    this.ruleSets = ruleSets;
+    this.declarations = declarations;
+    this.selectorsList = selectorsList;
+  }
+
+  getRuleSets() {
+    return this.ruleSets;
+  }
+
+  getDeclarations() {
+    return this.declarations;
+  }
+
+  getSelectorsList() {
+    return this.selectorsList;
+  }
+
+  asCSS(selectorsList, outermost = false) {
+    selectorsList = selectorsList.combine(this.selectorsList, outermost);  ///
+
+    const declarationsCSS = this.declarations.asCSS(selectorsList),
+          ruleSetsCSS = this.ruleSets.asCSS(selectorsList),
+          css = (declarationsCSS === EMPTY_STRING) ?
+                  ruleSetsCSS : ///
+                    `${declarationsCSS}
+${ruleSetsCSS}`;
+
+    return css;
+  }
+
+  static fromRuleSetsNodeAndTokens(RuleSets, node, tokens) {
+    const ruleSets = RuleSets.fromNodeAndTokens(node, tokens),
+          declarations = Declarations.fromNodeAndTokens(node, tokens),
+          selectorsList = SelectorsList.fromNodeAndTokens(node, tokens),
+          ruleSet = new RuleSet(ruleSets, declarations, selectorsList);
+
+    return ruleSet;
+  }
+}

package/src/style/ruleSets.js

@@ -0,0 +1,57 @@
+"use strict";
+
+import RuleSet from "./ruleSet";
+
+import { nodesQuery } from "../utilities/query";
+import { EMPTY_STRING } from "../constants";
+
+const ruleSetNonTerminalNodesQuery = nodesQuery("/*/ruleSet");
+
+export default class RuleSets {
+  constructor(array) {
+    this.array = array;
+  }
+
+  getLength() { return this.array.length; }
+
+  asCSS(selectorsList, outermost = false) {
+    let css = EMPTY_STRING;
+
+    const length = this.getLength(),
+          selectorsListLength = selectorsList.getLength();
+
+    if ((length > 0) && (selectorsListLength > 0)) {
+      css = this.array.reduce((css, ruleSet) => {
+        const ruleSetCSS = ruleSet.asCSS(selectorsList, outermost);
+
+        css = (css === null) ?
+                ruleSetCSS :  ///
+                  `${css}${ruleSetCSS}`;
+
+        return css;
+      }, null);
+    }
+
+    return css;
+  }
+
+  static fromNothing() {
+    const array = [],
+          ruleSets = new RuleSets(array);
+
+    return ruleSets;
+  }
+
+  static fromNodeAndTokens(node, tokens) {
+    const ruleSetNonTerminalNodes = ruleSetNonTerminalNodesQuery(node),
+          array = ruleSetNonTerminalNodes.map((ruleSetNonTerminalNode) => {
+            const node = ruleSetNonTerminalNode, ///
+                  ruleSet = RuleSet.fromRuleSetsNodeAndTokens(RuleSets, node, tokens);
+
+            return ruleSet;
+          }),
+          ruleSets = new RuleSets(array);
+
+    return ruleSets;
+  }
+}