collavre 0.15.0 → 0.16.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 617bf6c7eda577396e21384c92f4655c44eb0f433ef2cfeba05f6c47ab00f2c9
-  data.tar.gz: b3cd87f98abf7a7cd2e1c1876a33d8eab6c993993933d23c021c59c6663cb525
+  metadata.gz: d6bf5cb5904041bc150792f274d44ce65f7b659bebf346a0f27dc00a1cbc0067
+  data.tar.gz: 33a8b19ecb1e5e2a02a8144ef7038d825c8d0d2cc9cd7195ea7fdc21230f9cd3
 SHA512:
-  metadata.gz: bcdda91582a8b87d3ba5f890f22a0df72c9aed567860c14e06eb85dca5980c2adc735a29a0fa1bbcd9aea3e8b8bdf79d8d88aa6ee88b7231afc9dbdc11edc6d8
-  data.tar.gz: 289e1667b14dd0b578c46d7623fc751489ddb4c8d9dfd09f6024d4355fe69a4b5e375275c3395c541c6f97c26e7ce953b378c1e44d2fd8eda03e5346fa319b8c
+  metadata.gz: 95e7f7877a88161151e55b26d9a46503a3889ed940443ba9436dc7fff063fc75cdd7ae554bc6a5c144bd5246dbf1822476fde15a925663d040ae6b54e59b6af3
+  data.tar.gz: 443e491e30ec68060e75b18a4f3abce13b764ce23d049b0f9be4081f322b99964313f29d46cb4d477f93aa75275bfb8dec7870bfb56dc74699fea747cb9e160c

data/app/assets/stylesheets/collavre/code_highlight.css

@@ -74,6 +74,19 @@ body.dark-mode {
   }
 }
 
+/* ============================================================================
+ * MERMAID DIAGRAM CONTAINER
+ * ============================================================================ */
+.comment-content .mermaid-chart {
+  margin: var(--space-2) 0;
+  overflow-x: auto;
+  text-align: center;
+}
+
+.comment-content .mermaid-chart svg {
+  max-width: 100%;
+}
+
 /* ============================================================================
  * CODE BLOCK CONTAINER
  * ============================================================================ */

data/app/javascript/controllers/comment_controller.js

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-import { renderCommentMarkdown } from '../lib/utils/markdown'
+import { renderCommentMarkdown, renderMermaidDiagrams } from '../lib/utils/markdown'
 import { addTableDownloadButtons } from '../lib/utils/table_download'
 import CommonPopup from '../lib/common_popup'
 
@@ -112,6 +112,7 @@ export default class extends Controller {
         } else {
           contentElement.innerHTML = renderCommentMarkdown(text)
           addTableDownloadButtons(contentElement)
+          renderMermaidDiagrams(contentElement)
           contentElement.classList.remove('streaming')
           if (this._isStreaming) this._cleanupStreaming()
         }

data/app/javascript/controllers/comment_version_controller.js

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-import { renderCommentMarkdown } from "../lib/utils/markdown"
+import { renderCommentMarkdown, renderMermaidDiagrams } from "../lib/utils/markdown"
 
 export default class extends Controller {
   static targets = ["prevBtn", "nextBtn", "indicator", "deleteBtn", "selectBtn"]
@@ -127,6 +127,7 @@ export default class extends Controller {
     if (target) {
       target.innerHTML = renderCommentMarkdown(text)
       target.dataset.rendered = "true"
+      renderMermaidDiagrams(target)
     }
   }
 

data/app/javascript/lib/utils/markdown.js

@@ -68,11 +68,15 @@ function sanitizeLang(lang) {
   return lang.replace(/[^a-zA-Z0-9_-]/g, '')
 }
 
-// Custom renderer for code blocks with syntax highlighting
+// Custom renderer for code blocks with syntax highlighting + mermaid
 marked.use({
   renderer: {
     code({ text, lang }) {
       const safeLang = sanitizeLang(lang)
+      if (safeLang === 'mermaid') {
+        const escaped = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+        return `<div class="mermaid-chart">${escaped}</div>`
+      }
       const highlighted = highlightCode(text, safeLang)
       const langClass = safeLang ? ` language-${safeLang}` : ''
       return `<pre><code class="hljs${langClass}">${highlighted}</code></pre>`
@@ -99,6 +103,14 @@ DOMPurify.addHook('uponSanitizeAttribute', (node, data) => {
       data.forceKeepAttr = true
     }
   }
+  // Allow mermaid-chart class on div elements
+  if (node.tagName === 'DIV' && data.attrName === 'class') {
+    const classes = data.attrValue.split(/\s+/)
+    if (classes.includes('mermaid-chart')) {
+      data.attrValue = 'mermaid-chart'
+      data.forceKeepAttr = true
+    }
+  }
 })
 
 const PURIFY_CONFIG = {
@@ -125,6 +137,24 @@ export function renderCommentMarkdown(text) {
   return sanitize(html.trim())
 }
 
+// Lazy-load mermaid and render diagrams in a container
+let mermaidReady = false
+
+export async function renderMermaidDiagrams(container) {
+  const charts = container.querySelectorAll('.mermaid-chart:not([data-processed])')
+  if (charts.length === 0) return
+  const { default: mermaid } = await import('mermaid')
+  if (!mermaidReady) {
+    mermaid.initialize({ startOnLoad: false, securityLevel: 'strict' })
+    mermaidReady = true
+  }
+  try {
+    await mermaid.run({ nodes: Array.from(charts) })
+  } catch (e) {
+    console.warn('Mermaid rendering failed:', e)
+  }
+}
+
 export function renderMarkdownInContainer(container) {
   container.querySelectorAll('.comment-content').forEach((element) => {
     if (element.dataset.rendered === 'true') return
@@ -132,4 +162,5 @@ export function renderMarkdownInContainer(container) {
     element.dataset.rendered = 'true'
     addTableDownloadButtons(element)
   })
+  renderMermaidDiagrams(container)
 }

data/lib/collavre/version.rb

@@ -1,3 +1,3 @@
 module Collavre
-  VERSION = "0.15.0"
+  VERSION = "0.16.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: collavre
 version: !ruby/object:Gem::Version
-  version: 0.15.0
+  version: 0.16.0
 platform: ruby
 authors:
 - Collavre