add invisible splitter

www/code/code.less

@@ -59,6 +59,7 @@ body {
     box-sizing: border-box;
     font-family: Calibri,Ubuntu,sans-serif;
     word-wrap: break-word;
+    position: relative;
     media-tag {
         * {
             max-width:100%;
@@ -77,6 +78,17 @@ body {
     .markdown_gfm-table(black);
 }
 
+.cp-splitter {
+    position: absolute;
+    height: 100%;
+    width: 8px;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+
+    cursor: col-resize;
+}
+
 @media (max-width: @media-medium-screen) {
     .CodeMirror {
         flex: 1;

www/code/main.js

@@ -387,6 +387,26 @@ define([
                     }
                 });
 
+                // add the splitter
+                var splitter = $('<div>', {
+                    'class': 'cp-splitter'
+                }).appendTo($iframe.find('#previewContainer'));
+
+                var $target = $iframe.find('.CodeMirror');
+                splitter.on('mousedown', function (e) {
+                    e.preventDefault();
+                    var x = e.pageX;
+                    var w = $target.width();
+
+                    $iframe.on('mouseup mousemove', function handler(evt) {
+                        if (evt.type === 'mouseup') {
+                            $iframe.off('mouseup mousemove', handler);
+                            return;
+                        }
+                        $target.css('width', (w - x + evt.pageX) + 'px');
+                    });
+                });
+
                 Cryptpad.removeLoadingScreen();
                 setEditable(true);
                 initializing = false;