mbeditor 0.13.1 → 0.14.1

data/app/assets/javascripts/mbeditor/components/ChangelogView.js

@@ -7,100 +7,80 @@
 (function() {
   var _React = React;
   var useEffect = _React.useEffect;
+  var useState = _React.useState;
 
-  // ---------------------------------------------------------------------------
-  // Lightweight markdown → React elements renderer, tuned for CHANGELOG format.
-  // Handles: h1/h2/h3, bullet lists, blank lines, horizontal rules, inline **bold**.
-  // ---------------------------------------------------------------------------
-  function parseInline(text) {
-    // Split on **bold** markers and return a mixed array of strings + bold spans.
-    var parts = text.split(/\*\*([^*]+)\*\*/g);
-    return parts.map(function(part, i) {
-      return i % 2 === 1
-        ? React.createElement('strong', { key: i }, part)
-        : part;
-    });
-  }
+  var SECTION_ICONS = { Added: 'fas fa-plus-circle', Fixed: 'fas fa-wrench', Changed: 'fas fa-exchange-alt', Removed: 'fas fa-minus-circle', Performance: 'fas fa-bolt', Tests: 'fas fa-vial', Security: 'fas fa-shield-alt' };
+  // Shared with EditorPanel.js's markdown preview, which renders untrusted
+  // workspace files through the same marked renderer. One definition on
+  // purpose: this is the allow-list that keeps `javascript:` out of an href,
+  // and a second copy is how one of them silently stops matching the other.
+  var SAFE_HREF_SCHEME = /^(https?:|mailto:|#|\/)/i;
 
-  function renderMarkdown(markdown) {
-    var lines = markdown.split('\n');
-    var elements = [];
-    var listBuffer = [];
-    var key = 0;
-
-    function flushList() {
-      if (!listBuffer.length) return;
-      elements.push(React.createElement(
-        'ul', { key: 'ul' + key++, className: 'changelog-list' },
-        listBuffer.slice()
-      ));
-      listBuffer = [];
-    }
+  window.mbeditorEscapeHtml = function escapeHtml(str) {
+    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  };
 
-    lines.forEach(function(line) {
-      // H1
-      if (/^# /.test(line)) {
-        flushList();
-        elements.push(React.createElement('h1', { key: key++, className: 'changelog-h1' }, line.slice(2).trim()));
-        return;
-      }
-      // H2 — version line, e.g. "## [0.7.0] - 2026-05-21"
-      if (/^## /.test(line)) {
-        flushList();
-        var raw = line.slice(3).trim();
-        // Parse "[X.Y.Z] - DATE" or "[Unreleased]..." patterns
-        var vMatch = raw.match(/^\[([^\]]+)\](?:\s*-\s*(.+))?/);
-        if (vMatch) {
-          elements.push(React.createElement(
-            'div', { key: key++, className: 'changelog-version-row' },
-            React.createElement('span', { className: 'changelog-version-badge' }, vMatch[1]),
-            vMatch[2] && React.createElement('span', { className: 'changelog-version-date' }, vMatch[2].trim())
-          ));
-        } else {
-          elements.push(React.createElement('div', { key: key++, className: 'changelog-version-row' },
-            React.createElement('span', { className: 'changelog-version-badge' }, raw)
-          ));
-        }
-        return;
-      }
-      // H3 — section name, e.g. "### Added"
-      if (/^### /.test(line)) {
-        flushList();
-        var section = line.slice(4).trim();
-        var iconMap = { Added: 'fas fa-plus-circle', Fixed: 'fas fa-wrench', Changed: 'fas fa-exchange-alt', Removed: 'fas fa-minus-circle', Performance: 'fas fa-bolt', Tests: 'fas fa-vial', Security: 'fas fa-shield-alt' };
-        var iconClass = iconMap[section] || 'fas fa-tag';
-        elements.push(React.createElement(
-          'div', { key: key++, className: 'changelog-section changelog-section-' + section.toLowerCase() },
-          React.createElement('i', { className: iconClass }),
-          ' ',
-          section
-        ));
-        return;
-      }
-      // Horizontal rule
-      if (/^---+$/.test(line.trim())) {
-        flushList();
-        elements.push(React.createElement('hr', { key: key++, className: 'changelog-rule' }));
-        return;
-      }
-      // Bullet list item
-      if (/^- /.test(line)) {
-        listBuffer.push(React.createElement('li', { key: key++ }, parseInline(line.slice(2).trim())));
-        return;
+  window.mbeditorSafeHref = function safeHref(href) {
+    if (!href) return href;
+    return SAFE_HREF_SCHEME.test(href.trim()) ? href : '#';
+  };
+
+  var escapeHtml = window.mbeditorEscapeHtml;
+  var safeHref = window.mbeditorSafeHref;
+
+  // Custom marked.Renderer() that layers the changelog's bespoke presentation
+  // (version badges on H2, section icons on H3) over marked's own HTML, plus
+  // the same link/image href scheme allow-list EditorPanel.js uses. marked's
+  // Renderer methods here take positional args (href, title, text) — not the
+  // token objects EditorPanel.js's override checks for — so that override is
+  // effectively a no-op against the vendored marked build; this one uses the
+  // signature marked actually calls.
+  function buildRenderer() {
+    var renderer = new window.marked.Renderer();
+
+    renderer.heading = function(text, level) {
+      if (level === 2) {
+        var vMatch = text.match(/^\[([^\]]+)\](?:\s*-\s*(.+))?/);
+        var badge = vMatch ? vMatch[1] : text;
+        var date = vMatch && vMatch[2] ? vMatch[2].trim() : '';
+        return '<div class="changelog-version-row"><span class="changelog-version-badge">' + badge + '</span>' +
+          (date ? '<span class="changelog-version-date">' + date + '</span>' : '') + '</div>\n';
       }
-      // Blank line
-      if (line.trim() === '') {
-        flushList();
-        return;
+      if (level === 3) {
+        var iconClass = SECTION_ICONS[text] || 'fas fa-tag';
+        return '<div class="changelog-section changelog-section-' + text.toLowerCase() + '"><i class="' + iconClass + '"></i> ' + text + '</div>\n';
       }
-      // Plain paragraph (links, prose)
-      flushList();
-      if (/^\[.+\]: /.test(line)) return; // skip reference-style link defs
-      elements.push(React.createElement('p', { key: key++, className: 'changelog-p' }, parseInline(line.trim())));
-    });
-
-    flushList();
-    return elements;
+      return '<h1 class="changelog-h1">' + text + '</h1>\n';
+    };
+
+    renderer.list = function(body, ordered, start) {
+      var tag = ordered ? 'ol' : 'ul';
+      var cls = ordered ? '' : ' class="changelog-list"';
+      return '<' + tag + cls + '>\n' + body + '</' + tag + '>\n';
+    };
+
+    renderer.paragraph = function(text) {
+      return '<p class="changelog-p">' + text + '</p>\n';
+    };
+
+    renderer.hr = function() {
+      return '<hr class="changelog-rule">\n';
+    };
+
+    renderer.html = function(html) {
+      return '<pre>' + escapeHtml(html) + '</pre>';
+    };
+
+    var _origLink = renderer.link.bind(renderer);
+    var _origImage = renderer.image.bind(renderer);
+    renderer.link = function(href, title, text) {
+      return _origLink(safeHref(href), title, text);
+    };
+    renderer.image = function(href, title, text) {
+      return _origImage(safeHref(href), title, text);
+    };
+
+    return renderer;
   }
 
   // ---------------------------------------------------------------------------
@@ -109,11 +89,24 @@
   var ChangelogView = function ChangelogView(props) {
     var changelogState = props.changelogState;
     var onLoad = props.onLoad;
+    var content = (changelogState && changelogState.content) || '';
+
+    var _markupState = useState('');
+    var markup = _markupState[0];
+    var setMarkup = _markupState[1];
 
     useEffect(function() {
       if (onLoad) onLoad();
     }, []);
 
+    useEffect(function() {
+      if (!window.marked || !content) {
+        setMarkup('');
+        return;
+      }
+      setMarkup(window.marked.parse(content, { renderer: buildRenderer() }));
+    }, [content]);
+
     if (!changelogState || changelogState.loading) {
       return React.createElement(
         'div', { className: 'changelog-loading' },
@@ -130,14 +123,16 @@
       );
     }
 
-    var content = changelogState.content || '';
+    if (!window.marked) {
+      return React.createElement(
+        'div', { className: 'changelog-view' },
+        React.createElement('div', { className: 'changelog-body', style: { whiteSpace: 'pre-wrap' } }, content)
+      );
+    }
 
     return React.createElement(
       'div', { className: 'changelog-view' },
-      React.createElement(
-        'div', { className: 'changelog-body' },
-        renderMarkdown(content)
-      )
+      React.createElement('div', { className: 'changelog-body', dangerouslySetInnerHTML: { __html: markup } })
     );
   };
 

data/app/assets/javascripts/mbeditor/components/CodeReviewPanel.js

@@ -5,19 +5,16 @@ var CodeReviewPanel = function CodeReviewPanel(_ref) {
   var onClose = _ref.onClose;
 
   var _React$useState = React.useState(null),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      redmineIssue = _React$useState2[0],
-      setRedmineIssue = _React$useState2[1];
+      redmineIssue = _React$useState[0],
+      setRedmineIssue = _React$useState[1];
 
   var _React$useState3 = React.useState(null),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      redmineError = _React$useState4[0],
-      setRedmineError = _React$useState4[1];
+      redmineError = _React$useState3[0],
+      setRedmineError = _React$useState3[1];
 
   var _React$useState5 = React.useState(false),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      isRedmineLoading = _React$useState6[0],
-      setIsRedmineLoading = _React$useState6[1];
+      isRedmineLoading = _React$useState5[0],
+      setIsRedmineLoading = _React$useState5[1];
 
   var branchIdMatch = gitInfo && gitInfo.branch && gitInfo.branch.match(/(?:feature|bug|hotfix|task)\/(?:#)?(\d+)/i);
   var issueId = branchIdMatch ? branchIdMatch[1] : null;

data/app/assets/javascripts/mbeditor/components/CollapsibleSection.js

@@ -1,6 +1,5 @@
 "use strict";
 
-var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; })();
 
 var _React = React;
 var useState = _React.useState;
@@ -17,13 +16,16 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
   var icon = _ref$icon === undefined ? null : _ref$icon;
   var _ref$actions = _ref.actions;
   var actions = _ref$actions === undefined ? null : _ref$actions;
+  // A section with nowhere to collapse to. The file tree fills the sidebar and
+  // collapsing it leaves an empty panel, so it gets no chevron and no click.
+  var _ref$collapsible = _ref.collapsible;
+  var collapsible = _ref$collapsible === undefined ? true : _ref$collapsible;
 
   var _useState = useState(isCollapsed);
 
-  var _useState2 = _slicedToArray(_useState, 2);
 
-  var localCollapsed = _useState2[0];
-  var setLocalCollapsed = _useState2[1];
+  var localCollapsed = _useState[0];
+  var setLocalCollapsed = _useState[1];
 
   // Sync parent isCollapsed prop to local state when it changes
   useEffect(function () {
@@ -44,8 +46,11 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     { className: "collapsible-section" },
     React.createElement(
       "div",
-      { className: "collapsible-header", onClick: toggleCollapsed },
-      React.createElement("i", { className: "collapsible-toggle fas fa-chevron-" + (localCollapsed ? 'right' : 'down') }),
+      {
+        className: "collapsible-header" + (collapsible ? "" : " collapsible-header-static"),
+        onClick: collapsible ? toggleCollapsed : undefined
+      },
+      collapsible && React.createElement("i", { className: "collapsible-toggle fas fa-chevron-" + (localCollapsed ? 'right' : 'down') }),
       icon && React.createElement("i", { className: "collapsible-icon " + icon }),
       React.createElement(
         "span",
@@ -62,7 +67,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
         actions
       )
     ),
-    !localCollapsed && React.createElement(
+    (!collapsible || !localCollapsed) && React.createElement(
       "div",
       { className: "collapsible-content" },
       children

data/app/assets/javascripts/mbeditor/components/CombinedDiffViewer.js

@@ -32,18 +32,38 @@ var CombinedDiffViewer = function CombinedDiffViewer(_ref) {
   }
 
   // Split the raw diff into per-file segments, each starting at "diff --git".
+  // Anything before the first such header is not a file diff — it's the
+  // explanatory "# ..." text tab_manager.js substitutes when there's no base
+  // branch to compare against, or nothing changed — so it must be shown
+  // rather than silently dropped, or the tab reads as a blank diff.
   var segments = [];
   var current = null;
+  var preamble = [];
   diffText.split('\n').forEach(function (line) {
     if (line.startsWith('diff --git ')) {
       if (current) segments.push(current);
       current = { header: line, lines: [line] };
     } else if (current) {
       current.lines.push(line);
+    } else {
+      preamble.push(line);
     }
   });
   if (current) segments.push(current);
 
+  if (segments.length === 0) {
+    var message = preamble.join('\n').trim().replace(/^#\s*/, '');
+    // Info, not the green tick used for a genuinely empty diff above: this
+    // branch also carries "no base branch to compare against", which is a
+    // problem to act on rather than a clean result.
+    return React.createElement(
+      'div',
+      { className: 'combined-diff-viewer combined-diff-empty' },
+      React.createElement('i', { className: 'fas fa-info-circle', style: { marginRight: 8 } }),
+      message || 'No changes.'
+    );
+  }
+
   // Extract a clean display path from the "diff --git a/foo b/foo" header
   function extractPath(headerLine) {
     var m = headerLine.match(/^diff --git a\/(.+) b\/(.+)$/);

data/app/assets/javascripts/mbeditor/components/CombinedFileView.js

@@ -0,0 +1,214 @@
+"use strict";
+
+// CombinedFileView — read-only stack of several files on one scrolling page.
+// `paths` are workspace-relative file paths (already capped by the caller);
+// `total` is the pre-cap count so truncation is shown, never silent.
+
+(function() {
+  var useEffect = React.useEffect;
+  var useState = React.useState;
+  var CONCURRENCY = 6;
+
+  function languageFor(path) {
+    if (!(window.monaco && monaco.editor && monaco.editor.colorize)) return null;
+    var m = /\.[^./]+$/.exec(path);
+    if (!m) return null;
+    var ext = m[0].toLowerCase();
+    var lang = monaco.languages.getLanguages().find(function (l) { return (l.extensions || []).indexOf(ext) !== -1; });
+    return lang ? lang.id : null;
+  }
+
+  function download(path) {
+    var link = document.createElement('a');
+    link.href = window.mbeditorBasePath() + '/raw?download=1&path=' + encodeURIComponent(path);
+    link.download = path.split('/').pop();
+    link.rel = 'noopener';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    EditorStore.setStatus('Downloading ' + link.download + '...', 'info');
+  }
+
+  function copyText(text, okMsg, failMsg) {
+    if (!navigator.clipboard) return;
+    navigator.clipboard.writeText(text).then(
+      function () { EditorStore.setStatus(okMsg, 'info'); },
+      function () { EditorStore.setStatus(failMsg, 'error'); }
+    );
+  }
+
+  function indentOf(line) { return /^\s*/.exec(line || '')[0]; }
+
+  // The selected methods (indexes into info.methods) with the class/module
+  // skeleton that holds them, in source order. Pieces that are not adjacent
+  // inside the same owner are separated by a `# ...` line.
+  function methodSlice(content, info, picked) {
+    var lines = content.split('\n');
+    var out = [];
+    var open = [];
+    var prev = null;
+    function contains(o, m) { return o.start_line <= m.start_line && o.end_line >= m.end_line; }
+    function close(n) {
+      while (open.length > n) { var o = open.pop(); out.push(indentOf(lines[o.start_line - 1]) + 'end'); }
+    }
+    info.methods.filter(function (m, i) { return picked[i]; })
+      .sort(function (a, b) { return a.start_line - b.start_line; })
+      .forEach(function (m) {
+        var chain = info.owners.filter(function (o) { return contains(o, m); });
+        var keep = 0;
+        while (keep < open.length && keep < chain.length && open[keep] === chain[keep]) keep++;
+        close(keep);
+        var reopened = open.length < chain.length;
+        for (var k = open.length; k < chain.length; k++) { out.push(lines[chain[k].start_line - 1]); open.push(chain[k]); }
+        if (prev && !reopened && m.doc_start_line > prev.end_line + 1) out.push(indentOf(lines[m.start_line - 1]) + '# ...');
+        else if (prev && !reopened) out.push('');
+        out.push.apply(out, lines.slice(m.doc_start_line - 1, m.end_line));
+        prev = m;
+      });
+    close(0);
+    return out.join('\n');
+  }
+
+  function fenceFor(text) {
+    var f = '```';
+    while (text.indexOf(f) !== -1) f += '`';
+    return f;
+  }
+
+  // paths: ordered file paths; files: path -> loaded entry; info: path -> {methods, owners};
+  // picked: path -> {methodIndex: true}. A file with any picked method exports only those.
+  function buildMarkdown(paths, files, info, picked) {
+    var parts = [];
+    paths.forEach(function (path) {
+      var e = files[path];
+      if (!e || e.content == null) return;
+      var sel = picked[path] || {};
+      var body = e.content;
+      if (info[path] && info[path].methods && Object.keys(sel).some(function (k) { return sel[k]; })) {
+        body = methodSlice(e.content, info[path], sel);
+      }
+      var fence = fenceFor(body);
+      var ext = (/\.([^./]+)$/.exec(path) || [])[1] || '';
+      var lang = { rb: 'ruby', js: 'javascript', jsx: 'jsx', ts: 'typescript', tsx: 'tsx', yml: 'yaml', md: 'markdown', sh: 'bash' }[ext] || ext;
+      parts.push('## ' + path + '\n\n' + fence + lang + '\n' + body.replace(/\n$/, '') + '\n' + fence + '\n');
+    });
+    return parts.join('\n');
+  }
+
+  function bundleName() {
+    return 'mbeditor-bundle-' + new Date().toISOString().replace(/[-:]/g, '').replace(/\..*$/, '').replace('T', '-') + '.md';
+  }
+
+  function downloadText(text, filename) {
+    var objectUrl = URL.createObjectURL(new Blob([text], { type: 'text/markdown' }));
+    var link = document.createElement('a');
+    link.href = objectUrl;
+    link.download = filename;
+    link.rel = 'noopener';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    // Revoking in the same tick can free the blob before the browser has
+    // started reading it, which cancels the download instead of saving it.
+    setTimeout(function () { URL.revokeObjectURL(objectUrl); }, 60000);
+    EditorStore.setStatus('Downloading ' + filename + '...', 'info');
+  }
+
+  var CombinedFileView = function CombinedFileView(props) {
+    var paths = props.paths;
+    var _s = useState({});
+    var files = _s[0];
+    var setFiles = _s[1];
+    var _m = useState({});
+    var info = _m[0];
+    var setInfo = _m[1];
+    var asked = React.useRef({});
+    var _p = useState({});
+    var picked = _p[0];
+    var setPicked = _p[1];
+
+    // Method ranges for Ruby files, fetched once each file has loaded. No
+    // cancel-on-rerun: every file load re-runs this, and cancelling would drop
+    // the requests still in flight. The view is keyed per tab, so paths never
+    // change underneath it.
+    useEffect(function () {
+      paths.forEach(function (path) {
+        if (!/\.rb$/.test(path) || !files[path] || files[path].content == null || asked.current[path]) return;
+        asked.current[path] = true;
+        FileService.getRubyMethods(files[path].content).then(function (r) {
+          setInfo(function (prev) { var o = Object.assign({}, prev); o[path] = r.error ? { error: r.error } : r; return o; });
+        }, function () {
+          setInfo(function (prev) { var o = Object.assign({}, prev); o[path] = { error: 'Could not read methods' }; return o; });
+        });
+      });
+    }, [paths, files]);
+
+    var toggle = function (path, i) {
+      setPicked(function (prev) {
+        var o = Object.assign({}, prev);
+        var sel = Object.assign({}, o[path] || {});
+        if (sel[i]) delete sel[i]; else sel[i] = true;
+        o[path] = sel;
+        return o;
+      });
+    };
+
+
+    useEffect(function () {
+      var cancelled = false;
+      var next = 0;
+      function put(path, entry) {
+        if (!cancelled) setFiles(function (prev) { var o = Object.assign({}, prev); o[path] = entry; return o; });
+      }
+      function worker() {
+        if (cancelled || next >= paths.length) return Promise.resolve();
+        var path = paths[next++];
+        return FileService.getFile(path).then(function (data) {
+          if (data && data.image) { put(path, { note: 'Image file, not shown' }); return; }
+          if (!data || typeof data.content !== 'string') { put(path, { note: 'Binary or unreadable file, not shown' }); return; }
+          var lang = languageFor(path);
+          if (!lang) { put(path, { content: data.content }); return; }
+          return monaco.editor.colorize(data.content, lang, { tabSize: 2 }).then(
+            function (html) { put(path, { content: data.content, html: html }); },
+            function () { put(path, { content: data.content }); }
+          );
+        })['catch'](function () { put(path, { note: 'Could not load file' }); }).then(worker);
+      }
+      for (var i = 0; i < CONCURRENCY; i++) worker();
+      return function () { cancelled = true; };
+    }, [paths]);
+
+    return React.createElement('div', { className: 'combined-view' },
+      React.createElement('div', { className: 'combined-toolbar' },
+        React.createElement('button', { type: 'button', className: 'combined-file-btn', onClick: function () { downloadText(buildMarkdown(paths, files, info, picked), bundleName()); } }, 'Download .md'),
+        React.createElement('button', { type: 'button', className: 'combined-file-btn', onClick: function () { copyText(buildMarkdown(paths, files, info, picked), 'Copied Markdown bundle', 'Could not copy Markdown bundle'); } }, 'Copy .md')
+      ),
+      props.total > paths.length && React.createElement('div', { className: 'combined-note' },
+        'Showing the first ' + paths.length + ' of ' + props.total + ' files.'),
+      paths.map(function (path) {
+        var e = files[path];
+        return React.createElement('section', { key: path, className: 'combined-file' },
+          React.createElement('div', { className: 'combined-file-header' },
+            React.createElement('span', { className: 'combined-file-path' }, path),
+            React.createElement('button', { type: 'button', className: 'combined-file-btn', disabled: !e || e.content == null, onClick: function () { copyText(e.content, 'Copied ' + path, 'Could not copy ' + path); } }, 'Copy'),
+            React.createElement('button', { type: 'button', className: 'combined-file-btn', onClick: function () { download(path); } }, 'Download')
+          ),
+          info[path] && info[path].methods && info[path].methods.length > 0 && React.createElement('div', { className: 'combined-methods' },
+            info[path].methods.map(function (m, i) {
+              var label = (m.owner ? m.owner + (m.singleton ? '.' : '#') : (m.singleton ? '.' : '#')) + m.name;
+              return React.createElement('label', { key: i, className: 'combined-method', title: 'lines ' + m.start_line + '-' + m.end_line },
+                React.createElement('input', { type: 'checkbox', checked: !!(picked[path] && picked[path][i]), onChange: function () { toggle(path, i); } }),
+                label);
+            })
+          ),
+          !e ? React.createElement('div', { className: 'combined-note' }, 'Loading...') :
+            e.note ? React.createElement('div', { className: 'combined-note' }, e.note) :
+            e.html ? React.createElement('pre', { className: 'combined-file-body', dangerouslySetInnerHTML: { __html: e.html } }) :
+            React.createElement('pre', { className: 'combined-file-body' }, e.content)
+        );
+      })
+    );
+  };
+
+  window.CombinedFileView = CombinedFileView;
+})();

data/app/assets/javascripts/mbeditor/components/DiffViewer.js

@@ -110,7 +110,7 @@ var DiffViewer = function DiffViewer(_ref) {
       'js': 'javascript', 'jsx': 'javascript',
       'ts': 'typescript', 'tsx': 'typescript',
       'json': 'json', 'yml': 'yaml', 'yaml': 'yaml',
-      'css': 'css', 'scss': 'css', 'sass': 'css',
+      'css': 'css', 'scss': 'scss', 'less': 'less', 'sass': 'css',
       'html': 'html', 'erb': 'erb', 'haml': 'haml',
       'xml': 'xml', 'md': 'markdown', 'markdown': 'markdown',
       'sh': 'shell', 'bash': 'shell', 'zsh': 'shell'