☰

Reddit - side-by-side editor and RES preview

Show the edit box and preview next to each other when writing comments if you have RES installed

  1. // ==UserScript==
  2. // @name           Reddit - side-by-side editor and RES preview
  3. // @description    Show the edit box and preview next to each other when writing comments if you have RES installed
  4. // @author         James Skinner <spiralx@gmail.com> (http://github.com/spiralx)
  5. // @namespace      http://spiralx.org/
  6. // @match          *://*.reddit.com/r/*/comments/*
  7. // @match          *://*.reddit.com/comments/*
  8. // @match          *://*.reddit.com/message/*
  9. // @version        0.1.0
  10. // @grant          none
  11. // @require        https://greasyfork.org/scripts/7602-mutation-observer/code/mutation-observer.js
  12. // ==/UserScript==
  13.  
  14.  
  15. jQuery.fn.contentExpand = (function() {
  16.   let $hidden = jQuery('<div>')
  17.     .css({
  18.       display: 'none',
  19.       whiteSpace: 'pre-wrap',
  20.       wordWrap: 'break-word',
  21.       overflowWrap: 'break-word',
  22.       overflow: 'hidden'
  23.     })
  24.     .appendTo('body');
  25.  
  26.   return function() {
  27.     return this.each(function() {
  28.       let $ta = jQuery(this).css({
  29.         overflow: 'hidden',
  30.         resize: 'none'
  31.       });
  32.       
  33.       $ta.on('keyup', ev => {
  34.         let content = $ta.val().replace(/\n/g, '<br>') + '<br style="line-height: 3px">';
  35.         
  36.         $hidden
  37.           .css({
  38.             width: $ta.width(),
  39.             minHeight: $ta.css('min-height'),
  40.             font: $ta.css('font'),
  41.             lineHeight: $ta.css('line-height')
  42.           })
  43.           .html(content);
  44.           
  45.         $ta.css('height', $hidden.height());
  46.       });
  47.     });
  48.   }
  49. })();
  50.  
  51.  
  52. var observer = new MutationSummary({
  53.   callback: function(summaries) {
  54.     //console.info('Added %d forms', summaries[0].added.length);
  55.     
  56.     try {
  57.       jQuery(summaries[0].added).each(function() {
  58.         var $form = jQuery(this),
  59.           $editWrapper = $form.children('.usertext-edit'),
  60.           $mdWrapper = $editWrapper.children('.markdownEditor-wrapper'),
  61.           $edit = $editWrapper.children('.md'),
  62.           $res = $form.find('.livePreview');
  63.           
  64.         //console.log($form[0].outerHTML);
  65.         //console.info($mdWrapper);
  66.         //console.info($edit);
  67.         //console.info($res);
  68.         
  69.         $editWrapper.css({
  70.           width: '100%',
  71.           padding: '0px',
  72.           marginLeft: '15px'
  73.         });
  74.         
  75.         $res.css({
  76.           margin: '0 15px 15px'
  77.         });
  78.  
  79.         // Move RES editor next to textarea, wrap each in divs for positioning
  80.         $edit
  81.           .css({
  82.             maxWidth: '100%',
  83.             width: '100%',
  84.             clear: 'both'
  85.           })
  86.             .append($res)
  87.             .children()
  88.               .first()
  89.                 .css({
  90.                   width: '100%'
  91.                 })
  92.                 .contentExpand()
  93.                 .wrap('<div style="float: left; width: 50%;">')
  94.                 .end()
  95.               .last()
  96.                 .wrap('<div style="display: inline-block; width: 50%;">');
  97.  
  98.  
  99.         // Wrap toolbar, extras in divs for positioning side-by-side
  100.         $mdWrapper
  101.           .css({
  102.             maxWidth: '100%',
  103.             width: '100%',
  104.             clear: 'both'
  105.           })
  106.             .children()
  107.               .slice(1)
  108.                 .wrapAll('<div style="display: inline-block; width: 50%;">')
  109.                 .end()
  110.               .first()
  111.                 .wrap('<div style="float: left; width: 50%;">');
  112.  
  113.  
  114.         // Swap macro dropdown and name around, float left and right respectively
  115.         let $commentAs = $mdWrapper.find('.commentingAs'),
  116.           $macro = $commentAs.next();
  117.           
  118.         $macro
  119.           .css({
  120.             'float': 'left',
  121.             margin: '0 0 0 15px'
  122.           });
  123.           
  124.         $commentAs
  125.           .css({
  126.             'float': 'right',
  127.             clear: 'none',
  128.             margin: '0 15px 0 0'
  129.           })
  130.           .insertAfter($macro);
  131.       });
  132.     }
  133.     catch (ex) {
  134.       console.error(ex);
  135.     }
  136.   },
  137.   rootNode: document.body,
  138.   queries: [
  139.     { element: 'form.usertext' }
  140.   ]
  141. });