Fix some issues in the wysiwyg editor

app/modules/components/wysiwyg/wysiwyg-code-hightlighter.service.coffee

@@ -47,6 +47,7 @@ class WysiwygCodeHightlighterService
                 code.classList.add('has-code-lan-selector') # prevent multi instanciate
 
                 currentLan = @.getLanguageInClassList(code.classList)
+                code.parentNode.classList.add('language-' + currentLan)
 
                 id = new Date().getTime()
 
@@ -63,8 +64,9 @@ class WysiwygCodeHightlighterService
                             languageClass = _.find code.classList, (className) ->
                                 return className && className.indexOf('language-') != -1
 
-                            code.classList.remove(languageClass.replace('language-', ''))
+                            if languageClass
-                            code.classList.remove(languageClass)
+                                code.classList.remove(languageClass.replace('language-', ''))
+                                code.classList.remove(languageClass)
 
                             code.classList.add('language-' + lan)
                             code.classList.add(lan)
@@ -73,7 +75,6 @@ class WysiwygCodeHightlighterService
 
                 code.dataset.tab = tab
 
-
                 if !code.dataset.tabId
                     code.dataset.tabId = id
                     code.classList.add(id)

app/modules/components/wysiwyg/wysiwyg.directive.coffee

@@ -72,7 +72,11 @@ Medium = ($translate, $confirm, $storage, wysiwygService, animationFrame, tgLoad
         getButton: () ->
             return this.button
         handleClick: (event) ->
-            document.execCommand('justifyRight', false)
+            range = MediumEditor.selection.getSelectionRange(document)
+            if range.commonAncestorContainer.parentNode.style.textAlign == 'right'
+                document.execCommand('justifyLeft', false)
+            else
+                document.execCommand('justifyRight', false)
 
     })
 
@@ -108,6 +112,13 @@ Medium = ($translate, $confirm, $storage, wysiwygService, animationFrame, tgLoad
                 addCodeBlockAndHightlight(range, this.base)
     })
 
+    CustomPasteHandler = MediumEditor.extensions.paste.extend({
+        doPaste: (pastedHTML, pastedPlain, editable) ->
+            html = MediumEditor.util.htmlEntities(pastedPlain);
+
+            MediumEditor.util.insertHTMLCommand(this.document, html);
+    })
+
     # bug
     # <pre><code></code></pre> the enter key press doesn't work
     oldIsBlockContainer = MediumEditor.util.isBlockContainer
@@ -369,6 +380,7 @@ Medium = ($translate, $confirm, $storage, wysiwygService, animationFrame, tgLoad
                     ]
                 },
                 extensions: {
+                    paste: new CustomPasteHandler(),
                     code: new CodeButton(),
                     autolist: new AutoList(),
                     alignright: new AlignRightButton(),
@@ -398,6 +410,24 @@ Medium = ($translate, $confirm, $storage, wysiwygService, animationFrame, tgLoad
             mediumInstance.subscribe 'editableDrop', (event) ->
                 $scope.onUploadFile({files: event.dataTransfer.files, cb: uploadEnd})
 
+            editorMedium.on 'keydown', (e) ->
+                code = if e.keyCode then e.keyCode else e.which
+                range = MediumEditor.selection.getSelectionRange(document)
+                codeBlock = isCodeBlockSelected(range, document)
+                selection = window.getSelection()
+
+                if code == 13 && !e.shiftKey && selection.focusOffset == _.trimEnd(selection.focusNode.textContent).length
+                    e.preventDefault()
+                    document.execCommand('insertHTML', false, '<p id="last-p"><br/></p>')
+
+                    lastP = $('#last-p').attr('id', '')
+
+                    range = document.createRange()
+                    range.selectNodeContents(lastP[0])
+                    range.collapse(true);
+
+                    MediumEditor.selection.selectRange(document, range)
+
             mediumInstance.subscribe 'editableKeydown', (e) ->
                 code = if e.keyCode then e.keyCode else e.which
 

app/modules/components/wysiwyg/wysiwyg.scss

@@ -88,22 +88,18 @@
             margin: 0;
         }
     }
-    pre,
+    pre:not([class*="language-"]) {
-    code {
         @include font-size(small);
         background: lighten($grayer, 10%);
         color: $whitish;
         direction: ltr;
         font-family: 'courier new', 'monospace';
+        line-height: 1.4rem;
         margin-bottom: 1rem;
         overflow: auto;
+        padding: 1rem;
         unicode-bidi: embed;
         white-space: pre-wrap;
-
-    }
-    pre {
-        line-height: 1.4rem;
-        padding: 1rem;
     }
     table {
         border: $gray-light 1px solid;

app/modules/components/wysiwyg/wysiwyg.service.coffee

@@ -98,6 +98,7 @@ class WysiwygService
             converters: [cleanIssueConverter, codeLanguageConverter]
         })
 
+
         return markdown
 
     getHTML: (text) ->

app/styles/vendor/codehilite.github.css

@@ -1,64 +0,0 @@
-.codehilite .hll { background-color: #49483e }
-.codehilite .c { color: #75715e } /* Comment */
-.codehilite .err { color: #960050; background-color: #1e0010 } /* Error */
-.codehilite .k { color: #66d9ef } /* Keyword */
-.codehilite .l { color: #ae81ff } /* Literal */
-.codehilite .n { color: #f8f8f2 } /* Name */
-.codehilite .o { color: #f92672 } /* Operator */
-.codehilite .p { color: #f8f8f2 } /* Punctuation */
-.codehilite .cm { color: #75715e } /* Comment.Multiline */
-.codehilite .cp { color: #75715e } /* Comment.Preproc */
-.codehilite .c1 { color: #75715e } /* Comment.Single */
-.codehilite .cs { color: #75715e } /* Comment.Special */
-.codehilite .ge { font-style: italic } /* Generic.Emph */
-.codehilite .gs { font-weight: bold } /* Generic.Strong */
-.codehilite .kc { color: #66d9ef } /* Keyword.Constant */
-.codehilite .kd { color: #66d9ef } /* Keyword.Declaration */
-.codehilite .kn { color: #f92672 } /* Keyword.Namespace */
-.codehilite .kp { color: #66d9ef } /* Keyword.Pseudo */
-.codehilite .kr { color: #66d9ef } /* Keyword.Reserved */
-.codehilite .kt { color: #66d9ef } /* Keyword.Type */
-.codehilite .ld { color: #e6db74 } /* Literal.Date */
-.codehilite .m { color: #ae81ff } /* Literal.Number */
-.codehilite .s { color: #e6db74 } /* Literal.String */
-.codehilite .na { color: #a6e22e } /* Name.Attribute */
-.codehilite .nb { color: #f8f8f2 } /* Name.Builtin */
-.codehilite .nc { color: #a6e22e } /* Name.Class */
-.codehilite .no { color: #66d9ef } /* Name.Constant */
-.codehilite .nd { color: #a6e22e } /* Name.Decorator */
-.codehilite .ni { color: #f8f8f2 } /* Name.Entity */
-.codehilite .ne { color: #a6e22e } /* Name.Exception */
-.codehilite .nf { color: #a6e22e } /* Name.Function */
-.codehilite .nl { color: #f8f8f2 } /* Name.Label */
-.codehilite .nn { color: #f8f8f2 } /* Name.Namespace */
-.codehilite .nx { color: #a6e22e } /* Name.Other */
-.codehilite .py { color: #f8f8f2 } /* Name.Property */
-.codehilite .nt { color: #f92672 } /* Name.Tag */
-.codehilite .nv { color: #f8f8f2 } /* Name.Variable */
-.codehilite .ow { color: #f92672 } /* Operator.Word */
-.codehilite .w { color: #f8f8f2 } /* Text.Whitespace */
-.codehilite .mf { color: #ae81ff } /* Literal.Number.Float */
-.codehilite .mh { color: #ae81ff } /* Literal.Number.Hex */
-.codehilite .mi { color: #ae81ff } /* Literal.Number.Integer */
-.codehilite .mo { color: #ae81ff } /* Literal.Number.Oct */
-.codehilite .sb { color: #e6db74 } /* Literal.String.Backtick */
-.codehilite .sc { color: #e6db74 } /* Literal.String.Char */
-.codehilite .sd { color: #e6db74 } /* Literal.String.Doc */
-.codehilite .s2 { color: #e6db74 } /* Literal.String.Double */
-.codehilite .se { color: #ae81ff } /* Literal.String.Escape */
-.codehilite .sh { color: #e6db74 } /* Literal.String.Heredoc */
-.codehilite .si { color: #e6db74 } /* Literal.String.Interpol */
-.codehilite .sx { color: #e6db74 } /* Literal.String.Other */
-.codehilite .sr { color: #e6db74 } /* Literal.String.Regex */
-.codehilite .s1 { color: #e6db74 } /* Literal.String.Single */
-.codehilite .ss { color: #e6db74 } /* Literal.String.Symbol */
-.codehilite .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
-.codehilite .vc { color: #f8f8f2 } /* Name.Variable.Class */
-.codehilite .vg { color: #f8f8f2 } /* Name.Variable.Global */
-.codehilite .vi { color: #f8f8f2 } /* Name.Variable.Instance */
-.codehilite .il { color: #ae81ff } /* Literal.Number.Integer.Long */
-
-.codehilite .gh { } /* Generic Heading & Diff Header */
-.codehilite .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
-.codehilite .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */
-.codehilite .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */

package.json

@@ -125,14 +125,14 @@
     "lodash": "^4.16.4",
     "markdown-it": "^8.0.1",
     "markdown-it-task-lists": "^1.4.1",
-    "medium-editor": "^5.21.1",
+    "medium-editor": "^5.22.2",
     "medium-editor-autolist": "git+https://github.com/gruberro/medium-editor-autolist.git#add-package-json",
     "medium-editor-tc-mention": "^2.2.4",
     "messageformat": "^1.0.2",
     "moment": "^2.15.1",
     "ng-infinite-scroll": "^1.3.0",
     "pikaday": "^1.4.0",
-    "prismjs": "^1.5.1",
+    "prismjs": "^1.6.0",
     "raven-js": "^3.7.0",
     "showdown": "^1.4.3",
     "to-markdown": "^3.0.1"