Fix toc id naming to avoid overlap with user toc

public/js/extra.js

@@ -495,9 +495,9 @@ function exportToHTML(view) {
     var filename = renderFilename(ui.area.markdown) + '.html';
     var src = generateCleanHTML(view);
     //generate toc
-    var toc = $('#toc').clone();
+    var toc = $('#ui-toc').clone();
     toc.find('*').removeClass('active');
-    var tocAffix = $('#toc-affix').clone();
+    var tocAffix = $('#ui-toc-affix').clone();
     tocAffix.find('*').removeClass('active');
     //generate html via template
     $.get(serverurl + '/css/html.min.css', function (css) {
@@ -508,8 +508,8 @@ function exportToHTML(view) {
                 title: title,
                 css: css,
                 html: src[0].outerHTML,
-                toc: toc.html(),
+                'ui-toc': toc.html(),
-                'toc-affix': tocAffix.html(),
+                'ui-toc-affix': tocAffix.html(),
                 lang: (md && md.meta && md.meta.lang) ? 'lang="' + md.meta.lang + '"' : null,
                 dir: (md && md.meta && md.meta.dir) ? 'dir="' + md.meta.dir + '"' : null
             };

public/js/index.js

@@ -3157,7 +3157,7 @@ function updateViewInner() {
         }
         // only render again when meta changed
         if (JSON.stringify(md.meta) != JSON.stringify(lastMeta)) {
-            parseMeta(md, ui.area.codemirror, ui.area.markdown, $('#toc'), $('#toc-affix'));
+            parseMeta(md, ui.area.codemirror, ui.area.markdown, $('#ui-toc'), $('#ui-toc-affix'));
             rendered = md.render(value);
         }
         // prevent XSS
@@ -3172,8 +3172,8 @@ function updateViewInner() {
     autoLinkify(ui.area.markdown);
     deduplicatedHeaderId(ui.area.markdown);
     renderTOC(ui.area.markdown);
-    generateToc('toc');
+    generateToc('ui-toc');
-    generateToc('toc-affix');
+    generateToc('ui-toc-affix');
     generateScrollspy();
     updateScrollspy();
     smoothHashScroll();

public/js/pretty.js

@@ -21,7 +21,7 @@ if (md.meta.type && md.meta.type === 'slide') {
     }
     // only render again when meta changed
     if (JSON.stringify(md.meta) != JSON.stringify(lastMeta)) {
-        parseMeta(md, null, markdown, $('#toc'), $('#toc-affix'));
+        parseMeta(md, null, markdown, $('#ui-toc'), $('#ui-toc-affix'));
         rendered = md.render(text);
     }
     // prevent XSS
@@ -34,8 +34,8 @@ finishView(markdown);
 autoLinkify(markdown);
 deduplicatedHeaderId(markdown);
 renderTOC(markdown);
-generateToc('toc');
+generateToc('ui-toc');
-generateToc('toc-affix');
+generateToc('ui-toc-affix');
 smoothHashScroll();
 createtime = lastchangeui.time.attr('data-createtime');
 lastchangetime = lastchangeui.time.attr('data-updatetime');

public/views/body.ejs

@@ -29,11 +29,11 @@
                 <a id="tocLabel" class="ui-toc-label btn btn-default" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" title="Table of content">
                     <i class="fa fa-bars"></i>
                 </a>
-                <ul id="toc" class="ui-toc-dropdown dropdown-menu" aria-labelledby="tocLabel">
+                <ul id="ui-toc" class="ui-toc-dropdown dropdown-menu" aria-labelledby="tocLabel">
                 </ul>
             </div>
         </div>
-        <div id="toc-affix" class="ui-affix-toc ui-toc-dropdown unselectable hidden-print" data-spy="affix" style="top:51px;display:none;"></div>
+        <div id="ui-toc-affix" class="ui-affix-toc ui-toc-dropdown unselectable hidden-print" data-spy="affix" style="top:51px;display:none;"></div>
     </div>
 </div>
 <!-- clipboard modal -->

public/views/html.hbs

@@ -39,13 +39,13 @@
             <a id="tocLabel" class="ui-toc-label btn btn-default" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" title="Table of content">
                 <i class="fa fa-bars"></i>
             </a>
-            <ul id="toc" class="ui-toc-dropdown dropdown-menu" aria-labelledby="tocLabel">
+            <ul id="ui-toc" class="ui-toc-dropdown dropdown-menu" aria-labelledby="tocLabel">
-                {{{toc}}}
+                {{{ui-toc}}}
             </ul>
         </div>
     </div>
-    <div id="toc-affix" class="ui-affix-toc ui-toc-dropdown unselectable hidden-print" data-spy="affix" style="top:17px;display:none;" {{{lang}}} {{{dir}}}>
+    <div id="ui-toc-affix" class="ui-affix-toc ui-toc-dropdown unselectable hidden-print" data-spy="affix" style="top:17px;display:none;" {{{lang}}} {{{dir}}}>
-        {{{toc-affix}}}
+        {{{ui-toc-affix}}}
     </div>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" defer></script>

public/views/pretty.ejs

@@ -67,11 +67,11 @@
             <a id="tocLabel" class="ui-toc-label btn btn-default" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" title="Table of content">
                 <i class="fa fa-bars"></i>
             </a>
-            <ul id="toc" class="ui-toc-dropdown dropdown-menu" aria-labelledby="tocLabel">
+            <ul id="ui-toc" class="ui-toc-dropdown dropdown-menu" aria-labelledby="tocLabel">
             </ul>
         </div>
     </div>
-    <div id="toc-affix" class="ui-affix-toc ui-toc-dropdown unselectable hidden-print" data-spy="affix" style="display:none;"></div>
+    <div id="ui-toc-affix" class="ui-affix-toc ui-toc-dropdown unselectable hidden-print" data-spy="affix" style="display:none;"></div>
     <% if(typeof disqus !== 'undefined' && disqus) { %>
     <div class="container-fluid" style="max-width: 758px; margin-bottom: 40px;">
         <%- include disqus %>