markdownr 0.5.11 → 0.5.12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 49c6809e18e2fe51a4e65446e185529edd529e61bb77e6eea79696b734ebdb8b
-  data.tar.gz: 9d533023489082e69413b4e718c27efa05076f1da863f25d9d68de26bd3ec090
+  metadata.gz: 280f1aab156292d75fc2e561f222bb7b92870cb85a68df13494f4614855f437f
+  data.tar.gz: dd83fcbf5303eb687017a7bf5783d4557a5e723e367c5c0641c0e072e8ddab23
 SHA512:
-  metadata.gz: a2602173ee41f8d6034e410a8deba4fb11f5f3149e39c410dbc6366349dc93ba0bec519c6860e4970a7f14ed20dd5f8eeadf03d6452e821993e0d0450bebf19e
-  data.tar.gz: a5dc9a0bb156371fddcbdcdab626ee36b82079a175c56d967f7d4ed1f746d5f191bf709efbb7c0d4cb4f8419d072f51b1d92c8e39e90c8e643c220ebe57d4cbf
+  metadata.gz: b31d87695427970ae2dd48e4f01b3b39ca5e7e1b7ff1a57a83d231d386881975158a72d4501bb57d838f8247f832892483b70a815fba7b46ae8099eabce3da2d
+  data.tar.gz: 7e46d20ad61fd47243ad69b02ed95e282817e94b5726d5c3f8d46b1b72a9af4856de17de71b234d0fb2b8a6e506cb21bd4e199c0f1460e38e3c02463cb33a704

data/lib/markdown_server/app.rb

@@ -125,6 +125,12 @@ module MarkdownServer
       end
 
       def render_markdown(text)
+        # Convert mermaid code fences to raw HTML divs before Kramdown so Rouge
+        # never touches them and the content is preserved exactly for Mermaid.js.
+        text = text.gsub(/^```mermaid[ \t]*\r?\n([\s\S]*?)^```[ \t]*(\r?\n|\z)/m) do
+          "<div class=\"mermaid\">\n#{h($1.rstrip)}\n</div>\n\n"
+        end
+
         # Process wiki links BEFORE Kramdown so that | isn't consumed as
         # a GFM table delimiter.
         text = text.gsub(/\[\[([^\]]+)\]\]/) do

data/lib/markdown_server/version.rb

@@ -1,3 +1,3 @@
 module MarkdownServer
-  VERSION = "0.5.11"
+  VERSION = "0.5.12"
 end

data/views/layout.erb

@@ -815,6 +815,32 @@
       flex-shrink: 0;
     }
     .link-ctx-popup-back:hover { color: #2c2c2c; }
+    .link-ctx-popup-pin {
+      background: none;
+      border: none;
+      color: #bbb;
+      cursor: pointer;
+      padding: 0 0.2rem;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      line-height: 1;
+    }
+    .link-ctx-popup-pin:hover { color: #2c2c2c; }
+    .link-ctx-popup-pin.pinned { color: #8b6914; }
+    .link-ctx-popup--pinned {
+      resize: both;
+      max-height: none;
+      min-width: 280px;
+      min-height: 120px;
+    }
+    .link-ctx-popup--pinned .link-ctx-popup-header {
+      cursor: grab;
+      user-select: none;
+    }
+    .link-ctx-popup--pinned .link-ctx-popup-header.is-dragging {
+      cursor: grabbing;
+    }
     .link-ctx-popup-body {
       padding: 0.75rem 1rem;
     }
@@ -829,6 +855,10 @@
       margin-bottom: 0.5rem;
     }
 
+    /* Mermaid diagrams */
+    .mermaid { text-align: center; margin: 1.2rem 0; overflow-x: auto; }
+    .mermaid svg { max-width: 100%; height: auto; }
+
     /* Link preview popup (hover) */
     .link-tooltip-anchor { position: relative; }
     .link-preview-popup {
@@ -1550,12 +1580,34 @@
       }, { passive: true });
     })();
 
+    // Mermaid diagram rendering — lazily loads Mermaid.js on first use
+    var mermaidReady = false;
+    var mermaidQueue = [];
+    function runMermaidIn(container) {
+      var nodes = Array.prototype.slice.call(container.querySelectorAll('.mermaid:not([data-processed="true"])'));
+      if (!nodes.length) return;
+      var doRender = function() { mermaid.run({ nodes: nodes }); };
+      if (mermaidReady) { doRender(); return; }
+      mermaidQueue.push(doRender);
+      if (mermaidQueue.length > 1) return;
+      var s = document.createElement('script');
+      s.src = 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js';
+      s.onload = function() {
+        mermaid.initialize({ startOnLoad: false, theme: 'neutral' });
+        mermaidReady = true;
+        mermaidQueue.splice(0).forEach(function(fn) { fn(); });
+      };
+      document.head.appendChild(s);
+    }
+    runMermaidIn(document.body);
+
     // Left-click / tap popup for all links
     (function() {
       var cache = Object.create(null);
       var popup = null;
       var touchMoved = false;
       var historyStack = [];
+      var pinnedPopups = [];
       var currentPopupPos = { x: 0, y: 0 };
       var mouseLeaveTimer = null;
 
@@ -1584,6 +1636,7 @@
       }
 
       var extLinkIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle;flex-shrink:0"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>';
+      var pinIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle"><line x1="12" y1="17" x2="12" y2="22"/><path d="M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z"/></svg>';
 
       function showPopup(x, y, title, bodyHtml, href, linkRect) {
         // Remove old popup without clearing historyStack
@@ -1593,6 +1646,7 @@
 
         popup = document.createElement('div');
         popup.className = 'link-ctx-popup';
+        var thisPopup = popup;
         var backBtn = historyStack.length > 0 ? '<button class="link-ctx-popup-back" aria-label="Back">\u2190</button>' : '';
         var titleHtml = href
           ? '<div class="link-ctx-popup-title-wrap">' +
@@ -1603,6 +1657,7 @@
         popup.innerHTML =
           '<div class="link-ctx-popup-header">' +
             backBtn + titleHtml +
+            '<button class="link-ctx-popup-pin" aria-label="Pin" title="Pin popup">' + pinIcon + '</button>' +
             '<button class="link-ctx-popup-close" aria-label="Close">\u00d7</button>' +
           '</div>' +
           '<div class="link-ctx-popup-body">' + bodyHtml + '</div>';
@@ -1610,27 +1665,38 @@
 
         clearTimeout(mouseLeaveTimer);
         popup.addEventListener('mouseleave', function() {
+          if (thisPopup.dataset.pinned) return;
           mouseLeaveTimer = setTimeout(hidePopup, 150);
         });
         popup.addEventListener('mouseenter', function() {
+          if (thisPopup.dataset.pinned) return;
           clearTimeout(mouseLeaveTimer);
         });
 
         repositionPopup();
+        runMermaidIn(popup);
 
         var backBtnEl = popup.querySelector('.link-ctx-popup-back');
         if (backBtnEl) {
           backBtnEl.addEventListener('click', function(e) {
             e.stopPropagation();
             var prev = historyStack.pop();
-            if (prev) showPopup(prev.x, prev.y, prev.title, prev.bodyHtml, prev.href, prev.linkRect);
+            if (prev) {
+              showPopup(prev.x, prev.y, prev.title, prev.bodyHtml, prev.href, prev.linkRect);
+              if (popup && prev.scrollTop) popup.scrollTop = prev.scrollTop;
+            }
           });
         }
         popup.querySelector('.link-ctx-popup-close').addEventListener('click', hidePopup);
+        popup.querySelector('.link-ctx-popup-pin').addEventListener('click', function(e) {
+          e.stopPropagation();
+          if (!thisPopup.dataset.pinned) pinPopup(thisPopup);
+        });
         popup.addEventListener('click', function(e) { e.stopPropagation(); });
 
         // Links in the popup body push current state to history, then open a new popup
-        // at the same screen position as the current popup
+        // at the same screen position as the current popup.
+        // When the popup is pinned, links open a new floating popup at the click position instead.
         var body = popup.querySelector('.link-ctx-popup-body');
         body.addEventListener('click', function(e) {
           var anchor = findLink(e.target);
@@ -1639,13 +1705,15 @@
           if (!linkHref || isAnchorOnly(linkHref)) return;
           e.stopPropagation();
           e.preventDefault();
+          if (thisPopup.dataset.pinned) { handleLink(anchor, e.clientX, e.clientY, false); return; }
           var savedPos = { x: currentPopupPos.x, y: currentPopupPos.y, linkRect: currentPopupPos.linkRect };
-          var titleEl = popup.querySelector('.link-ctx-popup-title');
+          var titleEl = thisPopup.querySelector('.link-ctx-popup-title');
           historyStack.push({
             x: savedPos.x, y: savedPos.y, linkRect: savedPos.linkRect,
             title: titleEl ? titleEl.querySelector('span').textContent : '',
             bodyHtml: body.innerHTML,
-            href: titleEl ? (titleEl.getAttribute('href') || '') : ''
+            href: titleEl ? (titleEl.getAttribute('href') || '') : '',
+            scrollTop: thisPopup.scrollTop
           });
           handleLink(anchor, savedPos.x, savedPos.y, true);
         });
@@ -1657,13 +1725,15 @@
           if (!linkHref || isAnchorOnly(linkHref)) return;
           e.stopPropagation();
           e.preventDefault();
+          if (thisPopup.dataset.pinned) { handleLink(anchor, e.clientX, e.clientY, false); return; }
           var savedPos = { x: currentPopupPos.x, y: currentPopupPos.y, linkRect: currentPopupPos.linkRect };
-          var titleEl = popup.querySelector('.link-ctx-popup-title');
+          var titleEl = thisPopup.querySelector('.link-ctx-popup-title');
           historyStack.push({
             x: savedPos.x, y: savedPos.y, linkRect: savedPos.linkRect,
             title: titleEl ? titleEl.querySelector('span').textContent : '',
             bodyHtml: body.innerHTML,
-            href: titleEl ? (titleEl.getAttribute('href') || '') : ''
+            href: titleEl ? (titleEl.getAttribute('href') || '') : '',
+            scrollTop: thisPopup.scrollTop
           });
           handleLink(anchor, savedPos.x, savedPos.y, true);
         }, { passive: false });
@@ -1673,6 +1743,80 @@
         });
       }
 
+      function pinPopup(el) {
+        clearTimeout(mouseLeaveTimer);
+        var ownHistory = historyStack.slice();
+        popup = null;
+        historyStack = [];
+        el.style.width = el.offsetWidth + 'px';
+        el.style.height = el.offsetHeight + 'px';
+        el.dataset.pinned = '1';
+        el.classList.add('link-ctx-popup--pinned');
+        var pinBtn = el.querySelector('.link-ctx-popup-pin');
+        if (pinBtn) pinBtn.classList.add('pinned');
+        // Re-wire back button to operate on this element's own history
+        var backBtn = el.querySelector('.link-ctx-popup-back');
+        if (backBtn) {
+          var newBack = backBtn.cloneNode(true);
+          backBtn.parentNode.replaceChild(newBack, backBtn);
+          newBack.addEventListener('click', function(e) {
+            e.stopPropagation();
+            goBackInPinned(el, ownHistory);
+          });
+        }
+        // Re-wire close button to remove this element
+        var closeBtn = el.querySelector('.link-ctx-popup-close');
+        var newClose = closeBtn.cloneNode(true);
+        closeBtn.parentNode.replaceChild(newClose, closeBtn);
+        newClose.addEventListener('click', function(e) {
+          e.stopPropagation();
+          if (el.parentNode) el.parentNode.removeChild(el);
+          pinnedPopups = pinnedPopups.filter(function(p) { return p !== el; });
+        });
+        makeDraggable(el);
+        pinnedPopups.push(el);
+      }
+
+      function goBackInPinned(el, ownHistory) {
+        var prev = ownHistory.pop();
+        if (!prev) return;
+        var body = el.querySelector('.link-ctx-popup-body');
+        if (body) body.innerHTML = prev.bodyHtml;
+        var titleSpan = el.querySelector('.link-ctx-popup-title span');
+        if (titleSpan) titleSpan.textContent = prev.title;
+        var titleLink = el.querySelector('a.link-ctx-popup-title');
+        if (titleLink && prev.href) titleLink.href = prev.href;
+        var backBtnEl = el.querySelector('.link-ctx-popup-back');
+        if (backBtnEl) backBtnEl.style.display = ownHistory.length > 0 ? '' : 'none';
+        if (prev.scrollTop) el.scrollTop = prev.scrollTop;
+      }
+
+      function makeDraggable(el) {
+        var header = el.querySelector('.link-ctx-popup-header');
+        if (!header) return;
+        var startX, startY, startLeft, startTop;
+        header.addEventListener('mousedown', function(e) {
+          if (e.target.closest('button') || e.target.closest('a')) return;
+          e.preventDefault();
+          startX = e.clientX;
+          startY = e.clientY;
+          startLeft = el.offsetLeft;
+          startTop = el.offsetTop;
+          header.classList.add('is-dragging');
+          document.addEventListener('mousemove', onMove);
+          document.addEventListener('mouseup', onUp);
+        });
+        function onMove(e) {
+          el.style.left = (startLeft + e.clientX - startX) + 'px';
+          el.style.top = (startTop + e.clientY - startY) + 'px';
+        }
+        function onUp() {
+          header.classList.remove('is-dragging');
+          document.removeEventListener('mousemove', onMove);
+          document.removeEventListener('mouseup', onUp);
+        }
+      }
+
       function repositionPopup() {
         if (!popup) return;
         var x = currentPopupPos.x, y = currentPopupPos.y;
@@ -1716,6 +1860,7 @@
         if (body) body.innerHTML = bodyHtml;
         if (title && titleTextEl) titleTextEl.textContent = title;
         repositionPopup();
+        runMermaidIn(popup);
       }
 
       function hidePopup() {

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: markdownr
 version: !ruby/object:Gem::Version
-  version: 0.5.11
+  version: 0.5.12
 platform: ruby
 authors:
 - Brian Dunn