markdown-it-admon-collapsible 1.9.3 → 1.9.4

package/CHANGELOG.md

@@ -11,3 +11,10 @@
 2025-12-27
 
 - Changed the generated HTML to be more like markdown-it-container
+
+## 1.9.4
+
+2025-12-27
+
+- Reverted since the previous change was a misunderstanding
+- Using details/summary for collapsible admonitions

package/index.js

@@ -44,27 +44,10 @@ function validate (params) {
   return !!tag
 }
 
-
 function renderDefault(tokens, idx, _options, env, slf) {
   return slf.renderToken(tokens, idx, _options, env, slf);
 }
 
-function renderCollapsibleOpen(tokens, idx) {
-  const token = tokens[idx];
-  const classes = token.attrs ? token.attrs.find(a => a[0] === 'class')[1] : '';
-  return `<div class="${classes}">\n`;
-}
-
-function renderCollapsibleTitleOpen(tokens, idx) {
-  const expanded = tokens[idx - 1]?.meta?.expanded;
-  // Add toggle button
-  return `<div class="admonition-title"><button class="collapsible-toggle" tabindex="0">${expanded ? '&#x2212;' : '&#x2b;'}</button>`;
-}
-
-function renderCollapsibleTitleClose() {
-  return '</div>\n';
-}
-
 function renderCollapsibleContentOpen(tokens, idx) {
   return '';
 }
@@ -73,14 +56,12 @@ function renderCollapsibleContentClose() {
   return '';
 }
 
-
 const minMarkers = 3;
 const markerTypes = [
   { str: '!', type: 'admonition' },
   { str: '?', type: 'collapsible' }
 ];
 
-
 function admonition(state, startLine, endLine, silent) {
   let pos, nextLine, token;
   const start = state.bMarks[startLine] + state.tShift[startLine];
@@ -155,10 +136,13 @@ function admonition(state, startLine, endLine, silent) {
   const openType = isCollapsible ? 'collapsible_open' : 'admonition_open';
   const closeType = isCollapsible ? 'collapsible_close' : 'admonition_close';
 
-  token = state.push(openType, 'div', 1);
+  token = isCollapsible ? state.push(openType, 'details', 1) : state.push(openType, 'div', 1)
   token.markup = markup;
   token.block = true;
-  token.attrs = [['class', `admonition ${tag}${isCollapsible ? ' collapsible' : ''}${expanded ? ' expanded' : ''}`]];
+  token.attrs = [['class', `admonition ${tag}`]];
+  if (expanded) {
+    token.attrs.push(['open', '']);
+  }
   token.meta = { tag, expanded };
   token.content = title;
   token.info = params;
@@ -166,7 +150,7 @@ function admonition(state, startLine, endLine, silent) {
 
   if (title) {
     const titleMarkup = markup + ' ' + tag;
-    token = state.push(isCollapsible ? 'collapsible_title_open' : 'admonition_title_open', 'div', 1);
+    token = isCollapsible ? state.push('collapsible_title_open', 'summary', 1) : state.push('admonition_title_open', 'p', 1)
     token.markup = titleMarkup;
     token.attrs = [['class', 'admonition-title']];
     token.map = [startLine, startLine + 1];
@@ -176,7 +160,7 @@ function admonition(state, startLine, endLine, silent) {
     token.map = [startLine, startLine + 1];
     token.children = [];
 
-    token = state.push(isCollapsible ? 'collapsible_title_close' : 'admonition_title_close', 'div', -1);
+    token = isCollapsible ? state.push('collapsible_title_close', 'summary', -1) : state.push('admonition_title_close', 'p', -1);
     token.markup = titleMarkup;
   }
 
@@ -203,10 +187,9 @@ module.exports = function admonitionPlugin(md, options = {}) {
   md.renderer.rules.admonition_title_close = render;
 
   // Collapsible rendering
-  md.renderer.rules.collapsible_open = renderCollapsibleOpen;
-  md.renderer.rules.collapsible_close = (tokens, idx) => '</div>\n';
-  md.renderer.rules.collapsible_title_open = renderCollapsibleTitleOpen;
-  md.renderer.rules.collapsible_title_close = renderCollapsibleTitleClose;
+  // Use default renderer for collapsible_open/close
+  md.renderer.rules.collapsible_close = (tokens, idx) => '</details>\n';
+  // Use default renderer for collapsible_title_open/close
 
   // Wrap content in collapsible-content div
   const origBlockTokenize = md.block.tokenize;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markdown-it-admon-collapsible",
-  "version": "1.9.3",
+  "version": "1.9.4",
   "description": "Plugin to create admonitions for markdown-it markdown parser",
   "keywords": [
     "admonition",

package/styles/admonition.css

@@ -1,40 +1,38 @@
-/* Collapsible block styles */
-.collapsible {
-  border-left-color: #888;
+
+summary.admonition-title {
   position: relative;
 }
-.collapsible .admonition-title {
-  cursor: pointer;
-  user-select: none;
-  padding-right: 2.5rem;
-}
-.collapsible .admonition-title {
-  position: relative;
+summary.admonition-title::marker {
+  content: none;
 }
-.collapsible .collapsible-toggle {
-  position: absolute;
-  right: 1.2rem;
-  top: 50%;
-  transform: translateY(-50%);
-  font-size: 1.2rem;
-  background: none;
-  border: none;
-  cursor: pointer;
-  outline: none;
-  margin: 0;
-  padding: 0;
-  line-height: 1;
+summary.admonition-title::after {
+  content: '▶';
 }
-.collapsible.expanded {
-  /* Optionally highlight expanded state */
+summary.admonition-title::after {
+    position: absolute;
+    right: 0.5rem;
+  }
+[open] summary.admonition-title::after {
+  transform: rotate(90deg);
+  transform-origin: 50% 50%;
 }
 
-/* Hide all siblings of .admonition-title when not expanded */
-.collapsible:not(.expanded) > .admonition-title ~ * {
-  display: none;
+/* Collapsible block styles using <details> and <summary> */
+details.admonition {
+  border-left-color: #888;
+  position: relative;
 }
-.collapsible.expanded > .admonition-title ~ * {
-  display: block;
+summary.admonition-title {
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+  padding-right: 2.5rem;
+  margin: 0 -1.2rem;
+  padding: .8rem 1.0rem .8rem 1.0rem;
+  border-bottom: 1px solid rgba(68, 138, 255, .2);
+  background-color: rgba(68, 138, 255, .1);
+  font-weight: 700;
+  list-style: none;
 }
 /**
  * @credits https://github.com/qjebbs/vscode-markdown-extended