✨(frontend) exclude h4-h6 headings from table of contents

filters out h4-h6 so they no longer appear in the document outline

Signed-off-by: Cyril <[email protected]>

Author: Ovgodd

CHANGELOG.md

@@ -33,6 +33,8 @@ and this project adheres to
 - 🐛(frontend) fix 404 page when reload 403 page #1402
 - 🐛(frontend) fix legacy role computation #1376
 - 🐛(frontend) scroll back to top when navigate to a document #1406
+- 🐛(frontend) exclude h4-h6 headings from table of contents #1441
+
 
 ### Changed
 

src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx

@@ -19,13 +19,18 @@ export const TableContent = () => {
   const { t } = useTranslation();
   const [isHover, setIsHover] = useState(false);
 
+  // Filter headings to only show h1, h2, h3 (levels 1-3)
+  const filteredHeadings = headings?.filter(
+    (heading) => heading.props.level >= 1 && heading.props.level <= 3,
+  );
+
   useEffect(() => {
     const handleScroll = () => {
-      if (!headings) {
+      if (!filteredHeadings) {
         return;
       }
 
-      for (const heading of headings) {
+      for (const heading of filteredHeadings) {
         const elHeading = document.body.querySelector(
           `.bn-block-outer[data-id="${heading.id}"] [data-content-type="heading"]:first-child`,
         );
@@ -69,7 +74,7 @@ export const TableContent = () => {
         .getElementById(MAIN_LAYOUT_ID)
         ?.removeEventListener('scroll', scrollFn);
     };
-  }, [headings, setHeadingIdHighlight]);
+  }, [filteredHeadings, setHeadingIdHighlight]);
 
   const onOpen = () => {
     setIsHover(true);
@@ -88,12 +93,13 @@ export const TableContent = () => {
     setIsHover(false);
   };
 
-  if (
+  const shouldHideTableContent =
     !editor ||
-    !headings ||
-    headings.length === 0 ||
-    (headings.length === 1 && !headings[0].contentText)
-  ) {
+    !filteredHeadings ||
+    filteredHeadings.length === 0 ||
+    (filteredHeadings.length === 1 && !filteredHeadings[0].contentText);
+
+  if (shouldHideTableContent) {
     return null;
   }
 
@@ -162,7 +168,7 @@ export const TableContent = () => {
               overflow-y: auto;
             `}
           >
-            {headings?.map(
+            {filteredHeadings?.map(
               (heading) =>
                 heading.contentText && (
                   <Heading