highmark-markdown 0.0.273 → 0.0.277

package/src/example/view/div/tabButtons.js

@@ -0,0 +1,73 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+import { Element } from "easy";
+
+import MarkdownTabButton from "../button/tab/markdown";
+import MarkdownStyleTabButton from "../button/tab/markdownStyle";
+
+import { MARKDOWN_CUSTOM_EVENT_TYPE, MARKDOWN_STYLE_CUSTOM_EVENT_TYPE } from "../../../customEventTypes";
+
+class TabButtonsDiv extends Element {
+  markdownStyleTabButtonClickHandler = (event, element) => {
+    this.markdownStyle(event, element);
+  }
+
+  markdownTabButtonClickHandler = (event, element) => {
+    this.markdown(event, element);
+  }
+
+  markdownStyle(event = null, element = null) {
+    this.enableMarkdownTabButton();
+    this.disableMarkdownStyleTabButton();
+
+    const eventType = MARKDOWN_STYLE_CUSTOM_EVENT_TYPE;
+
+    this.callCustomHandlers(eventType, event, element);
+  }
+
+  markdown(event = null, element = null) {
+    this.disableMarkdownTabButton();
+    this.enableMarkdownStyleTabButton();
+
+    const eventType = MARKDOWN_CUSTOM_EVENT_TYPE;
+
+    this.callCustomHandlers(eventType, event, element);
+  }
+
+  didMount() {
+    this.markdown();
+  }
+
+  willUnmount() {
+    ///
+  }
+
+  childElements() {
+    return ([
+
+      <MarkdownTabButton onClick={this.markdownTabButtonClickHandler} />,
+      <MarkdownStyleTabButton onClick={this.markdownStyleTabButtonClickHandler} />
+
+    ]);
+  }
+
+  initialise() {
+    this.assignContext();
+  }
+
+  static tagName = "div";
+
+  static defaultProperties = {
+    className: "tab-buttons"
+  };
+}
+
+export default withStyle(TabButtonsDiv)`
+
+  display: grid;
+  grid-template-rows: auto;
+  grid-template-columns: 1fr 1fr;  
+  
+`;

package/src/example/view/textarea/css.js

@@ -4,7 +4,7 @@ import withStyle from "easy-with-style";  ///
 
 import Textarea from "../textarea";
 
-class CSSTreeTextarea extends Textarea {
+class CSSTextarea extends Textarea {
   setCSS(css) {
     const value = css;  ///
 
@@ -26,7 +26,7 @@ class CSSTreeTextarea extends Textarea {
   };
 }
 
-export default withStyle(CSSTreeTextarea)`
+export default withStyle(CSSTextarea)`
 
   height: 24rem;
   

package/src/example/view/textarea/markdown.js

@@ -36,6 +36,7 @@ class MarkdownTextarea extends Textarea {
 
 export default withStyle(MarkdownTextarea)`
 
+  width: 100%;
   height: 24rem;
   
 `;

package/src/example/view/textarea/markdownStyle.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import withStyle from "easy-with-style";
+import withStyle from "easy-with-style";  ///
 
 import Textarea from "../textarea";
 
@@ -36,6 +36,7 @@ class MarkdownStyleTextarea extends Textarea {
 
 export default withStyle(MarkdownStyleTextarea)`
 
+  width: 100%;
   height: 24rem;
   
 `;

package/src/example/view/textarea/parseTree/markdown.js

@@ -0,0 +1,19 @@
+"use strict";
+
+import ParseTreeTextarea from "../../textarea/parseTree";
+
+export default class MarkdownParseTreeTextarea extends ParseTreeTextarea {
+  parentContext() {
+    const clearMarkdownParseTreeTextarea = this.clear.bind(this), ///
+          updateMarkdownParseTreeTextarea = this.update.bind(this); ///
+
+    return ({
+      clearMarkdownParseTreeTextarea,
+      updateMarkdownParseTreeTextarea
+    });
+  }
+
+  static defaultProperties = {
+    className: "markdown"
+  };
+};

package/src/example/view/textarea/parseTree/markdownStyle.js

@@ -0,0 +1,19 @@
+"use strict";
+
+import ParseTreeTextarea from "../../textarea/parseTree";
+
+export default class MarkdownStyleParseTreeTextarea extends ParseTreeTextarea {
+  parentContext() {
+    const clearMarkdownStyleParseTreeTextarea = this.clear.bind(this), ///
+          updateMarkdownStyleParseTreeTextarea = this.update.bind(this); ///
+
+    return ({
+      clearMarkdownStyleParseTreeTextarea,
+      updateMarkdownStyleParseTreeTextarea
+    });
+  }
+
+  static defaultProperties = {
+    className: "markdown-style"
+  };
+};

package/src/example/view/textarea/parseTree.js

@@ -0,0 +1,44 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+import Textarea from "../textarea";
+
+import { EMPTY_STRING } from "../../constants";
+
+class ParseTreeTextarea extends Textarea {
+  update(parseTree) {
+    const parseTreeString = parseTree.asString(),
+          value = parseTreeString;  ///
+
+    this.setValue(value);
+  }
+
+  clear() {
+    const value = EMPTY_STRING;
+
+    this.setValue(value);
+  }
+
+  parentContext() {
+    const setCSS = this.setCSS.bind(this);
+
+    return ({
+      setCSS
+    });
+  }
+
+  static defaultProperties = {
+    readOnly: true,
+    className: "parse-tree",
+    spellCheck: "false"
+  };
+}
+
+export default withStyle(ParseTreeTextarea)`
+
+  width: 100%;
+  height: 48rem;
+  margin-top: 1rem;
+  
+`;

package/src/example/view/xmp.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import withStyle from "easy-with-style";
+import withStyle from "easy-with-style";  ///
 
 import { Element } from "easy";
 

package/src/example/view.js

@@ -3,22 +3,33 @@
 import withStyle from "easy-with-style";  ///
 
 import { Element } from "easy";
-import { MarkdownLexer, MarkdownParser } from "../index";
 import { RowsDiv, ColumnDiv, ColumnsDiv, VerticalSplitterDiv } from "easy-layout";
+import { MarkdownLexer, MarkdownParser, MarkdownStyleLexer, MarkdownStyleParser } from "../index";
 
 import XMP from "./view/xmp";
 import PreviewDiv from "./view/div/preview";
 import SubHeading from "./view/subHeading";
 import CSSTextarea from "./view/textarea/css";
+import TabButtonsDiv from "./view/div/tabButtons";
 import LeftSizeableDiv from "./view/div/sizeable/left";
-import MarkdownTextarea from "./view/textarea/markdown";
-import MarkdownStyleTextarea from "./view/textarea/markdownStyle";
+import MarkdownContainerDiv from "./view/div/container/markdown";
+import MarkdownStyleContainerDiv from "./view/div/container/markdownStyle";
 
 const markdownLexer = MarkdownLexer.fromNothing(),
-      markdownParser = MarkdownParser.fromNothing();
+      markdownParser = MarkdownParser.fromNothing(),
+      markdownStyleLexer = MarkdownStyleLexer.fromNothing(),
+      markdownStyleParser = MarkdownStyleParser.fromNothing();
 
 class View extends Element {
-  keyUpHandler = (event, element) => {
+  markdownStyleCustomHandler = (event, element) => {
+    this.markdownStyle();
+  }
+
+  markdownCustomHandler = (event, element) => {
+    this.markdown();
+  }
+
+  keyUpCustomHandler = (event, element) => {
     this.update();
   }
 
@@ -28,13 +39,27 @@ class View extends Element {
           css = markdownStyleElement.update(markdownStyle);
 
     this.setCSS(css);
+
+    const lexer = markdownStyleLexer, ///
+          parser = markdownStyleParser, ///
+          content = markdownStyle,  ///
+          tokens = lexer.tokenise(content),
+          node = parser.parse(tokens);
+
+    if (node !== null) {
+      const parseTree = node.asParseTree(tokens);
+
+      this.updateMarkdownStyleParseTreeTextarea(parseTree);
+    } else {
+      this.clearMarkdownStyleParseTreeTextarea();
+    }
   }
 
   updateMarkdown() {
     const markdown = this.getMarkdown(),
+          lexer = markdownLexer,  ///
+          parser =  markdownParser, ///
           content = markdown, ///
-          lexer = markdownLexer,
-          parser =  markdownParser,
           tokens = lexer.tokenise(content),
           node = parser.parse(tokens);
 
@@ -80,13 +105,29 @@ class View extends Element {
       this.updateXMP(htmls);
 
       this.updatePreviewDiv(domElements);
+
+      const parseTree = node.asParseTree(tokens);
+
+      this.updateMarkdownParseTreeTextarea(parseTree);
     } else {
       this.clearXMP();
 
       this.clearPreviewDiv();
+
+      this.clearMarkdownParseTreeTextarea();
     }
   }
 
+  markdownStyle() {
+    this.hideMarkdownContainerDiv();
+    this.showMarkdownStyleContainerDiv();
+  }
+
+  markdown() {
+    this.showMarkdownContainerDiv();
+    this.hideMarkdownStyleContainerDiv();
+  }
+
   update() {
     this.updateMarkdown();
     this.updateMarkdownStyle();
@@ -97,14 +138,9 @@ class View extends Element {
 
       <ColumnsDiv>
         <LeftSizeableDiv>
-          <SubHeading>
-            Markdown
-          </SubHeading>
-          <MarkdownTextarea onKeyUp={this.keyUpHandler} />
-          <SubHeading>
-            Markdown style
-          </SubHeading>
-          <MarkdownStyleTextarea onKeyUp={this.keyUpHandler} />
+          <TabButtonsDiv onCustomMarkdown={this.markdownCustomHandler} onCustomMarkdownStyle={this.markdownStyleCustomHandler} />
+          <MarkdownContainerDiv onCustomKeyUp={this.keyUpCustomHandler} />
+          <MarkdownStyleContainerDiv onCustomKeyUp={this.keyUpCustomHandler} />
         </LeftSizeableDiv>
         <VerticalSplitterDiv/>
         <ColumnDiv>
@@ -145,8 +181,9 @@ class View extends Element {
   static initialMarkdownStyle = `min-height: initial;
 `;
 
-  static initialMarkdown = `https://occam.science
-  
+  static initialMarkdown = `\`\`\`
+git clone git\\@github.com:djalbat/the-occam-user-manual.git
+\`\`\`
 `;
 
   static tagName = "div";