highmark-markdown 1.0.169 → 1.0.170

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

@@ -24,9 +24,9 @@ class HTMLDiv extends Element {
 
 export default withStyle(HTMLDiv)`
 
+  height: 100%;
   border: 1px solid darkgrey;
   overflow: scroll;
   position: relative;
-  min-height: 48rem;
   
 `;

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

@@ -90,8 +90,8 @@ class PageButtonsDiv extends Element {
 
 export default withStyle(PageButtonsDiv)`
 
-  top: 1rem;
-  right: 1rem;
+  top: 7rem;
+  right: 3rem;
   z-index: 1;
   position: absolute;
   

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

@@ -4,8 +4,6 @@ import withStyle from "easy-with-style";  ///
 
 import { Element } from "easy";
 
-import PageButtonsDiv from "../div/pageButtons";
-
 class PreviewDiv extends Element {
   getParentDOMElement() {
     const domElement = this.getDOMElement(),
@@ -61,17 +59,6 @@ class PreviewDiv extends Element {
     });
   }
 
-  childElements() {
-    const { onCustomPageUpdate } = this.properties,
-          pageUpdateCustomHandler = onCustomPageUpdate; ///
-
-    return (
-
-      <PageButtonsDiv onCustomPageUpdate={pageUpdateCustomHandler} />
-
-    );
-  }
-
   parentContext() {
     const context = this.getContext(),
           clearPreviewDiv = this.clear.bind(this), ///
@@ -90,10 +77,6 @@ class PreviewDiv extends Element {
 
   static tagName = "div";
 
-  static ignoredProperties = [
-    "onCustomPageUpdate"
-  ];
-
   static defaultProperties = {
     className: "preview"
   };

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

@@ -28,6 +28,6 @@ class CSSTextarea extends Textarea {
 
 export default withStyle(CSSTextarea)`
 
-  height: 48rem;
+  height: 100%;
   
 `;

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

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

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

@@ -36,7 +36,7 @@ class MarkdownStyleTextarea extends Textarea {
 
 export default withStyle(MarkdownStyleTextarea)`
 
-  width: 100%;
-  height: 24rem;
+  resize: vertical;
+  min-height: 12rem;
   
 `;

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

@@ -0,0 +1,36 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+import MarkdownParseTreeTextarea from "../../../textarea/parseTree/markdown";
+
+class InnerMarkdownParseTreeTextarea extends MarkdownParseTreeTextarea {
+  update(parseTree) {
+    parseTree.shiftLine();
+    parseTree.shiftLine();
+
+    super.update(parseTree);
+
+  }
+
+  parentContext() {
+    const clearInnerMarkdownParseTreeTextarea = this.clear.bind(this), ///
+          updateInnerMarkdownParseTreeTextarea = this.update.bind(this); ///
+
+    return ({
+      clearInnerMarkdownParseTreeTextarea,
+      updateInnerMarkdownParseTreeTextarea
+    });
+  }
+
+  static defaultProperties = {
+    className: "outer"
+  };
+}
+
+export default withStyle(InnerMarkdownParseTreeTextarea)`
+
+  margin-top: 1rem;
+  height: 32rem;
+  
+`;

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

@@ -0,0 +1,27 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+import MarkdownParseTreeTextarea from "../../../textarea/parseTree/markdown";
+
+class OuterMarkdownParseTreeTextarea extends MarkdownParseTreeTextarea {
+  parentContext() {
+    const clearOuterMarkdownParseTreeTextarea = this.clear.bind(this), ///
+          updateOuterMarkdownParseTreeTextarea = this.update.bind(this); ///
+
+    return ({
+      clearOuterMarkdownParseTreeTextarea,
+      updateOuterMarkdownParseTreeTextarea
+    });
+  }
+
+  static defaultProperties = {
+    className: "outer"
+  };
+}
+
+export default withStyle(OuterMarkdownParseTreeTextarea)`
+
+  flex: 1;
+  
+`;

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

@@ -3,17 +3,7 @@
 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

@@ -1,8 +1,10 @@
 "use strict";
 
+import withStyle from "easy-with-style";  ///
+
 import ParseTreeTextarea from "../../textarea/parseTree";
 
-export default class MarkdownStyleParseTreeTextarea extends ParseTreeTextarea {
+class MarkdownStyleParseTreeTextarea extends ParseTreeTextarea {
   parentContext() {
     const clearMarkdownStyleParseTreeTextarea = this.clear.bind(this), ///
           updateMarkdownStyleParseTreeTextarea = this.update.bind(this); ///
@@ -16,4 +18,10 @@ export default class MarkdownStyleParseTreeTextarea extends ParseTreeTextarea {
   static defaultProperties = {
     className: "markdown-style"
   };
-};
+}
+
+export default withStyle(MarkdownStyleParseTreeTextarea)`
+
+  flex: 1;
+  
+`;

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

@@ -37,8 +37,6 @@ class ParseTreeTextarea extends Textarea {
 
 export default withStyle(ParseTreeTextarea)`
 
-  width: 100%;
   height: 48rem;
-  margin-top: 1rem;
   
 `;

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

@@ -41,6 +41,6 @@ class PlainTextTextarea extends Textarea {
 
 export default withStyle(PlainTextTextarea)`
 
-  height: 48rem;
+  height: 100%;
   
-`;
+`;

package/src/example/view/textarea.js

@@ -8,7 +8,7 @@ export default withStyle(Textarea)`
 
   width: 100%;
   border: 1px solid darkgrey;
-  resize: vertical;
+  resize: none;
   padding: 0.25rem;
   font-size: 1.2rem;
   min-height: 24rem;

package/src/example/view.js

@@ -3,25 +3,33 @@
 import withStyle from "easy-with-style";  ///
 
 import { Element } from "easy";
+import { nodeUtilities } from "occam-dom";
 import { RowsDiv, ColumnDiv, ColumnsDiv, VerticalSplitterDiv } from "easy-layout";
 import { MarkdownLexer, MarkdownParser, MarkdownStyleLexer, MarkdownStyleParser } from "../index";
 
+import queries from "../queries";
 import importer from "./importer";
 import indexOptions from "./indexOptions";
+import PageButtonsDiv from "./view/div/pageButtons";
 import LeftSizeableDiv from "./view/div/sizeable/left";
 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 ClassFromOuterNode from "../classFromOuterNode";
 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 InnerMarkdownParseTreeTextarea from "./view/textarea/parseTree/markdown/inner";
 
 import { defaultContent } from "./importer";
+import { nodesFromNodeAndQueries } from "../utilities/query";
 import { LINES_PER_PAGE, CONTENTS_DEPTH, CHARACTERS_PER_LINE } from "./constants";
 import { postprocess, divisionMarkdownNodesFromMarkdownNodes } from "../utilities/processing";
 
+const { topmostNodeFromOuterNodes } = nodeUtilities;
+
 const markdownLexer = MarkdownLexer.fromNothing(),
       markdownParser = MarkdownParser.fromNothing(),
       markdownStyleLexer = MarkdownStyleLexer.fromNothing(),
@@ -69,7 +77,10 @@ class View extends Element {
 
   clearPage() {
     this.clearXMP();
+
     this.clearPreviewDiv();
+
+    this.clearInnerMarkdownParseTreeTextarea();
   }
 
   updatePage(index) {
@@ -79,9 +90,15 @@ class View extends Element {
           context = {
             tokens
           },
-          length = null,
-          html = divisionMarkdownNode.asHTML(context),
-          plainText = divisionMarkdownNode.asPlainText(context);
+          length = null;
+
+    const node = divisionMarkdownNode,  ///
+          nodes = nodesFromNodeAndQueries(node, queries),
+          topmostHTMLNode = topmostNodeFromOuterNodes(ClassFromOuterNode, nodes),
+          parseTree = topmostHTMLNode.asParseTree(),
+          html = topmostHTMLNode.asHTML(context),
+          plainText = divisionMarkdownNode.asPlainText(context),
+          innerMarkdownParseTree = parseTree; ///
 
     this.updateXMP(html);
 
@@ -90,6 +107,8 @@ class View extends Element {
     this.updatePageButtonsDiv(length, index);
 
     this.updatePlainTextTextarea(plainText);
+
+    this.updateInnerMarkdownParseTreeTextarea(innerMarkdownParseTree);
   }
 
   updateMarkdown() {
@@ -123,9 +142,10 @@ class View extends Element {
 
       this.setDivisionMarkdownNodes(divisionMarkdownNodes);
 
-      const parseTree = divisionMarkdownNode.asParseTree(tokens);
+      const parseTree = divisionMarkdownNode.asParseTree(tokens),
+            outerMarkdownParseTree = parseTree; ///
 
-      this.updateMarkdownParseTreeTextarea(parseTree);
+      this.updateOuterMarkdownParseTreeTextarea(outerMarkdownParseTree);
 
       const index = 0,
             length = divisionMarkdownNodes.length;
@@ -142,7 +162,7 @@ class View extends Element {
 
       this.clearPlainTextTextarea();
 
-      this.clearMarkdownParseTreeTextarea();
+      this.clearOuterMarkdownParseTreeTextarea();
 
       const divisionMarkdownNodes = null;
 
@@ -262,10 +282,12 @@ class View extends Element {
                                 onCustomPreview={this.previewCustomHandler}
                                 onCustomPlainText={this.plainTextCustomHandler}
             />
+            <PageButtonsDiv onCustomPageUpdate={this.pageUpdateCustomHandler} />
             <CSSContainerDiv/>
             <HTMLContainerDiv/>
-            <PreviewContainerDiv onCustomPageUpdate={this.pageUpdateCustomHandler} />
+            <PreviewContainerDiv/>
             <PlainTextContainerDiv/>
+            <InnerMarkdownParseTreeTextarea/>
           </RowsDiv>
         </ColumnDiv>
       </ColumnsDiv>
@@ -291,6 +313,15 @@ class View extends Element {
     this.css();
   }
 
+  static initialMarkdown = defaultContent;  ///
+
+  static initialMarkdownStyle = `width: 100%;
+height: 199%;  
+position: absolute;
+min-height: 100%;  
+padding-top: 5rem;  
+`;
+
   static tagName = "div";
 
   static ignoredProperties = [
@@ -300,18 +331,6 @@ class View extends Element {
   static defaultProperties = {
     className: "view"
   };
-
-  static initialMarkdown = defaultContent;  ///
-
-  static initialMarkdownStyle = `
-
-width: 100%;
-height: 199%;  
-position: absolute;
-min-height: 100%;  
-padding-top: 5rem;  
-
-`;
 }
 
 export default withStyle(View)`

package/src/node/html/anchor.js

@@ -0,0 +1,53 @@
+"use strict";
+
+import HTMLNode from "../../node/html";
+
+import { ID_ATTRIBUTE_NAME } from "../../attributeNames";
+
+export default class AnchorHTMLNode extends HTMLNode {
+  content(context) { return this.outerNode.content(context); }
+
+  attributeName(context) {
+    const attributeName = ID_ATTRIBUTE_NAME;
+
+    return attributeName;
+  }
+
+  attributeValue(context) {
+    const attributeValue = `${this.prepend}-${this.identifier}`;
+
+    return attributeValue;
+  }
+
+  asHTML(indent, context) {
+    if (context === undefined) {
+      context = indent; ///
+
+      indent = null;
+    }
+
+    indent = this.adjustIndent(indent);
+
+    const childNodesHTML = this.childNodesAsHTML(indent, context),
+          startingTag = this.startingTag(context),
+          closingTag = this.closingTag(context),
+          html = (indent === null) ?
+                   `${startingTag}${childNodesHTML}${closingTag}` :
+                     `${indent}${startingTag}
+  ${childNodesHTML}${indent}${closingTag}
+  `;
+
+    return html;
+  }
+
+  childNodesAsHTML(indent, context) {
+    const content = this.content(context),
+          childNodesHTML = content; ///
+
+    return childNodesHTML;
+  }
+
+  static fromNothing() { return HTMLNode.fromNothing(AnchorHTMLNode); }
+
+  static fromOuterNode(outerNode) { return HTMLNode.fromOuterNode(AnchorHTMLNode, outerNode); }
+}

package/src/node/html/blockLine.js

@@ -0,0 +1,27 @@
+"use strict";
+
+import HTMLNode from "../../node/html";
+
+export default class BlockLineHTMLNode extends HTMLNode {
+  content(context) { return this.outerNode.content(context); }
+
+  asHTML(indent, context) {
+    const childNodesHTML = this.childNodesAsHTML(indent, context),
+          startingTag = this.startingTag(context),
+          closingTag = this.closingTag(context),
+          html = `${startingTag}${childNodesHTML}${closingTag}`;
+
+    return html;
+  }
+
+  childNodesAsHTML(indent, context) {
+    const content = this.content(context),
+          childNodesHTML = content; ///
+
+    return childNodesHTML;
+  }
+
+  static fromNothing() { return HTMLNode.fromNothing(BlockLineHTMLNode); }
+
+  static fromOuterNode(outerNode) { return HTMLNode.fromOuterNode(BlockLineHTMLNode, outerNode); }
+}

package/src/node/html/blockListing.js

@@ -0,0 +1,20 @@
+"use strict";
+
+import HTMLNode from "../../node/html";
+
+export default class BlockListingHTMLNode extends HTMLNode {
+  className(context) { return this.outerNode.className(context); }
+
+  asHTML(indent, context) {
+    const childNodesHTML = this.childNodesAsHTML(indent, context),
+          startingTag = this.startingTag(context),
+          closingTag = this.closingTag(context),
+          html = `${startingTag}${childNodesHTML}${closingTag}`;
+
+    return html;
+  }
+
+  static fromNothing() { return HTMLNode.fromNothing(BlockListingHTMLNode); }
+
+  static fromOuterNode(outerNode) { return HTMLNode.fromOuterNode(BlockListingHTMLNode, outerNode); }
+}

package/src/node/html/blockListingEnd.js

@@ -0,0 +1,11 @@
+"use strict";
+
+import HHTMLNode from "../../node/html";
+
+export default class BlockListingHEndHTMLNode extends HHTMLNode {
+  className(context) { return this.outerNode.className(context); }
+
+  static fromNothing() { return HHTMLNode.fromNothing(BlockListingHEndHTMLNode); }
+
+  static fromOuterNode(outerNode) { return HHTMLNode.fromOuterNode(BlockListingHEndHTMLNode, outerNode); }
+}

package/src/node/html/blockListingStart.js

@@ -0,0 +1,11 @@
+"use strict";
+
+import HHTMLNode from "../../node/html";
+
+export default class BlockListingHStartHTMLNode extends HHTMLNode {
+  className(context) { return this.outerNode.className(context); }
+
+  static fromNothing() { return HHTMLNode.fromNothing(BlockListingHStartHTMLNode); }
+
+  static fromOuterNode(outerNode) { return HHTMLNode.fromOuterNode(BlockListingHStartHTMLNode, outerNode); }
+}

package/src/node/html/className.js

@@ -0,0 +1,11 @@
+"use strict";
+
+import HTMLNode from "../../node/html";
+
+export default class ClassNameHTMLNode extends HTMLNode {
+  className(context) { return this.outerNode.className(context); }
+
+  static fromNothing() { return HTMLNode.fromNothing(ClassNameHTMLNode); }
+
+  static fromOuterNode(outerNode) { return HTMLNode.fromOuterNode(ClassNameHTMLNode, outerNode); }
+}

package/src/node/html/comma.js

@@ -0,0 +1,18 @@
+"use strict";
+
+import HTMLNode from "../../node/html";
+
+export default class CommaHTMLNode extends HTMLNode {
+  content(context) { return this.outerNode.content(context); }
+
+  asHTML(indent, context) {
+    const content = this.content(context),
+          html = content; ///
+
+    return html;
+  }
+
+  static fromNothing() { return HTMLNode.fromNothing(CommaHTMLNode); }
+
+  static fromOuterNode(outerNode) { return HTMLNode.fromOuterNode(CommaHTMLNode, outerNode); }
+}

package/src/node/html/contentsLink.js

@@ -0,0 +1,28 @@
+"use strict";
+
+import HTMLNode from "../../node/html";
+
+import { CONTENTS_PREPEND } from "../../prepends";
+import { HREF_ATTRIBUTE_NAME } from "../../attributeNames";
+
+export default class ContentsLinkHTMLNode extends HTMLNode {
+  getIdentifier() { return this.outerNode.getIdentifier(); }
+
+  attributeName(context) {
+    const attributeName = HREF_ATTRIBUTE_NAME;
+
+    return attributeName;
+  }
+
+  attributeValue(context) {
+    const prepend = CONTENTS_PREPEND,
+          identifier = this.getIdentifier(),
+          attributeValue = `#${prepend}-${identifier}`;
+
+    return attributeValue;
+  }
+
+  static fromNothing() { return HTMLNode.fromNothing(ContentsLinkHTMLNode); }
+
+  static fromOuterNode(outerNode) { return HTMLNode.fromOuterNode(ContentsLinkHTMLNode, outerNode); }
+}

package/src/node/html/directive/pageNumber.js

@@ -0,0 +1,55 @@
+"use strict";
+
+import HTMLNode from "../../html";
+
+export default class PageNumberDirectiveHTMLNode extends HTMLNode {
+  getRuleName() {}  ///
+
+  tagName(context) {} ///
+
+  className(context) {} ///
+
+  closingTag(context) {}  ///
+
+  startingTag(context) {} ///
+
+  selfClosingTag(context) {}  ///
+
+  attributeName(context) {} ///
+
+  attributeValue(context) {}  ///
+
+  adjustIndent(indent) {} ///
+
+  getPageNumber() { return this.outerNode.getPageNumber(); }
+
+  content(context) {
+    const pageNumber = this.getPageNumber(),
+          content = pageNumber;
+
+    return content;
+  }
+
+  asHTML(indent, context) {
+    indent = this.adjustIndent(indent);
+
+    const childNodesHTML = this.childNodesAsHTML(indent, context),
+          startingTag = this.startingTag(context),
+          closingTag = this.closingTag(context),
+          html = `${indent}${startingTag}${childNodesHTML}${closingTag}
+`;
+
+    return html;
+  }
+
+  childNodesAsHTML(indent, context) {
+    const content = this.content(context),
+          childNodesHTML = content; ///
+
+    return childNodesHTML;
+  }
+
+  static fromNothing() { return HTMLNode.fromNothing(PageNumberDirectiveHTMLNode); }
+
+  static fromOuterNode(outerNode) { return HTMLNode.fromOuterNode(PageNumberDirectiveHTMLNode, outerNode); }
+}

package/src/node/html/item/ordered.js

@@ -0,0 +1,26 @@
+"use strict";
+
+import HTMLNode from "../../html";
+
+import { VALUE_ATTRIBUTE_NAME } from "../../../attributeNames";
+
+export default class OrderedItemHTMLNode extends HTMLNode {
+  value(context) { return this.outerNode.value(context); }
+
+  attributeName(context) {
+    const attributeName = VALUE_ATTRIBUTE_NAME;
+
+    return attributeName;
+  }
+
+  attributeValue(context) {
+    const value = this.value(context),
+          attributeValue = value; ///
+
+    return attributeValue;
+  }
+
+  static fromNothing() { return HTMLNode.fromNothing(OrderedItemHTMLNode); }
+
+  static fromOuterNode(outerNode) { return HTMLNode.fromOuterNode(OrderedItemHTMLNode, outerNode); }
+}

package/src/node/html/topmost.js

@@ -0,0 +1,20 @@
+"use strict";
+
+import HTMLNode from "../../node/html";
+
+export default class TopmostHTMLNode extends HTMLNode {
+  asHTML(context) {
+    let html;
+
+    const indent = null,
+          childNodesHTML = this.childNodesAsHTML(indent, context);
+
+    html = childNodesHTML;  ///
+
+    return html;
+  }
+
+  static fromNothing() { return HTMLNode.fromNothing(TopmostHTMLNode); }
+
+  static fromOuterNode(outerNode) { return HTMLNode.fromOuterNode(TopmostHTMLNode, outerNode); }
+}