Use codemirror for description in poll

customize.dist/pages.js

@@ -646,12 +646,13 @@ define([
                     ]),
                     h('div.cp-app-poll-realtime', [
                         h('br'),
-                        h('center', [
+                        h('div', [
                             h('textarea#cp-app-poll-description', {
                                 rows: "5",
                                 cols: "50",
                                 disabled: true
                             }),
+                            h('div#cp-app-poll-description-published'),
                             h('br')
                         ]),
                         h('div#cp-app-poll-table-container', [

www/common/metadata-manager.js

@@ -68,7 +68,6 @@ define(['json.sortify'], function (Sortify) {
         };
         var change = function (lazy) {
             dirty = true;
-            console.error('METADATA CHANGE CALLED');
             setTimeout(function () {
                 checkUpdate(lazy);
             });

www/common/sframe-common-codemirror.js

@@ -9,6 +9,58 @@ define([
     var saveAs = window.saveAs;
     var module = {};
 
+    var cursorToPos = function(cursor, oldText) {
+        var cLine = cursor.line;
+        var cCh = cursor.ch;
+        var pos = 0;
+        var textLines = oldText.split("\n");
+        for (var line = 0; line <= cLine; line++) {
+            if(line < cLine) {
+                pos += textLines[line].length+1;
+            }
+            else if(line === cLine) {
+                pos += cCh;
+            }
+        }
+        return pos;
+    };
+
+    var posToCursor = function(position, newText) {
+        var cursor = {
+            line: 0,
+            ch: 0
+        };
+        var textLines = newText.substr(0, position).split("\n");
+        cursor.line = textLines.length - 1;
+        cursor.ch = textLines[cursor.line].length;
+        return cursor;
+    };
+
+    module.setValueAndCursor = function (editor, oldDoc, remoteDoc, TextPatcher) {
+        var scroll = editor.getScrollInfo();
+        //get old cursor here
+        var oldCursor = {};
+        oldCursor.selectionStart = cursorToPos(editor.getCursor('from'), oldDoc);
+        oldCursor.selectionEnd = cursorToPos(editor.getCursor('to'), oldDoc);
+
+        editor.setValue(remoteDoc);
+        editor.save();
+
+        var op = TextPatcher.diff(oldDoc, remoteDoc);
+        var selects = ['selectionStart', 'selectionEnd'].map(function (attr) {
+            return TextPatcher.transformCursor(oldCursor[attr], op);
+        });
+
+        if(selects[0] === selects[1]) {
+            editor.setCursor(posToCursor(selects[0], remoteDoc));
+        }
+        else {
+            editor.setSelection(posToCursor(selects[0], remoteDoc), posToCursor(selects[1], remoteDoc));
+        }
+
+        editor.scrollTo(scroll.left, scroll.top);
+    };
+
     module.create = function (Common, defaultMode, CMeditor) {
         var exp = {};
         var Messages = Cryptpad.Messages;
@@ -253,56 +305,8 @@ define([
             onLocal();
         };
 
-        var cursorToPos = function(cursor, oldText) {
-            var cLine = cursor.line;
-            var cCh = cursor.ch;
-            var pos = 0;
-            var textLines = oldText.split("\n");
-            for (var line = 0; line <= cLine; line++) {
-                if(line < cLine) {
-                    pos += textLines[line].length+1;
-                }
-                else if(line === cLine) {
-                    pos += cCh;
-                }
-            }
-            return pos;
-        };
-
-        var posToCursor = function(position, newText) {
-            var cursor = {
-                line: 0,
-                ch: 0
-            };
-            var textLines = newText.substr(0, position).split("\n");
-            cursor.line = textLines.length - 1;
-            cursor.ch = textLines[cursor.line].length;
-            return cursor;
-        };
-
         exp.setValueAndCursor = function (oldDoc, remoteDoc, TextPatcher) {
-            var scroll = editor.getScrollInfo();
+            return module.setValueAndCursor(editor, oldDoc, remoteDoc, TextPatcher);
-            //get old cursor here
-            var oldCursor = {};
-            oldCursor.selectionStart = cursorToPos(editor.getCursor('from'), oldDoc);
-            oldCursor.selectionEnd = cursorToPos(editor.getCursor('to'), oldDoc);
-
-            editor.setValue(remoteDoc);
-            editor.save();
-
-            var op = TextPatcher.diff(oldDoc, remoteDoc);
-            var selects = ['selectionStart', 'selectionEnd'].map(function (attr) {
-                return TextPatcher.transformCursor(oldCursor[attr], op);
-            });
-
-            if(selects[0] === selects[1]) {
-                editor.setCursor(posToCursor(selects[0], remoteDoc));
-            }
-            else {
-                editor.setSelection(posToCursor(selects[0], remoteDoc), posToCursor(selects[1], remoteDoc));
-            }
-
-            editor.scrollTo(scroll.left, scroll.top);
         };
 
         return exp;

www/common/sframe-common-title.js

@@ -41,7 +41,6 @@ define(['jquery'], function ($) {
         };
 
         metadataMgr.onChange(function () {
-            console.error('METADATA CHANGE');
             var md = metadataMgr.getMetadata();
             if ($title) {
                 $title.find('span.cp-toolbar-title-value').text(md.title || md.defaultTitle);

www/poll/app-poll.less

@@ -21,6 +21,8 @@
 @poll-td-bg: @poll-th-bg;
 @poll-td-fg: @poll-th-fg;
 
+@poll-help-bg: #bbffbb; // lightgreen
+
 @poll-uncommitted-cell: #eee;
 @poll-uncommitted-bg: #ddd; //lighten(@poll-th-bg, 50%);
 @poll-uncommitted-text: black;
@@ -116,29 +118,48 @@ table#cp-app-poll-table {
     display: inline-block;
 }
 #cp-app-poll-description {
+    &~ .CodeMirror {
+        margin: auto;
+        min-width: 80%;
+        width: 80%;
+        min-height: 200px;
+        border: 1px solid black;
+    }
+}
+#cp-app-poll-description-published {
+    display: none;
     padding: 15px;
     margin: auto;
 
     min-width: 80%;
     width: 80%;
     min-height: 7em;
-    font: @colortheme_app-font;
-    //font-size: 20px;
-    /*font-weight: bold;*/
-    border: 1px solid black;
-
-}
-#cp-app-poll-description[disabled] {
-    resize: none;
     color: #000;
     border: 1px solid transparent;
     background-color: #eeeeee;
     font: @colortheme_app-font;
+    text-align: left;
+}
+.cp-app-poll-published {
+    #cp-app-poll-description {
+        display: none;
+        &~ .CodeMirror {
+            display: none;
+        }
+    }
+    #cp-app-poll-description-published {
+        display: block;
+        &:empty {
+            display: none;
+        }
+    }
 }
 
 #cp-app-poll-help {
-    width: 80%;
+    width: 100%;
     margin: auto;
+    padding: 20px 10%;
+    background: @poll-help-bg;
 }
 
 // from cryptpad.less

www/poll/inner.js

@@ -12,6 +12,12 @@ define([
     '/common/sframe-chainpad-listmap.js',
     '/customize/pages.js',
     '/poll/render.js',
+    '/common/diffMarked.js',
+    '/common/sframe-common-codemirror.js',
+
+    'cm/lib/codemirror',
+    'cm/mode/markdown/markdown',
+    'css!cm/lib/codemirror.css',
 
     '/bower_components/file-saver/FileSaver.min.js',
 
@@ -31,7 +37,10 @@ define([
     AppConfig,
     Listmap,
     Pages,
-    Renderer)
+    Renderer,
+    DiffMd,
+    SframeCM,
+    CMeditor)
 {
     var Messages = Cryptpad.Messages;
     var saveAs = window.saveAs;
@@ -213,6 +222,7 @@ define([
 
     var styleUserColumn = function () {
         var userid = APP.userid;
+        if (!userid) { return; }
 
         // Enable input for the userid column
         $('input[disabled="disabled"][data-rt-id^="' + userid + '"]').removeAttr('disabled')
@@ -538,6 +548,7 @@ define([
 
     /*  Called whenever an event is fired on a span */
     var handleSpan = function (span) {
+        if (!span) { return; }
         var id = span.getAttribute('data-rt-id');
         var type = Render.typeofId(id);
         var isRemove = span.className && span.className.split(' ')
@@ -570,6 +581,7 @@ define([
                     if (!res) { return; }
                     Render.removeColumn(APP.proxy, id, function () {
                         change();
+                        if (id === APP.userid) { setUserId(''); }
                     });
                 });
             } else if (isBookmark) {
@@ -674,9 +686,9 @@ define([
             bool = true;
         }
         setTablePublished(bool);
-        ['textarea'].forEach(function (sel) {
+        /*['textarea'].forEach(function (sel) {
             $(sel).attr('disabled', bool);
-        });
+        });*/
         updatePublishButton();
     };
 
@@ -722,23 +734,19 @@ define([
         }
     };
 
+    var updatePublishedDescription = function () {
+        var v = APP.editor.getValue();
+        DiffMd.apply(DiffMd.render(v || Messages.poll_descriptionHint), APP.$descriptionPublished);
+    };
     var updateDescription = function (old, n) {
         var o = APP.$description.val();
-        var op = TextPatcher.diff(o, n || '');
+        SframeCM.setValueAndCursor(APP.editor, o, n, TextPatcher);
-        var el = APP.$description[0];
+        updatePublishedDescription();
-
-        var selects = ['selectionStart', 'selectionEnd'].map(function (attr) {
-            return TextPatcher.transformCursor(el[attr], op);
-        });
-        APP.$description.val(n);
-        if (op) {
-            el.selectionStart = selects[0];
-            el.selectionEnd = selects[1];
-        }
         common.notify();
     };
     var updateLocalDescription = function (n) {
         APP.proxy.description = n;
+        updatePublishedDescription();
     };
 
     var onReady = function (info, userid) {
@@ -847,6 +855,7 @@ define([
         APP.$createCol = $('#cp-app-poll-create-user').click(function () {
             var uncommittedCopy = { content: getUncommitted('col') };
             var id = uncommittedCopy.content.colsOrder[0];
+            if (!APP.userid) { setUserId(id); }
             mergeUncommitted(proxy, uncommittedCopy, true);
             change(null, null, null, null, function() {
                 handleSpan($('.cp-app-poll-table-lock[data-rt-id="' + id + '"]')[0]);
@@ -861,21 +870,11 @@ define([
             });
         });
 
-        if (!APP.readOnly) {
-            setUserId(userid);
-        }
-
         // Description
-        var resize = function () {
+        APP.editor.on('change', function () {
-            var lineCount = APP.$description.val().split('\n').length;
+            var val = APP.editor.getValue();
-            APP.$description.css('height', lineCount + 'rem');
-        };
-        APP.$description.on('change keyup', function () {
-            var val = APP.$description.val();
             updateLocalDescription(val);
-            resize();
         });
-        resize();
 
         $('#cp-app-poll-table-scroll').html('').prepend($table);
         updateDisplayedTable();
@@ -1031,9 +1030,18 @@ define([
             APP.$body = $('body');
             APP.$bar = $('#cp-toolbar');
             APP.$content = $('#cp-app-poll-content');
+            APP.$descriptionPublished = $('#cp-app-poll-description-published');
             APP.$description = $('#cp-app-poll-description')
                 .attr('placeholder', Messages.poll_descriptionHint || 'description');
 
+            APP.editor = CMeditor.fromTextArea(APP.$description[0], {
+                lineNumbers: true,
+                lineWrapping: true,
+                styleActiveLine : true,
+                mode: "markdown",
+            });
+
+
             var listmapConfig = {
                 data: {},
                 common: common,