highmark-markdown 1.0.41 → 1.0.42

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;