Merge pull request #1249 from hackmdio/feature/details-container

Support "spoiler" container syntax

Author: jackycute

public/js/extra.js

@@ -539,6 +539,12 @@ export function finishView (view) {
   } catch (err) {
     console.warn(err)
   }
+
+  // register details toggle for scrollmap recalulation
+  view.find('details.raw').removeClass('raw').each(function (key, val) {
+    $(val).on('toggle', window.viewAjaxCallback)
+  })
+
   // render title
   document.title = renderTitle(view)
 }
@@ -993,6 +999,22 @@ md.use(markdownitContainer, 'success', { render: renderContainer })
 md.use(markdownitContainer, 'info', { render: renderContainer })
 md.use(markdownitContainer, 'warning', { render: renderContainer })
 md.use(markdownitContainer, 'danger', { render: renderContainer })
+md.use(markdownitContainer, 'spoiler', {
+  validate: function (params) {
+    return params.trim().match(/^spoiler\s+(.*)$/)
+  },
+  render: function (tokens, idx) {
+    var m = tokens[idx].info.trim().match(/^spoiler\s+(.*)$/)
+
+    if (tokens[idx].nesting === 1) {
+      // opening tag
+      return '<details><summary>' + md.utils.escapeHtml(m[1]) + '</summary>\n'
+    } else {
+      // closing tag
+      return '</details>\n'
+    }
+  }
+})
 
 let defaultImageRender = md.renderer.rules.image
 md.renderer.rules.image = function (tokens, idx, options, env, self) {

public/js/index.js

@@ -95,7 +95,7 @@ var updateViewDebounce = 100
 var cursorMenuThrottle = 50
 var cursorActivityDebounce = 50
 var cursorAnimatePeriod = 100
-var supportContainers = ['success', 'info', 'warning', 'danger']
+var supportContainers = ['success', 'info', 'warning', 'danger', 'spoiler']
 var supportCodeModes = ['javascript', 'typescript', 'jsx', 'htmlmixed', 'htmlembedded', 'css', 'xml', 'clike', 'clojure', 'ruby', 'python', 'shell', 'php', 'sql', 'haskell', 'coffeescript', 'yaml', 'pug', 'lua', 'cmake', 'nginx', 'perl', 'sass', 'r', 'dockerfile', 'tiddlywiki', 'mediawiki', 'go', 'gherkin'].concat(hljs.listLanguages())
 var supportCharts = ['sequence', 'flow', 'graphviz', 'mermaid', 'abc']
 var supportHeaders = [

public/js/lib/syncscroll.js

@@ -110,6 +110,25 @@ md.use(markdownitContainer, 'success', { render: renderContainer })
 md.use(markdownitContainer, 'info', { render: renderContainer })
 md.use(markdownitContainer, 'warning', { render: renderContainer })
 md.use(markdownitContainer, 'danger', { render: renderContainer })
+md.use(markdownitContainer, 'spoiler', {
+  validate: function (params) {
+    return params.trim().match(/^spoiler\s+(.*)$/)
+  },
+  render: function (tokens, idx) {
+    var m = tokens[idx].info.trim().match(/^spoiler\s+(.*)$/)
+
+    if (tokens[idx].nesting === 1) {
+      const startline = tokens[idx].map[0] + 1
+      const endline = tokens[idx].map[1]
+
+      // opening tag
+      return `<details class="part raw" data-startline="${startline}" data-endline="${endline}"><summary>` + md.utils.escapeHtml(m[1]) + '</summary>\n'
+    } else {
+      // closing tag
+      return '</details>\n'
+    }
+  }
+})
 
 window.preventSyncScrollToEdit = false
 window.preventSyncScrollToView = false