highmark-markdown 1.0.183 → 1.0.185

package/src/example/importer.js

@@ -42,9 +42,11 @@ const INDEX_PATH = "index.md",
       INSTALLING_THE_CLI_PATH = "installing-the-cli.md",
       GETTING_TO_GRIPS_WITH_THE_IDE_PATH = "getting-to-grips-with-the-ide.md";
 
-export const initialMarkdown = `@ignore 
+export const initialMarkdown = `@ignore
 
 @include ${FRONT_MATTER_PATH}
+@include ${CONTENT_PATH}
+@include ${INDEX_PATH}
 `;
 
 const indexContent = `## Index
@@ -64,7 +66,8 @@ const indexContent = `## Index
       frontMatterContent = `@ignore
 
 @include ${HALF_TITLE_PATH}
-@include ${CONTENTS_PATH}`,
+@include ${CONTENTS_PATH}
+@include ${INTRODUCTION_PATH}`,
 
       introductionContent = `# Introduction
       
@@ -77,7 +80,7 @@ Constructor.
 
       gettingStartedContent = `# Getting started
       
-Another short paragraph with a reference to a footnote[^occam].
+A short paragraph with a reference to a footnote[^occam].
 
 [^occam]: The word Occam is used somewhat nebulously here.
 It is most often associated with Occam's IDE but in fact it encompasses a range of software and services.
@@ -85,13 +88,15 @@ This book explains these divers parts and there is a companion book, called The
 
 @footnotes
 
-@embed ${INSTALLING_THE_CLI_PATH}
-@embed ${GETTING_TO_GRIPS_WITH_THE_IDE_PATH}
+@include ${INSTALLING_THE_CLI_PATH}
+@include ${GETTING_TO_GRIPS_WITH_THE_IDE_PATH}
 
 @pageNumber
 `,
 
       installingTheCLIContent = `## Installing the CLI
+
+@pageNumber
 `,
 
       gettingToGripsWithTheIDEIContent = `## Getting to grips with the IDE
@@ -102,6 +107,7 @@ This book explains these divers parts and there is a companion book, called The
 1. As well as an...
 2. ...ordered list.
       
+@pageNumber
 `;
 
 const contentMap = {

package/src/example/indexOptions.js

@@ -26,103 +26,6 @@ const indexOptions = {
     "are",
     "as",
     "associated",
-    "at",
-    "between",
-    "boils",
-    "book",
-    "but",
-    "called",
-    "cannot",
-    "companion",
-    "considerable",
-    "contents",
-    "controlled",
-    "covers",
-    "day",
-    "detail",
-    "detailed",
-    "distinguish",
-    "divers",
-    "down",
-    "encompasses",
-    "end",
-    "expert",
-    "explains",
-    "explanation",
-    "explanations",
-    "fact",
-    "footnote",
-    "former",
-    "foundations",
-    "future",
-    "getting",
-    "goes",
-    "grips",
-    "has",
-    "have",
-    "here",
-    "how",
-    "i",
-    "ide",
-    "in",
-    "indeed",
-    "index",
-    "indexing",
-    "into",
-    "introduction",
-    "is",
-    "it",
-    "its",
-    "largely",
-    "least",
-    "limits",
-    "list",
-    "make",
-    "more",
-    "most",
-    "natural",
-    "near",
-    "nebulously",
-    "need",
-    "not",
-    "of",
-    "often",
-    "on",
-    "ordered",
-    "originally",
-    "own",
-    "paragraph",
-    "parts",
-    "possible",
-    "provide",
-    "purpose",
-    "range",
-    "reference",
-    "s",
-    "seemed",
-    "services",
-    "short",
-    "some",
-    "somewhat",
-    "started",
-    "subject",
-    "support",
-    "system",
-    "test",
-    "that",
-    "the",
-    "there",
-    "these",
-    "this",
-    "to",
-    "tried",
-    "underlying",
-    "unordered",
-    "use",
-    "useable",
-    "used",
-    "was",
-    "well",
     "which",
     "will",
     "with",

package/src/example/view/div/container/markdown.js

@@ -44,7 +44,7 @@ class MarkdownContainerDiv extends ContainerDiv {
 export default withStyle(MarkdownContainerDiv)`
 
   gap: 1rem;
-  height: 65rem;
+  height: 97rem;
   display: flex;
   flex-direction: column;
   justify-content: space-between;

package/src/example/view/div/container/markdownStyle.js

@@ -46,7 +46,7 @@ class MarkdownStyleContainerDiv extends ContainerDiv {
 export default withStyle(MarkdownStyleContainerDiv)`
 
   gap: 1rem;
-  height: 65rem;
+  height: 97rem;
   display: flex;
   flex-direction: column;
   justify-content: space-between;

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

@@ -23,7 +23,7 @@ class ContainerDiv extends Element {
 export default withStyle(ContainerDiv)`
 
   border: 1px solid black;
-  height: 32rem;
+  height: 48rem;
   padding: 1rem;
   overflow: hidden;
   border-top: 0;

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

@@ -50,7 +50,13 @@ class PageButtonsDiv extends Element {
     return pageButtons;
   }
 
-  update(length, index = 0) {
+  update(length, index) {
+    if (index === undefined) {
+      index = length; ///
+
+      length = null;
+    }
+
     if (length !== null) {
       this.unmountPageButtons();
 
@@ -58,7 +64,7 @@ class PageButtonsDiv extends Element {
     }
 
     const pageButtons = this.getPageButtons(),
-          currentIndex = index;
+          currentIndex = index; ///
 
     pageButtons.forEach((pageButton, index) => {
       (index === currentIndex) ?

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

@@ -31,12 +31,6 @@ class PreviewDiv extends Element {
   update(divisionHTMLNode, context) {
     this.clear();
 
-    const whitespaceTokenIndex = -1;
-
-    Object.assign(context, {
-      whitespaceTokenIndex
-    });
-
     const parentDOMElement = this.getParentDOMElement(),
           siblingDOMElement = null;
 

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

@@ -12,7 +12,7 @@ class LeftSizeableDiv extends SizeableDiv {
 
 export default withStyle(LeftSizeableDiv)`
 
-  width: 80rem;
+  width: 96rem;
   min-width: 12rem;
   flex-direction: column;
   

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

@@ -76,7 +76,7 @@ class RightTabButtonsDiv extends TabButtonsDiv {
   }
 
   didMount() {
-    this.css();
+    this.html();
   }
 
   willUnmount() {
@@ -86,10 +86,10 @@ class RightTabButtonsDiv extends TabButtonsDiv {
   childElements() {
     return ([
 
-      <CSSTabButton onClick={this.cssTabButtonClickHandler} />,
       <HTMLTabButton onClick={this.htmlTabButtonClickHandler} />,
       <PreviewTabButton onClick={this.previewTabButtonClickHandler} />,
-      <PlainTextTabButton onClick={this.plainTextTabButtonClickHandler} />
+      <PlainTextTabButton onClick={this.plainTextTabButtonClickHandler} />,
+      <CSSTabButton onClick={this.cssTabButtonClickHandler} />
 
     ]);
   }

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

@@ -36,6 +36,7 @@ class MarkdownTextarea extends Textarea {
 
 export default withStyle(MarkdownTextarea)`
 
+  height: 32em;
   resize: vertical;
   min-height: 12rem;
   

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

@@ -36,6 +36,7 @@ class MarkdownStyleTextarea extends Textarea {
 
 export default withStyle(MarkdownStyleTextarea)`
 
+  height: 32em;
   resize: vertical;
   min-height: 12rem;
   

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

@@ -23,6 +23,6 @@ class HTMLParseTreeTextarea extends ParseTreeTextarea {
 export default withStyle(HTMLParseTreeTextarea)`
 
   margin-top: 1rem;
-  height: 32rem;
+  height: 48rem;
   
 `;

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

@@ -20,12 +20,6 @@ class PlainTextTextarea extends Textarea {
   }
 
   update(divisionHTMLNode, context) {
-    const whitespaceTokenIndex = -1;
-
-    Object.assign(context, {
-      whitespaceTokenIndex
-    });
-
     const plainText = divisionHTMLNode.asPlainText(context);
 
     this.setPlainText(plainText);

package/src/example/view/xmp.js

@@ -8,12 +8,6 @@ import { EMPTY_STRING } from "../constants";
 
 class XMP extends Element {
   update(divisionHTMLNode, context) {
-    const whitespaceTokenIndex = -1;
-
-    Object.assign(context, {
-      whitespaceTokenIndex
-    });
-
     const indent = null,
           html = divisionHTMLNode.asHTML(indent, context);
 

package/src/example/view.js

@@ -6,6 +6,7 @@ import { Element } from "easy";
 import { RowsDiv, ColumnDiv, ColumnsDiv, VerticalSplitterDiv } from "easy-layout";
 import { MarkdownLexer, MarkdownParser, MarkdownStyleLexer, MarkdownStyleParser } from "../index";
 
+import indexOptions from "./indexOptions";
 import PageButtonsDiv from "./view/div/pageButtons";
 import LeftSizeableDiv from "./view/div/sizeable/left";
 import CSSContainerDiv from "./view/div/container/css";
@@ -32,9 +33,9 @@ class View extends Element {
   }
 
   pageUpdateCustomHandler = (event, element, index) => {
-    this.clearPage();
+    this.updateMarkdown();
 
-    this.updatePage(index);
+    this.updateHTML(index);
   }
 
   plainTextCustomHandler = (event, element) => {
@@ -63,25 +64,45 @@ class View extends Element {
 
   update() {
     this.updateMarkdownStyle();
+
     this.updateMarkdown();
-    this.updatePage();
+
+    this.updateHTML();
   }
 
-  clearPage() {
+  updateHTML(index = 0) {
+    const topmostHTMLNode = this.getTopmostHTMLNode();
+
     this.clearXMP();
+
     this.clearPreviewDiv();
+
+    this.clearPlainTextTextarea();
+
     this.clearHTMLParseTreeTextarea();
-  }
 
-  updatePage(index = 0) {
-    const tokens = this.getTokens(),
-          topmostMarkdownNode = this.getTopmostMarkdownNode(),
-          topmostHTMLNode = htmlNodeFromMarkdownNode(topmostMarkdownNode),
-          divisionHTMLNOde = topmostHTMLNode.getDivisionHTMLNodeAt(index),
-          context = {
-            tokens,
-            pathToURL
-          };
+    this.clearPageButtonsDiv();
+
+    if (topmostHTMLNode === null) {
+      return;
+    }
+
+    const divisionHTMLNOde = topmostHTMLNode.getDivisionHTMLNodeAt(index);
+
+    if (divisionHTMLNOde === null) {
+      return;
+    }
+
+    const divisionHTMLNOdeParseTree = divisionHTMLNOde.asParseTree(),
+          htmlParseTree = divisionHTMLNOdeParseTree,  ///
+          tokens = this.getTokens();
+
+    let context;
+
+    context = {
+      tokens,
+      pathToURL
+    };
 
     this.updateXMP(divisionHTMLNOde, context);
 
@@ -89,14 +110,9 @@ class View extends Element {
 
     this.updatePlainTextTextarea(divisionHTMLNOde, context);
 
-    const multiplicity = topmostHTMLNode.getMultiplicity(),
-          length = multiplicity,  ///
-          parseTree = divisionHTMLNOde.asParseTree(),
-          htmlParseTree = parseTree; ///
-
-    this.updatePageButtonsDiv(length, index);
-
     this.updateHTMLParseTreeTextarea(htmlParseTree);
+
+    this.updatePageButtonsDiv(index);
   }
 
   updateMarkdown() {
@@ -110,33 +126,44 @@ class View extends Element {
     if (node === null) {
       this.resetTokens();
 
-      this.resetTopmostMarkdownNode();
+      this.resetTopmostHTMLNode();
 
       this.clearMarkdownParseTreeTextarea();
 
-      this.clearPageButtonsDiv();
-
-      this.clearPage();
-
       return;
     }
 
-    const topmostMarkdownNode = node, ///
-          context = {
-            tokens,
-            importer,
-            nodeFromTokens,
-            tokensFromContent
-          };
+    let context;
+
+    const topmostMarkdownNode = node; ///
+
+    context = {
+      tokens,
+      importer
+    };
 
     topmostMarkdownNode.resolve(context);
 
-    const parseTree = topmostMarkdownNode.asParseTree(tokens),
-          markdownParseTree = parseTree; ///
+    const topmostHTMLNode = htmlNodeFromMarkdownNode(topmostMarkdownNode);
+
+    context = {
+      indexOptions,
+      tokens
+    };
+
+    topmostHTMLNode.resolve(context);
+
+    const topmostMarkdownNodeParseTree = topmostMarkdownNode.asParseTree(tokens),
+          markdownParseTree = topmostMarkdownNodeParseTree, ///
+          multiplicity = topmostHTMLNode.getMultiplicity(),
+          length = multiplicity,  ///
+          index = 0;
 
     this.setTokens(tokens);
 
-    this.setTopmostMarkdownNode(topmostMarkdownNode);
+    this.setTopmostHTMLNode(topmostHTMLNode);
+
+    this.updatePageButtonsDiv(length, index);
 
     this.updateMarkdownParseTreeTextarea(markdownParseTree);
   }
@@ -208,10 +235,10 @@ class View extends Element {
     this.setTokens(tokens);
   }
 
-  resetTopmostMarkdownNode() {
-    const topmostMarkdownNode = null;
+  resetTopmostHTMLNode() {
+    const topmostHTMLNode = null;
 
-    this.setTopmostMarkdownNode(topmostMarkdownNode);
+    this.setTopmostHTMLNode(topmostHTMLNode);
   }
 
   getTokens() {
@@ -220,10 +247,10 @@ class View extends Element {
     return tokens;
   }
 
-  getTopmostMarkdownNode() {
-    const { topmostMarkdownNode } = this.getState();
+  getTopmostHTMLNode() {
+    const { topmostMHTMLNode } = this.getState();
 
-    return topmostMarkdownNode;
+    return topmostMHTMLNode;
   }
 
   setTokens(tokens) {
@@ -232,19 +259,19 @@ class View extends Element {
     });
   }
 
-  setTopmostMarkdownNode(topmostMarkdownNode) {
+  setTopmostHTMLNode(topmostMHTMLNode) {
     this.updateState({
-      topmostMarkdownNode
+      topmostMHTMLNode
     });
   }
 
   setInitialState() {
     const tokens = null,
-          topmostMarkdownNode = null;
+          topmostHTMLNode = null;
 
     this.setState({
       tokens,
-      topmostMarkdownNode
+      topmostHTMLNode
     });
   }
 
@@ -266,10 +293,10 @@ class View extends Element {
                                 onCustomPlainText={this.plainTextCustomHandler}
             />
             <PageButtonsDiv onCustomPageUpdate={this.pageUpdateCustomHandler} />
-            <CSSContainerDiv/>
             <HTMLContainerDiv/>
             <PreviewContainerDiv/>
             <PlainTextContainerDiv/>
+            <CSSContainerDiv/>
             <HTMLParseTreeTextarea/>
           </RowsDiv>
         </ColumnDiv>
@@ -298,17 +325,7 @@ class View extends Element {
 
   static initialMarkdown = initialMarkdown;
 
-  static initialMarkdownStyle = `width: 100%;
-height: 100%;
-font-size: 2rem;  
-
-blockListing {
-  colour: white;
-  text-align: left;
-  font-family: monospace;
-  background-colour: black;
-}
-`;
+  static initialMarkdownStyle = ``;
 
   static tagName = "div";
 
@@ -327,22 +344,6 @@ export default withStyle(View)`
   
 `;
 
-function tokensFromContent(content) {
-  const tokens = markdownLexer.tokenise(content);
-
-  return tokens;
-}
-
-function nodeFromTokens(tokens, startRuleName = null) {
-  const ruleMap = markdownParser.getRuleMap(),
-        startRule = (startRuleName !== null) ?
-                      ruleMap[startRuleName] :
-                        markdownParser.getStartRule(),
-        node = markdownParser.parse(tokens, startRule);
-
-  return node;
-}
-
 function pathToURL(path) {
   const url = `https://static.djalbat.com/${path}`;
 

package/src/index/list.js

@@ -4,7 +4,7 @@ import { stringUtilities } from "necessary";
 
 import IndexItem from "../index/item";
 
-import { indexMapFromDivisionMarkdownNodes } from "../utilities/index";
+import { indexMapFromIndexDirectiveHTMLNodeAndDivisionHTMLNodes } from "../utilities/index";
 
 const { strcmp } = stringUtilities;
 
@@ -31,8 +31,8 @@ export default class IndexList {
     return result;
   }
 
-  static fromDivisionMarkdownNodes(divisionMarkdownNodes, context) {
-    const indexMap = indexMapFromDivisionMarkdownNodes(divisionMarkdownNodes, context),
+  static fromIndexDirectiveHTMLNodeAndDivisionHTMLNodes(indexDirectiveHTMLNode, divisionHTMLNodes, context) {
+    const indexMap = indexMapFromIndexDirectiveHTMLNodeAndDivisionHTMLNodes(indexDirectiveHTMLNode, divisionHTMLNodes, context),
           indexItems = indexItemsFromIndexMap(indexMap),
           indexList = new IndexList(indexItems);
 

package/src/index.js

@@ -19,6 +19,6 @@ export { default as htmlNodeMap } from "./map/node/html";
 export { default as classNameMap } from "./map/className";
 export { default as MarkdownNode } from "./node/markdown";
 export { default as markdownNodeMap } from "./map/node/markdown";
-export { default as MarkdownStyleElement } from "./styleElement/markdown";
 export { default as defaultMarkdownStyle } from "./defaultMarkdownStyle";
+export { default as MarkdownStyleElement } from "./styleElement/markdown";
 export { default as DefaultMarkdownStyleElement } from "./styleElement/markdown/default";