MD Editor

This is the knockoutjs version of the editor. Whilst we wait for 4.0, a React version may be a good idea.

by Sam Fereday

HTML

<script src="  https://cdnjs.cloudflare.com/ajax/libs/showdown/1.7.1/showdown.min.js"></script>
<link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">
<script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"></script>
<form id="editor">
  <p>
    Post Title
  </p>
  <input class="editable title" data-bind="value: postTitle" type="text">
  <p>
    Post Content
  </p>
  <textarea class="editable content" data-bind="value: postBody"></textarea>
  <button data-bind="click: savePost">
    Save Post
  </button>
</form>
<ul data-bind="foreach: posts">
  <li>
    <div class="post">
      <p>
        <strong><span data-bind="text: title">...</span></strong>
      </p>
      <span class="date" data-bind="text: date">...</span>
      <span data-bind="html: formattedBody">...</span>
    </div>
  </li>
</ul>

SCSS

html,
body {
  margin: 0;
  padding: 1em;
  font-family: "Lucida Sans Unicode";
}

* {
  box-sizing: border-box;
}

ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}

strong {
  font-weight: 700;
}

#editor .editable {
  padding: 1em;
  width: 100%;
  font-family: "Lucida Sans Unicode";
  font-size: 13px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 18.5714px;
  background: #333;
  color: #fff;
  border: 0;
  &.title {
    margin-bottom: 2em;
  }
  &.content {
    margin-bottom: 2em;
    min-height: 12em;
  }
}

.post {
  padding: 1em;
  margin-bottom: 1em;
  background: #eee;
  border: 1px solid #ddd;
  span {
    display: block;
    &.date {
      font-weight: lighter;
      font-style: italic;
      font-size: 0.8em;
      padding-bottom: 1em;
    }
  }
}

JavaScript

/// Firebase area
// Auth
var provider = new firebase.auth.GoogleAuthProvider();

firebase.auth().signInWithPopup(provider).then(function(result) {
  // This gives you a Google Access Token. You can use it to access the Google API.
  var token = result.credential.accessToken;
  // The signed-in user info.
  var user = result.user;
  // ...
}).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // The email of the user's account used.
  var email = error.email;
  // The firebase.auth.AuthCredential type that was used.
  var credential = error.credential;
  // ...
});

// Initialize Firebase
var config = {
  apiKey: "AIzaSyB6jZToAkQXpySSQ4omQ7SKP23TQUQDF8M",
  authDomain: "sd-blog-c1b48.firebaseapp.com",
  databaseURL: "https://sd-blog-c1b48.firebaseio.com",
  projectId: "sd-blog-c1b48",
  storageBucket: "sd-blog-c1b48.appspot.com",
  messagingSenderId: "896841901128"
};

firebase.initializeApp(config);

/// - Global class setup for apps
/// https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes
/// http://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/
// Mixin maker
let mix = (superclass) => new MixinBuilder(superclass);

class MixinBuilder {

  constructor(superclass) {
    this.superclass = superclass;
  }

  // (spread operator, will pass everything from 0 to n)
  with(...mixins) {
    return mixins.reduce((c, mixin) => mixin(c), this.superclass);
  }

}

// Mixins
let FirebaseController = (superclass) => class extends superclass {

  writeNewPost(data) {
    console.log(data)

    let database = firebase.database();

    // A post entry.
    var postData = {
      guid: data.guid,
      body: data.body,
      title: data.title,
      date: data.date
    };

    // Get a key for a new Post.
    var newPostKey = database.ref().child('posts').push().key;

    // Write the new post's data simultaneously in the posts list and the user's post list.
    var updates =...