highmark-markdown 1.0.40 → 1.0.42

package/src/example/view.js

@@ -3,19 +3,19 @@
 import withStyle from "easy-with-style";  ///
 
 import { Element } from "easy";
+import { RowsDiv, ColumnDiv, ColumnsDiv, VerticalSplitterDiv } from "easy-layout";
 import { MarkdownLexer, MarkdownParser, MarkdownStyleLexer, MarkdownStyleParser } from "../index";
-import { RowDiv, RowsDiv, ColumnDiv, ColumnsDiv, VerticalSplitterDiv, HorizontalSplitterDiv } from "easy-layout";
 
-import HTMLDiv from "./view/div/html";
 import importer from "./importer";
-import PreviewDiv from "./view/div/preview";
-import SubHeading from "./view/subHeading";
-import CSSTextarea from "./view/textarea/css";
 import indexOptions from "./indexOptions";
-import TabButtonsDiv from "./view/div/tabButtons";
 import LeftSizeableDiv from "./view/div/sizeable/left";
-import RightSizeableDiv from "./view/div/sizeable/right";
+import CSSContainerDiv from "./view/div/container/css";
+import HTMLContainerDiv from "./view/div/container/html";
+import LeftTabButtonsDiv from "./view/div/tabButtons/left";
+import RightTabButtonsDiv from "./view/div/tabButtons/right";
+import PreviewContainerDiv from "./view/div/container/preview";
 import MarkdownContainerDiv from "./view/div/container/markdown";
+import PlainTextContainerDiv from "./view/div/container/plainText";
 import MarkdownStyleContainerDiv from "./view/div/container/markdownStyle";
 
 import { defaultContent } from "./importer";
@@ -38,36 +38,58 @@ class View extends Element {
     this.updatePage(index);
   }
 
+  plainTextCustomHandler = (event, element) => {
+    this.plainText();
+  }
+
   markdownCustomHandler = (event, element) => {
     this.markdown();
   }
 
+  previewCustomHandler = (event, element) => {
+    this.preview();
+  }
+
   keyUpCustomHandler = (event, element) => {
     this.update();
   }
 
-  updateMarkdownStyle() {
-    const { markdownStyleElement } = this.properties,
-          markdownStyle = this.getMarkdownStyle(),
-          css = markdownStyleElement.update(markdownStyle);
+  htmlCustomHandler = (event, element) => {
+    this.html();
+  }
 
-    this.setCSS(css);
+  cssCustomHandler = (event, element) => {
+    this.css();
+  }
 
-    const lexer = markdownStyleLexer, ///
-          parser = markdownStyleParser, ///
-          content = markdownStyle,  ///
-          tokens = lexer.tokenise(content),
-          startRule = parser.getStartRule(),
-          startOfContent = true,
-          node = parser.parse(tokens, startRule, startOfContent);
+  update() {
+    this.updateMarkdown();
+    this.updateMarkdownStyle();
+  }
 
-    if (node !== null) {
-      const parseTree = node.asParseTree(tokens);
+  clearPage() {
+    this.clearXMP();
+    this.clearPreviewDiv();
+  }
 
-      this.updateMarkdownStyleParseTreeTextarea(parseTree);
-    } else {
-      this.clearMarkdownStyleParseTreeTextarea();
-    }
+  updatePage(index) {
+    const divisionMarkdownNodes = this.getDivisionMarkdownNodes(),
+          divisionMarkdownNode = divisionMarkdownNodes[index],
+          tokens = this.getTokens(),
+          context = {
+            tokens
+          },
+          length = null,
+          html = divisionMarkdownNode.asHTML(context),
+          plainText = divisionMarkdownNode.asPlainText(context);
+
+    this.updateXMP(html);
+
+    this.updatePreviewDiv(divisionMarkdownNode, context);
+
+    this.updatePageButtonsDiv(length, index);
+
+    this.updatePlainTextTextarea(plainText);
   }
 
   updateMarkdown() {
@@ -97,11 +119,8 @@ class View extends Element {
               tokensFromContent,
               charactersPerLine
             },
-            // markdownNodes = postprocess(divisionMarkdownNode, context),
-            // divisionMarkdownNodes = divisionMarkdownNodesFromMarkdownNodes(markdownNodes);
-            divisionMarkdownNodes = [
-              divisionMarkdownNode
-            ];
+            markdownNodes = postprocess(divisionMarkdownNode, context),
+            divisionMarkdownNodes = divisionMarkdownNodesFromMarkdownNodes(markdownNodes);
 
       this.setDivisionMarkdownNodes(divisionMarkdownNodes);
 
@@ -122,6 +141,8 @@ class View extends Element {
 
       this.clearPageButtonsDiv();
 
+      this.clearPlainTextTextarea();
+
       this.clearMarkdownParseTreeTextarea();
 
       const divisionMarkdownNodes = null;
@@ -130,27 +151,28 @@ class View extends Element {
     }
   }
 
-  updatePage(index) {
-    const divisionMarkdownNodes = this.getDivisionMarkdownNodes(),
-          divisionMarkdownNode = divisionMarkdownNodes[index],
-          tokens = this.getTokens(),
-          context = {
-            tokens
-          },
-          length = null,
-          html = divisionMarkdownNode.asHTML(context);
-
-    this.updateXMP(html);
+  updateMarkdownStyle() {
+    const { markdownStyleElement } = this.properties,
+          markdownStyle = this.getMarkdownStyle(),
+          css = markdownStyleElement.update(markdownStyle);
 
-    this.updatePreviewDiv(divisionMarkdownNode, context);
+    this.setCSS(css);
 
-    this.updatePageButtonsDiv(length, index);
-  }
+    const lexer = markdownStyleLexer, ///
+          parser = markdownStyleParser, ///
+          content = markdownStyle,  ///
+          tokens = lexer.tokenise(content),
+          startRule = parser.getStartRule(),
+          startOfContent = true,
+          node = parser.parse(tokens, startRule, startOfContent);
 
-  clearPage() {
-    this.clearXMP();
+    if (node !== null) {
+      const parseTree = node.asParseTree(tokens);
 
-    this.clearPreviewDiv();
+      this.updateMarkdownStyleParseTreeTextarea(parseTree);
+    } else {
+      this.clearMarkdownStyleParseTreeTextarea();
+    }
   }
 
   markdownStyle() {
@@ -158,14 +180,37 @@ class View extends Element {
     this.showMarkdownStyleContainerDiv();
   }
 
+  plainText() {
+    this.hideCSSContainerDiv();
+    this.hideHTMLContainerDiv();
+    this.hidePreviewContainerDiv();
+    this.showPlainTextContainerDiv();
+  }
+
   markdown() {
     this.showMarkdownContainerDiv();
     this.hideMarkdownStyleContainerDiv();
   }
 
-  update() {
-    this.updateMarkdown();
-    this.updateMarkdownStyle();
+  preview() {
+    this.hideCSSContainerDiv();
+    this.hideHTMLContainerDiv();
+    this.showPreviewContainerDiv();
+    this.hidePlainTextContainerDiv();
+  }
+
+  html() {
+    this.hideCSSContainerDiv();
+    this.showHTMLContainerDiv();
+    this.hidePreviewContainerDiv();
+    this.hidePlainTextContainerDiv();
+  }
+
+  css() {
+    this.showCSSContainerDiv();
+    this.hideHTMLContainerDiv();
+    this.hidePreviewContainerDiv();
+    this.hidePlainTextContainerDiv();
   }
 
   getTokens() {
@@ -207,32 +252,22 @@ class View extends Element {
 
       <ColumnsDiv>
         <LeftSizeableDiv>
-          <TabButtonsDiv onCustomMarkdown={this.markdownCustomHandler} onCustomMarkdownStyle={this.markdownStyleCustomHandler} />
+          <LeftTabButtonsDiv onCustomMarkdown={this.markdownCustomHandler} onCustomMarkdownStyle={this.markdownStyleCustomHandler} />
           <MarkdownContainerDiv onCustomKeyUp={this.keyUpCustomHandler} />
           <MarkdownStyleContainerDiv onCustomKeyUp={this.keyUpCustomHandler} />
         </LeftSizeableDiv>
         <VerticalSplitterDiv/>
         <ColumnDiv>
           <RowsDiv>
-            <RightSizeableDiv>
-              <SubHeading>
-                HTML
-              </SubHeading>
-              <HTMLDiv/>
-            </RightSizeableDiv>
-            <HorizontalSplitterDiv/>
-            <RowDiv>
-              <RowsDiv>
-                <SubHeading>
-                  CSS
-                </SubHeading>
-                <CSSTextarea/>
-                <SubHeading>
-                  Preview
-                </SubHeading>
-                <PreviewDiv onCustomPageUpdate={this.pageUpdateCustomHandler} />
-              </RowsDiv>
-            </RowDiv>
+            <RightTabButtonsDiv onCustomCSS={this.cssCustomHandler}
+                                onCustomHTML={this.htmlCustomHandler}
+                                onCustomPreview={this.previewCustomHandler}
+                                onCustomPlainText={this.plainTextCustomHandler}
+            />
+            <CSSContainerDiv/>
+            <HTMLContainerDiv/>
+            <PreviewContainerDiv onCustomPageUpdate={this.pageUpdateCustomHandler} />
+            <PlainTextContainerDiv/>
           </RowsDiv>
         </ColumnDiv>
       </ColumnsDiv>
@@ -254,6 +289,8 @@ class View extends Element {
     this.setMarkdownStyle(markdownStyle);
 
     this.update();
+
+    this.css();
   }
 
   static tagName = "div";
@@ -268,10 +305,14 @@ class View extends Element {
 
   static initialMarkdown = defaultContent;  ///
 
-  static initialMarkdownStyle = `width: 100%;
+  static initialMarkdownStyle = `
+
+width: 100%;
+height: 199%;  
 position: absolute;
 min-height: 100%;  
 padding-top: 5rem;  
+
 `;
 }
 

package/src/node/markdown/tableBodyCell.js

@@ -16,5 +16,14 @@ export default class TableBodyCellMarkdownNode extends MarkdownNode {
     return childNodesHTML;
   }
 
+  childNodesAsPlainText(indent, context) {
+    const childNodes = this.getChildNodes(),
+          firstChildNode = first(childNodes),
+          tableCellMarkdownNode = firstChildNode, ///
+          childNodesPlainText = tableCellMarkdownNode.childNodesAsPlainText(indent, context);
+
+    return childNodesPlainText;
+  }
+
   static fromRuleNameChildNodesAndOpacity(ruleName, childNodes, opacity) { return MarkdownNode.fromRuleNameChildNodesAndOpacity(TableBodyCellMarkdownNode, ruleName, childNodes, opacity); }
 }

package/src/node/markdown/tableHeadCell.js

@@ -16,5 +16,14 @@ export default class TableHeadCellMarkdownNode extends MarkdownNode {
     return childNodesHTML;
   }
 
+  childNodesAsPlainText(indent, context) {
+    const childNodes = this.getChildNodes(),
+          firstChildNode = first(childNodes),
+          tableCellMarkdownNode = firstChildNode, ///
+          childNodesPlainText = tableCellMarkdownNode.childNodesAsPlainText(indent, context);
+
+    return childNodesPlainText;
+  }
+
   static fromRuleNameChildNodesAndOpacity(ruleName, childNodes, opacity) { return MarkdownNode.fromRuleNameChildNodesAndOpacity(TableHeadCellMarkdownNode, ruleName, childNodes, opacity); }
 }

package/lib/example/view/subHeading.js

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
-        return _default;
-    }
-});
-var _easywithstyle = /*#__PURE__*/ _interop_require_default(require("easy-with-style"));
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n\n  margin: 1rem 0 0.5rem 0;\n  font-size: 2rem;\n  \n  :first-of-type {\n    margin-top: 0;\n  }\n\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-var SubHeading = _easywithstyle.default.h2(_templateObject());
-var _default = SubHeading;
-
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9leGFtcGxlL3ZpZXcvc3ViSGVhZGluZy5qcyJdLCJzb3VyY2VzQ29udGVudCI6WyJcInVzZSBzdHJpY3RcIjtcblxuaW1wb3J0IHdpdGhTdHlsZSBmcm9tIFwiZWFzeS13aXRoLXN0eWxlXCI7ICAvLy9cblxuY29uc3QgU3ViSGVhZGluZyA9IHdpdGhTdHlsZS5oMmBcblxuICBtYXJnaW46IDFyZW0gMCAwLjVyZW0gMDtcbiAgZm9udC1zaXplOiAycmVtO1xuICBcbiAgOmZpcnN0LW9mLXR5cGUge1xuICAgIG1hcmdpbi10b3A6IDA7XG4gIH1cblxuYDtcblxuZXhwb3J0IGRlZmF1bHQgU3ViSGVhZGluZztcbiJdLCJuYW1lcyI6WyJTdWJIZWFkaW5nIiwid2l0aFN0eWxlIiwiaDIiXSwibWFwcGluZ3MiOiJBQUFBOzs7OytCQWVBOzs7ZUFBQTs7O29FQWJzQjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUV0QixJQUFNQSxhQUFhQyxzQkFBUyxDQUFDQyxFQUFFO0lBVy9CLFdBQWVGIn0=

package/src/example/view/div/sizeable/right.js

@@ -1,19 +0,0 @@
-"use strict";
-
-import withStyle from "easy-with-style";  ///
-
-import { SizeableDiv } from "easy-layout";
-
-class RightSizeableDiv extends SizeableDiv {
-  static defaultProperties = {
-    className: "right"
-  };
-}
-
-export default withStyle(RightSizeableDiv)`
-
-  height: 32rem;
-  min-width: 1rem;
-  flex-direction: column;
-  
-`;

package/src/example/view/subHeading.js

@@ -1,16 +0,0 @@
-"use strict";
-
-import withStyle from "easy-with-style";  ///
-
-const SubHeading = withStyle.h2`
-
-  margin: 1rem 0 0.5rem 0;
-  font-size: 2rem;
-  
-  :first-of-type {
-    margin-top: 0;
-  }
-
-`;
-
-export default SubHeading;