highmark-markdown 1.0.40 → 1.0.42

package/src/elementMap.js

@@ -46,6 +46,7 @@ import { LINE_RULE_NAME,
          PRIMARY_HEADING_RULE_NAME,
          INDEX_DIRECTIVE_RULE_NAME,
          EMBED_DIRECTIVE_RULE_NAME,
+         EMPTY_TABLE_CELL_RULE_NAME,
          TERTIARY_HEADING_RULE_NAME,
          IGNORE_DIRECTIVE_RULE_NAME,
          ORDERED_LIST_ITEM_RULE_NAME,
@@ -245,6 +246,10 @@ const elementMap = {
     tagName: null,
     className: null
   },
+  [EMPTY_TABLE_CELL_RULE_NAME]: {
+    tagName: null,
+    className: null
+  },
   [TERTIARY_HEADING_RULE_NAME]: {
     tagName: "h3",
     className: null

package/src/example/customEventTypes.js

@@ -1,6 +1,10 @@
 "use strict";
 
+export const CSS_CUSTOM_EVENT_TYPE = "css";
+export const HTML_CUSTOM_EVENT_TYPE = "html";
 export const KEY_UP_CUSTOM_EVENT_TYPE = "key-up";
+export const PREVIEW_CUSTOM_EVENT_TYPE = "preview";
 export const MARKDOWN_CUSTOM_EVENT_TYPE = "markdown";
+export const PLAIN_TEXT_CUSTOM_EVENT_TYPE = "plain-text";
 export const PAGE_UPDATE_CUSTOM_EVENT_TYPE = "page-update";
 export const MARKDOWN_STYLE_CUSTOM_EVENT_TYPE = "markdown-style";

package/src/example/importer.js

@@ -43,9 +43,7 @@ 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 defaultContent = `****strongly emphasised****`
-
-export const _defaultContent = `@ignore
+export const defaultContent = `@ignore
 
 @include ${FRONT_MATTER_PATH}
 @include ${CONTENT_PATH}

package/src/example/view/button/tab/css.js

@@ -0,0 +1,23 @@
+"use strict";
+
+import TabButton from "../../button/tab";
+
+export default class CSSTabButton extends TabButton {
+  childElements() {
+    return "CSS";
+  }
+
+  parentContext() {
+    const enableCSSTabButton = this.enable.bind(this), ///
+          disableCSSTabButton = this.disable.bind(this); ///
+
+    return ({
+      enableCSSTabButton,
+      disableCSSTabButton
+    });
+  }
+
+  static defaultProperties = {
+    className: "css"
+  }
+}

package/src/example/view/button/tab/html.js

@@ -0,0 +1,23 @@
+"use strict";
+
+import TabButton from "../../button/tab";
+
+export default class HTMLTabButton extends TabButton {
+  childElements() {
+    return "HTML";
+  }
+
+  parentContext() {
+    const enableHTMLTabButton = this.enable.bind(this), ///
+          disableHTMLTabButton = this.disable.bind(this); ///
+
+    return ({
+      enableHTMLTabButton,
+      disableHTMLTabButton
+    });
+  }
+
+  static defaultProperties = {
+    className: "html"
+  }
+}

package/src/example/view/button/tab/markdown.js

@@ -1,10 +1,8 @@
 "use strict";
 
-import withStyle from "easy-with-style";  ///
-
 import TabButton from "../../button/tab";
 
-class MarkdownTabButton extends TabButton {
+export default class MarkdownTabButton extends TabButton {
   childElements() {
     return "Markdown";
   }
@@ -23,15 +21,3 @@ class MarkdownTabButton extends TabButton {
     className: "markdown"
   }
 }
-
-export default withStyle(MarkdownTabButton)`
-
-  border-right-width: 0;
-  
-  border-left-width: 1px;
-  
-  :enabled {
-    border-left-width: 0;
-  }
-  
-`;

package/src/example/view/button/tab/markdownStyle.js

@@ -1,10 +1,8 @@
 "use strict";
 
-import withStyle from "easy-with-style";  ///
-
 import TabButton from "../../button/tab";
 
-class MarkdownStyleTabButton extends TabButton {
+export default class MarkdownStyleTabButton extends TabButton {
   childElements() {
     return "Markdown style";
   }
@@ -23,13 +21,3 @@ class MarkdownStyleTabButton extends TabButton {
     className: "markdown-style"
   }
 }
-
-export default withStyle(MarkdownStyleTabButton)`
-
-  border-right-width: 1px;
-  
-  :enabled {
-    border-right-width: 0;
-  }
-  
-`;

package/src/example/view/button/tab/plainText.js

@@ -0,0 +1,23 @@
+"use strict";
+
+import TabButton from "../../button/tab";
+
+export default class PlainTextTabButton extends TabButton {
+  childElements() {
+    return "PlainText";
+  }
+
+  parentContext() {
+    const enablePlainTextTabButton = this.enable.bind(this), ///
+          disablePlainTextTabButton = this.disable.bind(this); ///
+
+    return ({
+      enablePlainTextTabButton,
+      disablePlainTextTabButton
+    });
+  }
+
+  static defaultProperties = {
+    className: "plainText"
+  }
+}

package/src/example/view/button/tab/preview.js

@@ -0,0 +1,23 @@
+"use strict";
+
+import TabButton from "../../button/tab";
+
+export default class PreviewTabButton extends TabButton {
+  childElements() {
+    return "Preview";
+  }
+
+  parentContext() {
+    const enablePreviewTabButton = this.enable.bind(this), ///
+          disablePreviewTabButton = this.disable.bind(this); ///
+
+    return ({
+      enablePreviewTabButton,
+      disablePreviewTabButton
+    });
+  }
+
+  static defaultProperties = {
+    className: "preview"
+  }
+}

package/src/example/view/button/tab.js

@@ -14,20 +14,19 @@ export default withStyle(TabButton)`
 
   color: black;
   cursor: pointer;
-  border: 1px solid black;
   padding: 1rem;
   font-size: 2rem;
   background: transparent;  
   font-family: serif;
 
+  border: 1px solid black;
   font-weight: bold;
-  border-top-width: 1px;
-  border-bottom-width: 0;
+  border-bottom: 0;
   
   :enabled {
+    border: 0;
     font-weight: normal;
-    border-top-width: 0;
-    border-bottom-width: 1px;
+    border-bottom: 1px solid black;
   }
   
 `;

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

@@ -0,0 +1,30 @@
+"use strict";
+
+import CSSTextarea from "../../textarea/css";
+import ContainerDiv from "../../div/container";
+
+export default class CSSContainerDiv extends ContainerDiv {
+  childElements() {
+    return (
+
+      <CSSTextarea/>
+
+    );
+  }
+
+  parentContext() {
+    const context = this.getContext(),
+          showCSSContainerDiv = this.show.bind(this),  ///
+          hideCSSContainerDiv = this.hide.bind(this);  ///
+
+    return ({
+      ...context,
+      showCSSContainerDiv,
+      hideCSSContainerDiv
+    });
+  }
+
+  static defaultProperties = {
+    className: "css"
+  };
+}

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

@@ -0,0 +1,30 @@
+"use strict";
+
+import HTMLDiv from "../../div/html";
+import ContainerDiv from "../../div/container";
+
+export default class HTMLContainerDiv extends ContainerDiv {
+  childElements() {
+    return ([
+
+      <HTMLDiv/>
+
+    ]);
+  }
+
+  parentContext() {
+    const context = this.getContext(),
+          showHTMLContainerDiv = this.show.bind(this),  ///
+          hideHTMLContainerDiv = this.hide.bind(this);  ///
+
+    return ({
+      ...context,
+      showHTMLContainerDiv,
+      hideHTMLContainerDiv
+    });
+  }
+
+  static defaultProperties = {
+    className: "html"
+  };
+}

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

@@ -0,0 +1,30 @@
+"use strict";
+
+import ContainerDiv from "../../div/container";
+import PlainTextTextarea from "../../textarea/plainText";
+
+export default class PlainTextContainerDiv extends ContainerDiv {
+  childElements() {
+    return (
+
+      <PlainTextTextarea/>
+
+    );
+  }
+
+  parentContext() {
+    const context = this.getContext(),
+          showPlainTextContainerDiv = this.show.bind(this),  ///
+          hidePlainTextContainerDiv = this.hide.bind(this);  ///
+
+    return ({
+      ...context,
+      showPlainTextContainerDiv,
+      hidePlainTextContainerDiv
+    });
+  }
+
+  static defaultProperties = {
+    className: "plain-text"
+  };
+}

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

@@ -0,0 +1,43 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+import PreviewDiv from "../../div/preview";
+import ContainerDiv from "../../div/container";
+
+class PreviewContainerDiv extends ContainerDiv {
+  childElements() {
+    const { onCustomPageUpdate } = this.properties,
+          pageUpdateCustomHandler = onCustomPageUpdate; ///
+
+    return ([
+
+      <PreviewDiv onCustomPageUpdate={pageUpdateCustomHandler} />
+
+    ]);
+  }
+
+  parentContext() {
+    const context = this.getContext(),
+          showPreviewContainerDiv = this.show.bind(this),  ///
+          hidePreviewContainerDiv = this.hide.bind(this);  ///
+
+    return ({
+      ...context,
+      showPreviewContainerDiv,
+      hidePreviewContainerDiv
+    });
+  }
+
+  static ignoredProperties = [
+    "onCustomPageUpdate"
+  ];
+}
+
+export default withStyle(PreviewContainerDiv)`
+  
+  height: 56rem;
+  padding: 0;
+  position: relative;
+  
+`;

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

@@ -23,10 +23,7 @@ class ContainerDiv extends Element {
 export default withStyle(ContainerDiv)`
 
   border: 1px solid black;
-  display: flex;
   padding: 1rem;
   border-top: 0;
-  align-items: stretch;
-  flex-direction: column;
   
 `;

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

@@ -101,8 +101,7 @@ class PreviewDiv extends Element {
 
 export default withStyle(PreviewDiv)`
 
-  height: 48rem;
-  border: 1px solid darkgrey;
+  height: 100%;
   overflow: scroll;
   position: relative;
   

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

@@ -0,0 +1,66 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+import TabButtonsDiv from "../../div/tabButtons";
+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 LeftTabButtonsDiv extends TabButtonsDiv {
+  markdownStyleTabButtonClickHandler = (event, element) => {
+    this.markdownStyle(event, element);
+  }
+
+  markdownTabButtonClickHandler = (event, element) => {
+    this.markdown(event, element);
+  }
+
+  markdownStyle(event, element) {
+    const eventType = MARKDOWN_STYLE_CUSTOM_EVENT_TYPE;
+
+    this.enableMarkdownTabButton();
+
+    this.disableMarkdownStyleTabButton();
+
+    this.callCustomHandlers(eventType, event, element);
+  }
+
+  markdown(event = null, element = null) {
+    const eventType = MARKDOWN_CUSTOM_EVENT_TYPE;
+
+    this.disableMarkdownTabButton();
+
+    this.enableMarkdownStyleTabButton();
+
+    this.callCustomHandlers(eventType, event, element);
+  }
+
+  didMount() {
+    this.markdown();
+  }
+
+  willUnmount() {
+    ///
+  }
+
+  childElements() {
+    return ([
+
+      <MarkdownTabButton onClick={this.markdownTabButtonClickHandler} />,
+      <MarkdownStyleTabButton onClick={this.markdownStyleTabButtonClickHandler} />
+
+    ]);
+  }
+
+  static defaultProperties = {
+    className: "left"
+  };
+}
+
+export default withStyle(LeftTabButtonsDiv)`
+
+  grid-template-columns: 1fr 1fr;  
+
+`;

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

@@ -0,0 +1,106 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+import CSSTabButton from "../../button/tab/css";
+import HTMLTabButton from "../../button/tab/html";
+import TabButtonsDiv from "../../div/tabButtons";
+import PreviewTabButton from "../../button/tab/preview";
+import PlainTextTabButton from "../../button/tab/plainText";
+
+import { CSS_CUSTOM_EVENT_TYPE, HTML_CUSTOM_EVENT_TYPE, PREVIEW_CUSTOM_EVENT_TYPE, PLAIN_TEXT_CUSTOM_EVENT_TYPE } from "../../../customEventTypes";
+
+class RightTabButtonsDiv extends TabButtonsDiv {
+  cssTabButtonClickHandler = (event, element) => {
+    this.css(event, element);
+  }
+
+  htmlTabButtonClickHandler = (event, element) => {
+    this.html(event, element);
+  }
+
+  previewTabButtonClickHandler = (event, element) => {
+    this.preview(event, element);
+  }
+
+  plainTextTabButtonClickHandler = (event, element) => {
+    this.plainText(event, element);
+  }
+
+  css(event = null, element = null) {
+    const eventType = CSS_CUSTOM_EVENT_TYPE;
+
+    this.disableCSSTabButton();
+
+    this.enableHTMLTabButton();
+    this.enablePreviewTabButton();
+    this.enablePlainTextTabButton();
+
+    this.callCustomHandlers(eventType, event, element);
+  }
+
+  html(event, element) {
+    const eventType = HTML_CUSTOM_EVENT_TYPE;
+
+    this.disableHTMLTabButton();
+
+    this.enableCSSTabButton();
+    this.enablePreviewTabButton();
+    this.enablePlainTextTabButton();
+
+    this.callCustomHandlers(eventType, event, element);
+  }
+
+  preview(event, element) {
+    const eventType = PREVIEW_CUSTOM_EVENT_TYPE;
+
+    this.disablePreviewTabButton();
+
+    this.enableCSSTabButton();
+    this.enableHTMLTabButton();
+    this.enablePlainTextTabButton();
+
+    this.callCustomHandlers(eventType, event, element);
+  }
+
+  plainText(event, element) {
+    const eventType = PLAIN_TEXT_CUSTOM_EVENT_TYPE;
+
+    this.disablePlainTextTabButton();
+
+    this.enableCSSTabButton();
+    this.enableHTMLTabButton();
+    this.enablePreviewTabButton();
+
+    this.callCustomHandlers(eventType, event, element);
+  }
+
+  didMount() {
+    this.css();
+  }
+
+  willUnmount() {
+    ///
+  }
+
+  childElements() {
+    return ([
+
+      <CSSTabButton onClick={this.cssTabButtonClickHandler} />,
+      <HTMLTabButton onClick={this.htmlTabButtonClickHandler} />,
+      <PreviewTabButton onClick={this.previewTabButtonClickHandler} />,
+      <PlainTextTabButton onClick={this.plainTextTabButtonClickHandler} />
+
+    ]);
+  }
+
+  static defaultProperties = {
+    className: "right"
+  };
+}
+
+export default withStyle(RightTabButtonsDiv)`
+
+  grid-template-columns: 1fr 1fr 1fr 1fr;  
+
+`;

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

@@ -4,55 +4,7 @@ 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();
   }
@@ -68,6 +20,5 @@ export default withStyle(TabButtonsDiv)`
 
   display: grid;
   grid-template-rows: auto;
-  grid-template-columns: 1fr 1fr;  
   
 `;

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

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

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

@@ -0,0 +1,46 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+import Textarea from "../textarea";
+
+import { EMPTY_STRING } from "../../constants";
+
+class PlainTextTextarea extends Textarea {
+  setPlainText(plainText) {
+    const value = plainText;  ///
+
+    this.setValue(value);
+  }
+
+  clear() {
+    const plainText = EMPTY_STRING;
+
+    this.setPlainText(plainText);
+  }
+
+  update(plainText) {
+    this.setPlainText(plainText);
+  }
+
+  parentContext() {
+    const clearPlainTextTextarea = this.clear.bind(this), ///
+          updatePlainTextTextarea = this.update.bind(this);
+
+    return ({
+      clearPlainTextTextarea,
+      updatePlainTextTextarea
+    });
+  }
+
+  static defaultProperties = {
+    readOnly: true,
+    className: "plain-text"
+  };
+}
+
+export default withStyle(PlainTextTextarea)`
+
+  height: 48rem;
+  
+`;

package/src/example/view/textarea.js

@@ -6,10 +6,12 @@ import { Textarea } from "easy";
 
 export default withStyle(Textarea)`
 
+  width: 100%;
   border: 1px solid darkgrey;
   resize: vertical;
   padding: 0.25rem;
   font-size: 1.2rem;
+  min-height: 24rem;
   line-height: 1.5rem;
   white-space: pre;
   font-family: monospace;