Merge pull request #6298 from weseek/imprv/100635-toc-style

imprv: 100635 toc style

packages/app/src/components/Page/DisplaySwitcher.tsx

@@ -23,6 +23,8 @@ import { Page } from '../Page';
 import TableOfContents from '../TableOfContents';
 import UserInfo from '../User/UserInfo';
 
+import styles from '../TableOfContents.module.scss';
+
 
 const WIKI_HEADER_LINK = 120;
 
@@ -110,7 +112,7 @@ const DisplaySwitcher = (): JSX.Element => {
                   ) }
 
                   <div className="d-none d-lg-block">
-                    <div id="revision-toc" className="revision-toc">
+                    <div id="revision-toc" className={`revision-toc ${styles['revision-toc']}`}>
                       <TableOfContents />
                     </div>
                     <ContentLinkButtons />

packages/app/src/components/TableOfContents.module.scss

@@ -0,0 +1,28 @@
+
+.revision-toc :global {
+  // to get on the Attachment row
+  z-index: 1;
+  padding: 5px;
+  font-size: 0.9em;
+
+  border-bottom: 1px solid transparent;
+
+  .revision-toc-content {
+    li {
+      margin: 6px;
+    }
+    > ul {
+      padding-left: 0;
+      ul {
+        padding-left: 1em;
+      }
+    }
+
+    // first level of li
+    > ul > li {
+      padding: 5px;
+      margin-right: 4px;
+      margin-left: 17px;
+    }
+  }
+}

packages/app/src/components/TableOfContents.tsx

@@ -52,18 +52,6 @@ const TableOfContents = (): JSX.Element => {
     addSmoothScrollEvent(anchorsInToc, blinkElem);
   }, [tocHtml]);
 
-  // == TODO: render ToC without globalEmitter -- Yuki Takei
-  //
-  // set handler to render ToC
-  // useEffect(() => {
-  //   const handler = html => setTocHtml(html);
-  //   globalEmitter.on('renderTocHtml', handler);
-
-  //   return function cleanup() {
-  //     globalEmitter.removeListener('renderTocHtml', handler);
-  //   };
-  // }, [globalEmitter]);
-
   return (
     <StickyStretchableScroller
       stickyElemSelector=".grw-side-contents-sticky-container"
@@ -73,6 +61,7 @@ const TableOfContents = (): JSX.Element => {
         id="revision-toc-content"
         className="revision-toc-content mb-3"
       >
+        {/* parse blank to show toc (https://github.com/weseek/growi/pull/6277) */}
         <ReactMarkdown {...rendererOptions}>
           {''}
         </ReactMarkdown>

packages/app/src/services/renderer/renderer.tsx

@@ -242,8 +242,24 @@ export const generateViewOptions = (
   // store toc node
   if (rehypePlugins != null) {
     rehypePlugins.push([toc, {
+      nav: false,
       headings: ['h1', 'h2', 'h3'],
-      customizeTOC: storeTocNode,
+      customizeTOC: (toc: HtmlElementNode) => {
+        // method for replace <ol> to <ul>
+        const replacer = (children) => {
+          children.forEach((child) => {
+            if (child.type === 'element' && child.tagName === 'ol') {
+              child.tagName = 'ul';
+            }
+            if (child.children) {
+              replacer(child.children);
+            }
+          });
+        };
+        replacer([toc]); // replace <ol> to <ul>
+        storeTocNode(toc); // store tocNode to global state with swr
+        return false; // not show toc in body
+      },
     }]);
   }
   // renderer.rehypePlugins.push([autoLinkHeadings, {

packages/app/src/styles/style-next.scss

@@ -6,8 +6,11 @@
 @import '~react-bootstrap-typeahead/css/Typeahead';
 @import 'override-rbt';
 
-// // override simplebar-react styles
-// @import 'override-simplebar';
+// import SimpleBar styles
+@import '~simplebar/dist/simplebar.min.css';
+
+// override simplebar-react styles
+@import 'override-simplebar';
 
 // icons
 @import '~simple-line-icons';