Merge pull request #1479 from hypothesis/markdown

Introduce zero-dependency Markdown Editor.

h/static/scripts/directives.coffee

@@ -63,37 +63,6 @@ formValidate = ->
       ctrl.submit()
 
 
-markdown = ['$filter', '$timeout', ($filter, $timeout) ->
-  link: (scope, elem, attr, ctrl) ->
-    return unless ctrl?
-
-    input = elem.find('textarea')
-    output = elem.find('div')
-
-    # Re-render the markdown when the view needs updating.
-    ctrl.$render = ->
-      input.val (ctrl.$viewValue or '')
-      scope.rendered = ($filter 'converter') (ctrl.$viewValue or '')
-
-    # React to the changes to the text area
-    input.bind 'blur change keyup', ->
-      ctrl.$setViewValue input.val()
-      scope.$digest()
-
-    # Auto-focus the input box when the widget becomes editable.
-    # Re-render when it becomes uneditable.
-    scope.$watch 'readonly', (readonly) ->
-      ctrl.$render()
-      unless readonly then $timeout -> input.focus()
-
-  require: '?ngModel'
-  scope:
-    readonly: '@'
-    required: '@'
-  templateUrl: 'markdown.html'
-]
-
-
 privacy = ->
   levels = ['Public', 'Only Me']
 
@@ -246,7 +215,6 @@ match = ->
 angular.module('h.directives', imports)
 .directive('formInput', formInput)
 .directive('formValidate', formValidate)
-.directive('markdown', markdown)
 .directive('privacy', privacy)
 .directive('tabReveal', tabReveal)
 .directive('showAccount', showAccount)

h/static/styles/annotations.scss

@@ -42,12 +42,15 @@
   font-size: .923em;
 }
 
-.icon-markdown {
-  color: $text-color;
-  line-height: 1.4;
-  margin-left: .5em;
+
+//PRIVACY CONTROL////////////////////////////
+privacy {
+  position: relative;
+  top: 2px;
 }
 
+
+//MAGICONTROL////////////////////////////////
 .magicontrol {
   margin-right: .8em;
   color: $gray-lighter;

h/static/styles/common.scss

@@ -8,6 +8,7 @@ $headings-color: $text-color;
 
 @import 'annotations';
 @import 'forms';
+@import 'markdown-editor';
 @import 'spinner';
 @import 'responsive';
 @import 'threads';

h/static/styles/markdown-editor.scss

+@import 'compass/css3/user-interface';
+
+//MARKDOWN EDITOR //////////////////////////
+.markdown-preview {
+  overflow: auto;
+  border: .1em solid $gray-lighter;
+  background-color: $gray-lightest;
+  min-height: 120px;
+  padding-left: 0.9em;
+  resize: vertical;
+}
+
+.markdown-tools {
+  border-top: .1em solid #D3D3D3;
+  border-left: .1em solid #D3D3D3;
+  border-right: .1em solid #D3D3D3;
+  border-radius: .15em .15em 0 0;
+  width: 100%;
+  margin-bottom: -.1em;
+  padding: .7em .7em .7em .5em;
+  @include user-select(none);
+
+  &.disable {
+    .markdown-tools-button {
+      color: $gray-lighter;
+      pointer-events: none;
+    }
+  }
+
+  .markdown-tools-button {padding: .4em;}
+
+  .markdown-tools-button, .markdown-tools-toggle, .icon-markdown {
+    color: $gray;
+
+    &:hover {
+      color: black;
+    }
+  }
+
+  .markdown-preview-toggle {
+    float: right;
+  }
+}