Merge pull request #1225 from taigaio/editor-bugs

Editor bugs
2017-02-06 10:57:42 +01:00 · 2017-02-06 10:57:42 +01:00 · d41eaa07cc
parent c262d77ca8 bfc580677d
commit d41eaa07cc
7 changed files with 42 additions and 78 deletions
--- a/app/modules/components/wysiwyg/wysiwyg-code-hightlighter.service.coffee
+++ b/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,6 +64,7 @@ class WysiwygCodeHightlighterService
                            languageClass = _.find code.classList, (className) ->
                                return className && className.indexOf('language-') != -1

+                            if languageClass
                                code.classList.remove(languageClass.replace('language-', ''))
                                code.classList.remove(languageClass)

@ -73,7 +75,6 @@ class WysiwygCodeHightlighterService

                code.dataset.tab = tab

-
                if !code.dataset.tabId
                    code.dataset.tabId = id
                    code.classList.add(id)
--- a/app/modules/components/wysiwyg/wysiwyg.directive.coffee
+++ b/app/modules/components/wysiwyg/wysiwyg.directive.coffee
@ -72,6 +72,10 @@ Medium = ($translate, $confirm, $storage, wysiwygService, animationFrame, tgLoad
        getButton: () ->
            return this.button
        handleClick: (event) ->
+            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

--- a/app/modules/components/wysiwyg/wysiwyg.scss
+++ b/app/modules/components/wysiwyg/wysiwyg.scss
@ -88,22 +88,18 @@
            margin: 0;
        }
    }
-    pre,
-    code {
+    pre:not([class*="language-"]) {
        @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;
--- a/app/modules/components/wysiwyg/wysiwyg.service.coffee
+++ b/app/modules/components/wysiwyg/wysiwyg.service.coffee
@ -98,6 +98,7 @@ class WysiwygService
            converters: [cleanIssueConverter, codeLanguageConverter]
        })

+
        return markdown

    getHTML: (text) ->
--- a/app/styles/vendor/codehilite.github.css
+++ b/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 */
--- a/package.json
+++ b/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"