add markdown editor

7 years ago · ec57a80ad8
11 changed files with 1510 additions and 12 deletions
--- a/package.json
+++ b/package.json
@ -29,6 +29,7 @@
    "whatwg-fetch": "^2.0.2"
  },
  "dependencies": {
+    "showdown": "^1.6.4",
    "whatwg-fetch": "^2.0.2"
  }
 }
--- a/src/scripts/editor.js
+++ b/src/scripts/editor.js
@ -0,0 +1,4 @@
+import riot from 'riot';
+import './editor.tag';
+
+riot.mount("editor");
--- a/src/scripts/editor.tag
+++ b/src/scripts/editor.tag
@ -0,0 +1,74 @@
+<editor>
+  <div class="centered container">
+    <div class="columns">
+      <div class="column col-6">
+        <textarea onfocus={clearplaceholder}
+                  onblur={checkplaceholder}
+                  oninput={echo}
+                  __disabled={""}
+                  class="form-input editor centered"
+                  ref="textarea"
+                  rows="10"
+                  cols="50"
+                  maxlength={this.maxlength}>
+          { placeholder }
+        </textarea>
+        <button onclick={submit}
+                class="btn post-submit centered">
+          Submit Post
+        </button>
+      </div>
+      <div class="column col-6">
+        <raw content="{this.converted}"></raw>
+      </div>
+    </div>
+  </div>
+<script>
+import './raw.tag';
+import 'whatwg-fetch';
+import { default as showdown } from 'showdown';
+import { default as R } from 'ramda';
+this.R = R;
+
+this.converter = new showdown.Converter();
+this.converted = "<h3>Nothing here yet</h3>";
+
+this.placeholderText = "Write a post!"
+this.placeholder = this.placeholderText;
+this.focused = false;
+
+clearplaceholder() {
+  if (!this.focused) {
+    this.update({
+      "placeholder" : "",
+      "focused"     : true
+      })
+  }
+}
+
+checkplaceholder() {
+  if (this.refs.textarea.value.trim().length == 0) {
+    this.update({
+      "placeholder" : this.placeholderText,
+      "focused"     : false
+    });
+  }
+}
+
+echo(ev) {
+  this.update({"converted" : this.converter.makeHtml(this.refs.textarea.value)});
+  console.log("tried updating the raw tag");
+}
+
+var self = this;
+
+submit() {
+  var post = {
+      "author" : "name",
+      "text" : this.refs.textarea.value
+  };
+  console.log("Submitting the post");
+  console.log(post);
+}
+</script>
+</editor>
--- a/src/scripts/post.tag
+++ b/src/scripts/post.tag
@ -1,24 +1,20 @@
 <post>
  <div class="postnav centered">
-
    <button class={"btn btn-primary " + (this.pid <= 1 ? "disabled" : " ") + this.prevloading}
            onclick={this.prev}
    >
      Last One
    </button>
-
    <button class={"btn btn-primary " + (this.nomore ? "disabled" : " ") + this.nextloading}
            onclick={this.next}
    >
      Next One
    </button>
-
  </div>

  <h4 class="post centered" if={this.nomore}>
    No More Posts!
  </h4>
-
  <div if={!(this.loading || this.nomore)}
       class="post centered"
  >
@ -27,7 +23,6 @@
    <p class="post-content centered text-break">
      { this.content }
    </p>
-
    <div class="divider"></div>
    <comments pid={this.pid}>
    </comments>
@ -49,7 +44,6 @@ self.prevloading = "";
 self.nextloading = "";

 self.nomore = false;
-self.pid = 1;
 self.content = "";

 prev(ev) {
--- a/src/scripts/raw.tag
+++ b/src/scripts/raw.tag
@ -0,0 +1,14 @@
+<raw>
+  <span></span>
+  <script>
+  updateContent() {
+    this.root.innerHTML = opts.content;
+  }
+
+  this.on("update", function() {
+    this.updateContent();
+  });
+
+  this.updateContent();
+  </script>
+</raw>
--- a/src/scripts/riotblog.js
+++ b/src/scripts/riotblog.js
@ -4,7 +4,9 @@ import './comment.tag';
 import './bbutton.tag';
 import './post.tag';
 import './posts.tag';
+import './editor.tag';

+riot.mount("editor");
 riot.mount("post",
  {
    "creator" : "author"
--- a/src/styles/riotblog.scss
+++ b/src/styles/riotblog.scss
@ -85,3 +85,5 @@
 .footer {
  margin-top: 10%;
 }
+
+.editor {}
--- a/src/templates/index.html
+++ b/src/templates/index.html
@ -11,8 +11,6 @@
    <posts>
      <post></post>
    </posts>
-    <editor>
-    </editor>
    <footer class="footer">
    </footer>

--- a/src/templates/write.html
+++ b/src/templates/write.html
@ -11,8 +11,8 @@
  <body>
    {% block content %}

-    <posteditor>
-    </posteditor>
+    <editor>
+    </editor>

    {% endblock %}

@ -27,8 +27,7 @@
 {% endblock %}

 {% block scripts %}
-  <script type="text/javascript" src="/blog/scripts/tags.min.js"></script>
-  <script type="text/javascript" src="/blog/scripts/blog.min.js"></script>
+  <script type="text/javascript" src="/blog/scripts/riotblog.min.js"></script>
 {% endblock %}

  </body>
--- a/src/website.py
+++ b/src/website.py
@ -53,6 +53,10 @@ def NeverWhere(configfile=None):
        print("matched index")
        return render_template("index.html")

+    @app.route("/blog/editor/", methods=("GET", "POST"))
+    def editor():
+        return render_template("write.html")
+
    @app.route("/blog/scripts/<filename>", methods=("GET", "POST"))
    def send_script(filename):
        print("matched scripts route")
--- a/yarn.lock
+++ b/yarn.lock