How can I let the Headings of tocbot indent to its corresponding position?

Norlandz commented 1 year ago

Question

Problem eg

normal situation:

(There is nothing wrong with this example, tocbot is behaving normally)

heading1
  heading2
    heading3 
  heading2 
    heading3 // <- this will be removed
      heading4
    heading3

problematic situation

Say, now the heading4 no longer follows a heading3 in the html file. Then here is the problem, the heading4 here is indented to same alignment as the below heading3. (Though this is common in some of the Toc design. ) How can I make the heading4 indent back to 1 more indentation righter than heading3?

current behavior:

heading1
  heading2
    heading3 
  heading2 
    heading4 // <- problem 
    heading3

expecting behavior:

heading1
  heading2
    heading3 
  heading2 
      heading4 // <- expect such indentation
    heading3

tscanlin commented 1 year ago

Hey, thanks for bringing this up. Accomplishing what you are describing is not currently possible as tocbot doesn't handle heading margins like that right now. However, using some custom custom CSS you may be able to accomplish this. something like: .node-name--H3 ~ .toc-list .node-name--H5 { margin-left: 10px } Hopefully that is helpful. I'd also be open to a contribution to add this feature if you are able to implement it.

Norlandz commented 1 year ago

Spent couple days to implement it. Not the perfect. You may (or may not) need to look through to fix some of it.

Added additional features (categorized into 3, see comments inside), (so it turns out become much larger than I thought...)

To use the script. Paste below js code into tocbot.js at proper location, this should replaces some of the old codes. (The old feature will lost after replacing the old code.)

Read the comments inside for much clearer explanation.

plunker ex: Tocbot Heading Indentation (HihesNode)
output image for tocbot
(Preface repeated from the comment inside the js code::)

Click me
``` // ########## Preface Reading instruction ########## // 1. tested couple times, but may still have bug?... // (also due to new updates after the tests) // (I may or may not fix them...) // // 1. // the logic and rules are explained in the comment below // -- // but they are very complicated ... // and it **probably not going to suit everyone es style** // -- // I make no guarantee on the rule is _ perfect -- ie: it doesnt conflict with itself / produce desire effect all the time _ // (the additional support for relative heading level made it worse) // // 1. // I may miss few words on the documentation/explanation (accidentally / unable to) // -- cuz the rule is complicated & long & dull & hideous (& I havent thought through to make sure the rule doesnt conflict with itself...) // if you dont understand it, **dont waste your time on it**... // // 1. // treat this code like a script, if it works then it makes your job easy; // dont treat this code as stable code / use in production environment (-- unless your think the code is good enough) // // 1. some naming of variables (in comments / or even in codes) may be inconsitent, // due to there has been lots modification & updates to the code since the first time I wrote it // (& ide refactor var naming seems not good in Javascript) // 1. if you dont understand some of my notation in the comment -- dont try to understand it, ignore it... // 1. (most of the time, I may not respond quickly if someone message me...) // 1. (might accidentally deleted some useful comments) // ```
js code (tocbot.js nestHeadingsArray())

Click me
```js // ################################# Nl modification for [nest heading object] start ################################# // ;ori; /** // ;ori; * Get important properties from a heading element and store in a plain object. // ;ori; * @param {HTMLElement} heading // ;ori; * @return {Object} // ;ori; */ // ;ori; function getHeadingObject (heading) { // ;ori; // each node is processed twice by this method because nestHeadingsArray() and addNode() calls it // ;ori; // first time heading is real DOM node element, second time it is obj // ;ori; // that is causing problem so I am processing only original DOM node // ;ori; if (!(heading instanceof window.HTMLElement)) return heading // ;ori; // ;ori; if (options.ignoreHiddenElements && (!heading.offsetHeight || !heading.offsetParent)) { // ;ori; return null // ;ori; } // ;ori; // ;ori; const headingLabel = heading.getAttribute('data-heading-label') || // ;ori; (options.headingLabelCallback ? String(options.headingLabelCallback(heading.textContent)) : heading.textContent.trim()) // ;ori; var obj = { // ;ori; id: heading.id, // ;ori; children: [], // ;ori; nodeName: heading.nodeName, // ;ori; headingLevel: getHeadingLevel(heading), // ;ori; textContent: headingLabel // ;ori; } // ;ori; // ;ori; if (options.includeHtml) { // ;ori; obj.childNodes = heading.childNodes // ;ori; } // ;ori; // ;ori; if (options.headingObjectCallback) { // ;ori; return options.headingObjectCallback(obj, heading) // ;ori; } // ;ori; // ;ori; return obj // ;ori; } // ;ori; // ;ori; /** // ;ori; * Add a node to the nested array. // ;ori; * @param {Object} node // ;ori; * @param {Array} nest // ;ori; * @return {Array} // ;ori; */ // ;ori; function addNode (node, nest) { // ;ori; var obj = getHeadingObject(node) // ;ori; var level = obj.headingLevel // ;ori; var array = nest // ;ori; var lastItem = getLastItem(array) // ;ori; var lastItemLevel = lastItem // ;ori; ? lastItem.headingLevel // ;ori; : 0 // ;ori; var counter = level - lastItemLevel // ;ori; // ;ori; while (counter > 0) { // ;ori; lastItem = getLastItem(array) // ;ori; // Handle case where there are multiple h5+ in a row. // ;ori; if (lastItem && level === lastItem.headingLevel) { // ;ori; break // ;ori; } else if (lastItem && lastItem.children !== undefined) { // ;ori; array = lastItem.children // ;ori; } // ;ori; counter-- // ;ori; } // ;ori; // ;ori; if (level >= options.collapseDepth) { // ;ori; obj.isCollapsed = true // ;ori; } // ;ori; // ;ori; array.push(obj) // ;ori; return array // ;ori; } // ;ori; // ;ori; /** // ;ori; * Nest headings array into nested arrays with 'children' property. // ;ori; * @param {Array} headingsArray // ;ori; * @return {Object} // ;ori; */ // ;ori; function nestHeadingsArray (headingsArray) { // ;ori; return reduce.call(headingsArray, function reducer (prev, curr) { // ;ori; var currentHeading = getHeadingObject(curr) // ;ori; if (currentHeading) { // ;ori; addNode(currentHeading, prev.nest) // ;ori; } // ;ori; return prev // ;ori; }, { // ;ori; nest: [] // ;ori; }) // ;ori; } // ########## Added Features ########## // 1. the whole point of this code is to solve the problem of a incorrect/missing indentation // @eg:: // H1 // H2 // H3 // if this is missing // H4 // >> // H1 // H2 // H4 // Tocbot indentation // >> // H1 // H2 // H4 // My desire indentation // // // // 1. added additional support for indentation of not_a_heading element // @eg:: // H1 // H2 // Span // Span // H4 // Tocbot indentation // >> // H1 // H2 // Span // Span // H4 // My desire indentation // // // // 1. added additional support for absolute/relative indentation of heading/not_a_heading element, by using css rule to overwrite // @eg:: // H1 // H2 // SpanAA:rel+2 // SpanAA:rel+2 // H4 // SpanAA:abs 6 // H5 // Span_is_a_heading // Span // Span // // [in css file] // .SpanAA_abs_6 { // --tocbot-hihesnode-headinglv: 6; // } // .SpanAA_rel_2 { // --tocbot-hihesnode-headinglv: 'rel+2'; // } // .Span_is_a_heading { // --tocbot-hihesnode-isheading: true; // --tocbot-hihesnode-headinglv: 7; // } // // // // // ########## Preface Reading instruction ########## // 1. tested couple times, but may still have bug?... // (also due to new updates after the tests) // (I may or may not fix them...) // // 1. // the logic and rules are explained in the comment below // -- // but they are very complicated ... // and it **probably not going to suit everyone es style** // -- // I make no guarantee on the rule is _ perfect -- ie: it doesnt conflict with itself / produce desire effect all the time _ // (the additional support for relative heading level made it worse) // // 1. // I may miss few words on the documentation/explanation (accidentally / unable to) // -- cuz the rule is complicated & long & dull & hideous (& I havent thought through to make sure the rule doesnt conflict with itself...) // if you dont understand it, **dont waste your time on it**... // // 1. // treat this code like a script, if it works then it makes your job easy; // dont treat this code as stable code / use in production environment (-- unless your think the code is good enough) // // 1. some naming of variables (in comments / or even in codes) may be inconsitent, // due to there has been lots modification & updates to the code since the first time I wrote it // (& ide refactor var naming seems not good in Javascript) // 1. if you dont understand some of my notation in the comment -- dont try to understand it, ignore it... // 1. (most of the time, I may not respond quickly if someone message me...) // 1. (might accidentally deleted some useful comments) // // // // // ########## Overall structure of the code ########## // // @main_part // `convert_LinearArrayWithHeadings_to_HihesNode()` & `class HihesNode` are the 2 main things in this code // correspond to the original prev Tocbot // `nestHeadingsArray()` & `tocbotHeadingObject` // // @Part1 // class HihesNode & inner class HihesNodeBuilder // (node & structure) // // @Part2 // function detIsHihesHeadingNode(elt) & function getHeadingLevelInHihesNode(elt) // -- // (determine the property of the node) // (css file is link by this part) // // @Part3 // function convert_LinearArrayWithHeadings_to_HihesNode(headingsArray) // (setup the node & structure) // // @Part4 // function convert_HihesNode_to_TocbotOriRequiredHeadingObject_individually(hihesNode) // function convert_HihesNode_to_TocbotOriRequiredHeadingObject // -- // (the conversion from HihesNode to tocbotHeadingObject) // // @Part5 // function nestHeadingsArray(headingsArray) // -- // (end part, combine) // // // // // ########## Explanation for the concept & rules for the hierarchical structure of the headings ########## // // @concept:: // // #> [basic concept of hihesNode & visual representation (headingLevel & indentation)] // #>>> // hihesNode is a node in a hierarchical structure of the headings // // #>>> // the hierarchical structure of the headings is built up by mainly 2 types of elements: // hihesNode_Heading // hihesNode_NotAHeading // // #>>> // you can envision how headingLevel & indentation works similar to how // |-| commen sense // |-| the original Tocbot // |-| the Microsoft Word Document Outline View for Headings // works // // #>>> // normally, // a hihesNode_Heading <=> a Dom heading element (eg:

...) // a hihesNode_NotAHeading <=> a Dom non heading element (eg: (-- a thing you picked to present in the Tocbot toc && a thing that is not

...)) // // #>>> @rule:: // each hihesNode_Heading has its headingLevel, // the headingLevel (es value) correspond to the heading level of

... // // the headingLevel mainly serves the purpose of indentation // // each hihesNode_NotAHeading also has its headingLevel (though its not a heading), // since hihesNode_NotAHeading es headingLevel cannot correspond to the heading level of .. -- it just doesnt exist, // so we assign that: hihesNode_NotAHeading es headingLevel = `hihesNode_Heading_parent.headingLevel +1` -- (a relative value) // // #>>> // @eg:: // H1 // H2 // Span // H3 // Span // Span // H2 // H3 // Span // H3 // H4 // Span // // // #>>> @rule:: // hihesNode_Heading can be a hihesNode_parent of other hihesNode // hihesNode_NotAHeading cannot be a hihesNode_parent of other hihesNode // -- visually, there shouldnt be any hierarchical structure under (-- indent +1 under) the hihesNode_NotAHeading // // hihesNode_Heading.arr_hihesNode_child = [ ... ]; // hihesNode_NotAHeading.arr_hihesNode_child = null; // // // @eg:: // H1 // H2 // Span // H3 // <- disallow // // @eg:: // H1 // H2 // Span // H4 // <- should this allow? // // #>>> @rule:: // hihesNode_this.headingLevel = hihesNode_this.hihesNode_parent.headingLevel +1; // (this must follow strictly no matter how) // // // // #> [hihesNode_root] // #>>> @rule // hihesNode_root contains the whole hierarchical structure of the headings // // hihesNode_root.elt_self = null; // hihesNode_root.hihesNode_parent = null; // hihesNode_root.headingLevel = 0; // hihesNode_root.det_IsHihesHeadingNode = true; // // // // #> [hihesNode_DummyPadding] // #>>> // @pb:: // what if we have a Heading missing (a gap) bt 2 headings? // // @eg:: // H1 // H2 // H4 // H3 is missing for H4 (this happens commonly in html) // // @soln:: // we append a hihesNode_DummyPadding to preserve the rule/sematic of the structure "hihesNode_this.headingLevel = hihesNode_this.hihesNode_parent.headingLevel +1;" // // @eg:: // H1 // H2 // H3 // a hihesNode_DummyPadding generated here // H4 // // >> // H1 // H2 // // a hihesNode_DummyPadding generated here, but it wont be shown visually in Tocbot // H4 // // >> // H1 // H2 // Span // // if you see things like this, the rule of "hihesNode_NotAHeading cannot be a hihesNode_parent of other hihesNode" is not broken -- there is an invisible hihesNode_DummyPadding in between // H4 // // #>>> @rule // hihesNode_DummyPadding.elt_self = null; // hihesNode_DummyPadding.det_IsHihesHeadingNode = true; // // // #> [--tocbot-hihesnode-headinglv & --tocbot-hihesnode-isheading (css overwrite normal rule)] // // @logic,rule:{ // #>> // use `--tocbot-hihesnode-headinglv` to set a fixed(absolute)/relative hihesNode.headingLevel for this element // (again, this determines the indentation level for this element in tocbot) // // normally, if this css var is not set: // 1. if this elt is a heading element -> heading level = its original heading level // 2. if this elt is not a heading element -> heading level = the heading level of _the heading eg:
/
/... this element is under_ + 1 <=> relative heading level is +1 // // #>>> // relative heading level is supported -- relatives to hihesNode_ClosestRelativable_parent.headingLevel // // @rule:: // hihesNode_ClosestRelativable_parent (hihesNode_Heading_HeadingLevelAbs_ClosestLinearDfs_Relativable_parent) // Dfs the hihesNode_prevDfs, if its relativeable, then its hihesNode_ClosestRelativable_parent // if not, use its hihesNode_ClosestRelativable_parent // // hihesNode_ClosestRelativable_parent must be // 1. det_IsHihesHeadingNode = true; // 1. det_IsHeadingLevelRelative = false; // // // #>>>> @rule:: // hihesNode_NotAHeading || hihesNode_DummyPadding || hihesNode_WithHeadingLevelRel will not be relativable // // #>>>> // negative relative heading level is awkwardly supported (@version-experimental) // ; // if the resulant (absolute) heading level <= 0, then it becomes 1 . // [[aga, //think,self_design]] // // #>>>> // relative 0 of AA means AA is in the same level as AA es (original) preceding heading level // // // // #>> // use `--tocbot-hihesnode-isheading` to determine if this element is a hihesNode_Heading // (determines whether this can contain hierarchical structure below) // // // #>> // @code-syntax,to_use,eg:{ [in css file] // .classElt_tocbotHeadingLv6.classElt_PickedToPresentInTocbot { // --tocbot-hihesnode-headinglv: 6; // // --tocbot-hihesnode-headinglv: 'rel+2'; // // --tocbot-hihesnode-headinglv: 'rel-3'; // } // .classElt_tocbotNotAHeading.classElt_PickedToPresentInTocbot { // --tocbot-hihesnode-isheading: false; // } // } // @eg,ex:{ // H1 // H2 // SpanAA:rel+2 // SpanAA:abs 6 // SpanAA:rel+2 // H4 // SpanAA:rel+2 // SpanAA:abs 6 // H5 // } // // // @code-design: is through the use of css file better? // // #>>>< // @note: // again, you can overwrite the default headingLevel for a Dom heading (/ not_a_heading) element -- either make it fixed/relative -- by that css var // // #>>>< // @note,eg,demo:{ [negative relative heading lv] // H1 // H2 // H3 // H4 // SpanAA:Rel+1 // SpanBB:Rel+1 // << @demo: if we use relative negative 1 for this instead // SpanCC:Rel+1 // >> // H1 // H2 // H3 // H4 // SpanAA:Rel+1 // SpanBB:Rel-0 // @note,not_related: rel-0 / rel+0 means same heading lv as SpanBB es prev node_parent -- H4 (now SpanBB es node_parent is H3) // SpanCC:Rel+1 // >> // H1 // H2 // H3 // H4 // SpanAA:Rel+1 // SpanBB:Rel-1 // SpanCC:Rel+1 // this is actually awkward, cuz a hihesNode_DummyPadding is appended to SpanCC -- SpanCC es hihesNode_parent is not the original H4 anymore // // // // a better way would be:_ // // 1. dont use `--tocbot-heading-lv-in-node-hierarchy` with negative relative value // // 2. just use css rule in the tocbot table `.toc-list-item` to change SpanBB es padding to negative // } // // #>>>< // @note:: // a relative heading seems not very useful, visually, its same as a relative not_a_heading ... // // this class represent a node in a hierarchical structure of the headings // (HihesNode stands for Node_inHierarchicalHeadingStructure) // @version-modify: this correspond to the prev ori tocbot code [`heading object` in `getHeadingObject(heading)`] class HihesNode { elt_self; // stores the original corresponding Dom element arr_hihesNode_child; // node linkage hihesNode_parent; // node linkage // normally // correspond to heading level of a Dom heading element (if its a heading element;) // mainly serves the purpose of indentation // a Dom not_a_heading element can also have this "headingLevel" (said, mainnly for indentation) // a Dom not_a_heading element es headingLevel is assigned to be `hihesNode_parent.headingLevel +1` by default // (can change via css) headingLevel; // --- // is this a hihes heading node // normally, // a Dom heading element (eg:
) is a hihes_heading_node // a Dom not_a_heading element (eg: ) is not a hihes_heading_node // (can change via css) det_IsHihesHeadingNode; // --- // is this node a dummny_padding_node // (a node created for padding for @eg: the missing h3 between 2 consecutive headings h2 & h4) det_IsHihesDummyPaddingNode; // --- // is this node es heading level built relativly to another (parent) heading level det_IsHeadingLevelRelative; // (null if this node es heading level is not relative) headingLevel_rel; // the hihesNode this hihesNode_this es headingLevel_rel is relative to // hihesNode_Heading_HeadingLevelAbs_ClosestLinearDfs_Relativable_parent hihesNode_ClosestRelativable_parent; // when using relative heading level, // can this hihesNode_this es heading level be relative to // if not, check hihesNode_this es hihesNode_ClosestRelativable_parent det_IsHeadingLevelRelativable; // a builder for HihesNode // a typical usage example would be (as in source code):: // ``` // let hihesNode_Heading_currDfs_builder = HihesNode.initBuilder(elt_HeadingOrNot_curr, hihesNode_Heading_prevDfs.hihesNode_parent); // hihesNode_Heading_currDfs = hihesNode_Heading_currDfs_builder.build_hihesNode_HeadingOrNot_RelativeOrNot(det_IsHihesHeadingNode_currELt, det_IsHeadingLevelRelative_currElt, headingLevel_rel_currElt, hihesNode_ClosestRelativable_parent); // ``` static initBuilder(elt_self, hihesNode_parent) { class HihesNodeBuilder { elt_self; // stores the original corresponding Dom element hihesNode_parent; // node linkage setupBasicElement(elt_self, hihesNode_parent) { this.elt_self = elt_self, this.hihesNode_parent = hihesNode_parent return this; } build_hihesNode_root() { return new HihesNode(null, [], null, 0, true, false, false, null, null, true); } build_hihesNode_Heading_Absolute(hihesNode_ClosestRelativable_parent) { return new HihesNode(this.elt_self, [], this.hihesNode_parent, this.hihesNode_parent.headingLevel+1, true, false, false, null, hihesNode_ClosestRelativable_parent, true); } // build_hihesNode_NotAHeading_RegularRelative() { // return new HihesNode(this.elt_self, null, this.hihesNode_parent, this.hihesNode_parent.headingLevel+1, false, false, true, 1, this.hihesNode_parent, false); // } build_hihesNode_NotAHeading_Relative(headingLevel_rel, hihesNode_ClosestRelativable_parent) { return new HihesNode(this.elt_self, null, this.hihesNode_parent, this.hihesNode_parent.headingLevel+1, false, false, true, headingLevel_rel, hihesNode_ClosestRelativable_parent, false); } build_hihesNode_NotAHeading_Absolute(hihesNode_ClosestRelativable_parent) { return new HihesNode(this.elt_self, null, this.hihesNode_parent, this.hihesNode_parent.headingLevel+1, false, false, false, null, hihesNode_ClosestRelativable_parent, false); } build_hihesNode_Heading_Relative(headingLevel_rel, hihesNode_ClosestRelativable_parent) { return new HihesNode(this.elt_self, [], this.hihesNode_parent, this.hihesNode_parent.headingLevel+1, true, false, true, headingLevel_rel, hihesNode_ClosestRelativable_parent, false); } build_hihesNode_HeadingOrNot_RelativeOrNot(det_IsHihesHeadingNode, det_IsHeadingLevelRelative, headingLevel_rel, hihesNode_ClosestRelativable_parent) { if (det_IsHihesHeadingNode === true && det_IsHeadingLevelRelative === false) { return this.build_hihesNode_Heading_Absolute(hihesNode_ClosestRelativable_parent); } else if (det_IsHihesHeadingNode === false && det_IsHeadingLevelRelative === true) { return this.build_hihesNode_NotAHeading_Relative(headingLevel_rel, hihesNode_ClosestRelativable_parent); } else if (det_IsHihesHeadingNode === false && det_IsHeadingLevelRelative === false) { return this.build_hihesNode_NotAHeading_Absolute(hihesNode_ClosestRelativable_parent); } else if (det_IsHihesHeadingNode === true && det_IsHeadingLevelRelative === true) { return this.build_hihesNode_Heading_Relative(headingLevel_rel, hihesNode_ClosestRelativable_parent); } } build_hihesNode_DummyPadding(hihesNode_ClosestRelativable_parent) { return new HihesNode(null, [], this.hihesNode_parent, this.hihesNode_parent.headingLevel+1, true, true, false, null, hihesNode_ClosestRelativable_parent, false); } } return new HihesNodeBuilder().setupBasicElement(elt_self, hihesNode_parent); } // (better not use this constructor, use builder above) // // @code_design-bad? @note: the linkage is automatically established once constructed @ie: `nodeHierarchy_parent.arr_nodeHierarchy_child.push(this);` // (for saving some coding) // @code_design @note: other args like arr_nodeHierarchy_child / levelHierarchy may be optional, cuz can tell from other input args, but nah manual for now .. constructor(elt_self, arr_hihesNode_child, hihesNode_parent, headingLevel, det_IsHihesHeadingNode, det_IsHihesDummyPaddingNode, det_IsHeadingLevelRelative, headingLevel_rel, hihesNode_ClosestRelativable_parent, det_IsHeadingLevelRelativable) { this.elt_self = elt_self; this.arr_hihesNode_child = arr_hihesNode_child; this.hihesNode_parent = hihesNode_parent; this.headingLevel = headingLevel; // this.det_IsHihesHeadingNode = det_IsHihesHeadingNode; // this.det_IsHihesDummyPaddingNode = det_IsHihesDummyPaddingNode; // @seldom_used[5%]: this property is actually not used in the main business logic, but is kept bc its a (close-to-main) property of the structure // ^ ((at least) used in a convert function, though can be replaced) // this.det_IsHeadingLevelRelative = det_IsHeadingLevelRelative; // @seldom_used[0%] this.headingLevel_rel = headingLevel_rel; // @seldom_used[0%] this.hihesNode_ClosestRelativable_parent = hihesNode_ClosestRelativable_parent; this.det_IsHeadingLevelRelativable = det_IsHeadingLevelRelativable; if (headingLevel !== 0) { // if not root element hihesNode_parent.arr_hihesNode_child.push(this); } // @bug-guard-trivial,rule-check:: if (hihesNode_parent === null || headingLevel === 0) { // [[1. unqiuely identify a element first 2. check all that must apply]] if (!(elt_self === null && arr_hihesNode_child !== null && hihesNode_parent === null && headingLevel === 0 && det_IsHihesHeadingNode === true && det_IsHihesDummyPaddingNode === false)) { console.error(this); throw new Error('invalid HihesNode'); } } if (det_IsHihesDummyPaddingNode === true) { if (!(elt_self === null && arr_hihesNode_child !== null && hihesNode_parent !== null && (headingLevel === hihesNode_parent.headingLevel + 1) && det_IsHihesHeadingNode === true && det_IsHihesDummyPaddingNode === true)) { console.error(this); throw new Error('invalid HihesNode'); } } if (det_IsHihesHeadingNode === false || arr_hihesNode_child === null) { if (!(elt_self !== null && arr_hihesNode_child === null && hihesNode_parent !== null && (headingLevel === hihesNode_parent.headingLevel + 1) && det_IsHihesHeadingNode === false && det_IsHihesDummyPaddingNode === false)) { console.error(this); throw new Error('invalid HihesNode'); } } if (elt_self === null) { // [[*. seem need check from both directions... 3. start checking through each arg; for avoiding repeatness, set the rule by composing prev uniquely identified tested elements]] if (!((hihesNode_parent === null || headingLevel === 0) || (det_IsHihesDummyPaddingNode === true))) { console.error(this); throw new Error('invalid HihesNode'); } } // [[4. general case + rest (complementary) of the case (may not able to cover all)]] if (!(hihesNode_parent === null || headingLevel === 0)) { if (!(hihesNode_parent !== null && (headingLevel === hihesNode_parent.headingLevel + 1))) { console.error(this); throw new Error('invalid HihesNode'); } if (det_IsHihesDummyPaddingNode === false) { if (elt_self === null) { console.error(this); throw new Error('invalid HihesNode'); } } if (hihesNode_parent.det_NotAHeadingSoNoChildHierarchy === true) { console.error(this); throw new Error('invalid HihesNode'); } } if (!(det_IsHihesHeadingNode === false || arr_hihesNode_child === null)) { if (arr_hihesNode_child === null || det_IsHihesHeadingNode === false) { console.error(this); throw new Error('invalid HihesNode'); } } // can add more..... } // JSON style output, with proper indentation toString() { let space_SetWithIndentSize = ' '; let output_ChildEltCum = ''; if (this.arr_hihesNode_child && this.arr_hihesNode_child.length !== 0) { this.arr_hihesNode_child.forEach(e => { output_ChildEltCum += e.toString() + ', \n'; }); } else { output_ChildEltCum += '* arr_HihesNode_child == []' + '\n'; } // use regex to add indent/-padding for (all) child hierarchy node output_ChildEltCum = output_ChildEltCum.replaceAll(/^(?!$)/gm, space_SetWithIndentSize + space_SetWithIndentSize); return '{' + '\n' + space_SetWithIndentSize + (this.elt_self ? this.elt_self.innerHTML.replaceAll(/\n/g, '\\n') : '* elt_self === null') + '\n' + space_SetWithIndentSize + (this.headingLevel + ' | ' + this.det_IsHihesHeadingNode + ' | ' + this.det_IsHihesDummyPaddingNode + ' | ') + '\n' + space_SetWithIndentSize + (this.det_IsHeadingLevelRelative + ' | ' + this.headingLevel_rel + ' | ' + this.hihesNode_ClosestRelativable_parent.elt_self + ' | ' + this.det_IsHeadingLevelRelativable + ' | ') // + '\n' + space_SetWithIndentSize + (this.cssInfo_headingLevel ? JSON.stringify(this.cssInfo_headingLevel) : '*') // + '\n' + space_SetWithIndentSize + (this.cssInfo_IsHeading ? JSON.stringify(this.cssInfo_IsHeading) : '*') + '\n' + space_SetWithIndentSize + '[' + '\n' + output_ChildEltCum + space_SetWithIndentSize + ']' + '\n' + '}'; } } // (css file linkage here) const tocbot_hihesnode_isheading = '--tocbot-hihesnode-isheading'; const tocbot_hihesnode_headinglv = '--tocbot-hihesnode-headinglv'; // function detIsHihesHeadingNode(elt) { //? hows quotes in custom css property treated?? let cssInfo_IsHeading = { value: undefined, det_ManualSetInCssFile: undefined }; let css_IsHeading = $(elt).css(tocbot_hihesnode_isheading); if (css_IsHeading !== undefined) { css_IsHeading = css_IsHeading.trim(); if (css_IsHeading === 'true') { cssInfo_IsHeading.value = true; cssInfo_IsHeading.det_ManualSetInCssFile = true; } else if (css_IsHeading === 'false') { cssInfo_IsHeading.value = false; cssInfo_IsHeading.det_ManualSetInCssFile = true; } else { console.error(css_IsHeading); console.error(elt); throw new Error('invalid value for css var ' + tocbot_hihesnode_isheading + ' -- need to be true/false/undefined(not set)'); } } // determine if its

..., when css var is not set else { cssInfo_IsHeading.value = /^H\d$/gi.test(elt.tagName); cssInfo_IsHeading.det_ManualSetInCssFile = true; } return cssInfo_IsHeading; } // function getHeadingLevelInHihesNode(elt) { let cssInfo_headingLevel = { value_absolute: undefined, det_IsHeadingLevelRelative: undefined, value_relative: undefined, det_ManualSetInCssFile: undefined }; let css_HeadingLv = $(elt).css(tocbot_hihesnode_headinglv); if (css_HeadingLv !== undefined) { css_HeadingLv = css_HeadingLv.trim(); let arr_matcherArr = [...css_HeadingLv.matchAll(/^(?'|")rel(?(\+|\-)\d+)\k$/g)]; if (arr_matcherArr.length === 0) { // a absolute value let headingLv = parseInt(css_HeadingLv); if (headingLv > 0) { cssInfo_headingLevel.value_absolute = headingLv; cssInfo_headingLevel.det_IsHeadingLevelRelative = false; cssInfo_headingLevel.det_ManualSetInCssFile = true; } else { console.error(css_HeadingLv); console.error(elt); throw new Error('invalid value for css var ' + tocbot_hihesnode_headinglv + ' -- need to be > 0'); } } else { // a relative value let matcher_First = arr_matcherArr[0]; cssInfo_headingLevel.det_IsHeadingLevelRelative = true; cssInfo_headingLevel.value_relative = parseInt(matcher_First.groups.relativeHeadingLvValue); cssInfo_headingLevel.det_ManualSetInCssFile = true; } } else { let tagName = elt.tagName; // @eg: 'H4' / 'span' let arr_matcherArr = [...tagName.matchAll(/^H(?\d)$/gi)]; // convert heading lv from

..., @eg: H4 to 4, when css var is not set if (arr_matcherArr.length !== 0) { let matcher_First = arr_matcherArr[0]; cssInfo_headingLevel.value_absolute = parseInt(matcher_First.groups.headingLv); cssInfo_headingLevel.det_IsHeadingLevelRelative = false; cssInfo_headingLevel.det_ManualSetInCssFile = false; } // default action if css var is not set & not a

... heading element else { // heading level is not set -- use default treatment (`hihesNode_parent.headingLevel +1`) cssInfo_headingLevel.det_IsHeadingLevelRelative = true; cssInfo_headingLevel.value_relative = 1; cssInfo_headingLevel.det_ManualSetInCssFile = false; } } return cssInfo_headingLevel; } // // // @functionality:{ // provided with a linear array (NodeList) of heading elements (more percisely, an array of elt_PickedToPresentInTocbot, which may contain elements that are not_a_heading) // converts the linear array into a hierarchy tree with nodes -- base on the heading level & order of the elements // returns that root node // } // --- // the whole @key code of this function is inside // `for (let elt_Heading_curr of Array.from(headingsArray)) {` // --- // this is a DFS (depth first search) linear loop (through the array) // (though, not fully linear -- cuz ) // @logic,rule:{ // it climbs up/down to find the appropriate node_parent (a_heading) to append the node_curr (a_heading / not_a_heading) // appropriate means:_ // 1. // deeper level headings must be under shallower level headings @eg: h2 must under h1 // 2. // the heading level of each heading direclty below,, must be exactly 1 greater than,, the level of heading directly above -- @eg: h4 must be under h3 // if @ie,eg: there is a missing heading h3 between h2 & h4 // then a/many node_dummyPadding is created to fill that gap [[-- this is the key to let the headngs indented to correct position -- the issue I post in Github]] // 3. // when receving an element that is NotAHeading but PickedToPresentInTocbot // 3.1 // the heading level of elt_NotAHeading should be `nodeHierarchy_parent.levelHierarchy +1` // ~/updated no_longer_apply/ [[the design of `fixed at some heading level` is abandont (for now)]] // ~/updated no_longer_apply/ [[the design of `dynamic controlable relative heading level -- @ie: nodeHierarchy_parent.levelHierarchy +levelHierarchyInterval_RelToParent` is not implemented (for now) -- could be implemented by adding more node_dummyPadding when needed I_think //think-design_self_better]] // 3.2 // no node should be under the node_NotAHeading // } // @cases:{ // when comparing `the heading level of the node_curr` vs `the heading level of the node_prev` // 1. if ==, -> find node_parent of node_prev, append node_curr into node_parent.child_array // 1. if > && just 1 greater, -> find node_prev, append node_curr into node_prev.child_array // 1. if > && more than 1 greater, -> find node_prev, append a node_dummyPadding into node_prev.child_array, then append node_curr into that node_dummyPadding.child_array; (if needed create more & deeper node_dummyPadding, until appropriate) // 1. if <, -> find node_parent / node_grandparent / node_grandgrandparent ... of node_prev, until appropriate, then append node_curr ... // 1. 1st item in loop case // 1. root case // 1. elt_NotAHeading case // 1. ... // } // // // @version-modify: this correspond to the prev ori tocbot code [`nestHeadingsArray(headingsArray)` + `addNode(node, nest)` + `getHeadingObject(heading)`] // nestHeadingsArray_Nt(headingsArray) function convert_LinearArrayWithHeadings_to_HihesNode(headingsArray) { // root node let hihesNode_root = HihesNode.initBuilder(null, null).build_hihesNode_root(); // current looping element `elt_Heading_curr` will be converted into this `hihesNode_Heading_currDfs` (/ `node_curr`), // and will be appended to an appropriate `node_parent` // by searching through the nodes&linkage stored in `hihesNode_Heading_prevDfs` let hihesNode_Heading_currDfs; let hihesNode_Heading_prevDfs = hihesNode_root; // `hihesNode_Heading_prevDfs = hihesNode_Heading_currDfs;` at the end of for loop // #>- linear loop Dfs // [[seem no need recursion, linear loop works... //think]] // [[the prev origial nestHeadingsArray() use `reduce()` //think]] for (let elt_HeadingOrNot_curr of Array.from(headingsArray)) { // headingsArray is a NodeList // #>>> get heading info let cssInfo_headingLevel_CurrELt = getHeadingLevelInHihesNode(elt_HeadingOrNot_curr); let headingLevel_CurrElt = cssInfo_headingLevel_CurrELt.value_absolute; let det_IsHeadingLevelRelative_currElt = cssInfo_headingLevel_CurrELt.det_IsHeadingLevelRelative; let headingLevel_rel_currElt = cssInfo_headingLevel_CurrELt.value_relative; let cssInfo_IsHeading_CurrELt = detIsHihesHeadingNode(elt_HeadingOrNot_curr); let det_IsHihesHeadingNode_currELt = cssInfo_IsHeading_CurrELt.value; // #>>>>< calculate relative heading level & get hihesNode_ClosestRelativable_parent let hihesNode_ClosestRelativable_parent; hihesNode_ClosestRelativable_parent = hihesNode_Heading_prevDfs; if (hihesNode_Heading_prevDfs.det_IsHeadingLevelRelativable === false) { hihesNode_ClosestRelativable_parent = hihesNode_Heading_prevDfs.hihesNode_ClosestRelativable_parent; // ;no_longer_apply; @flow-direction: stepping upward // ;no_longer_apply; this is the only time which `hihesNode_Heading_prevDfs_currHierarchyDownwardChild` actually steps up } if (det_IsHeadingLevelRelative_currElt === true) { // need put _ same +a_relative_value _ layer headingLevel_CurrElt = hihesNode_ClosestRelativable_parent.headingLevel + headingLevel_rel_currElt; if (headingLevel_CurrElt <= 0) { headingLevel_CurrElt = 1; } } // #>>> put in same layer if (headingLevel_CurrElt === hihesNode_Heading_prevDfs.headingLevel) { //rt: // 1. if ==, -> find node_parent of node_prev, append node_curr into node_parent.child_array let hihesNode_Heading_currDfs_builder = HihesNode.initBuilder(elt_HeadingOrNot_curr, hihesNode_Heading_prevDfs.hihesNode_parent); hihesNode_Heading_currDfs = hihesNode_Heading_currDfs_builder.build_hihesNode_HeadingOrNot_RelativeOrNot(det_IsHihesHeadingNode_currELt, det_IsHeadingLevelRelative_currElt, headingLevel_rel_currElt, hihesNode_ClosestRelativable_parent); } // #>>> put in deeper layer else if (headingLevel_CurrElt > hihesNode_Heading_prevDfs.headingLevel) { let i = 0; let hihesNode_Heading_prevDfs_currHierarchyDownwardChild = hihesNode_Heading_prevDfs; // @duplicated-check: already done in `if (det_HeadingLevelIsRelativeToPrecedingHeading_CurrElt === true)`, but fine if (hihesNode_Heading_prevDfs.det_IsHihesHeadingNode === false) { hihesNode_Heading_prevDfs_currHierarchyDownwardChild = hihesNode_Heading_prevDfs.hihesNode_parent; //@flow-direction: stepping upward // ;no_longer_apply; this is the only time which `hihesNode_Heading_prevDfs_currHierarchyDownwardChild` actually steps up } //rt: // 1. if > && just 1 greater, -> find node_prev, append node_curr into node_prev.child_array //rt: // 1. if > && more than 1 greater, -> find node_prev, append a node_dummyPadding into node_prev.child_array, then append node_curr into that node_dummyPadding.child_array; (if needed create more & deeper node_dummyPadding, until appropriate) while (headingLevel_CurrElt > hihesNode_Heading_prevDfs_currHierarchyDownwardChild.headingLevel) { // @duplicated-check: already done in `else if (headingLevel_CurrElt > hihesNode_Heading_prevDfs.levelHierarchy) {`, but fine i++; // path[direct +1 below node_prevDfs]-normal(90%) // path[dummy]-normal(70%) // path[prevDfsNode is not a Heading]-normal(25%) & ... -> path[dummy]-normal(70%) / ... // just means the even below path `not a heading` will re-loop & go through this path below let levelHeading_LvOfPrevDfsNodePlusOne = hihesNode_Heading_prevDfs_currHierarchyDownwardChild.headingLevel + 1; // path[direct +1 below node_prevDfs]-normal(90%) -- if only loop once // path[dummy]-normal(70%) -- if only loop more than once if (headingLevel_CurrElt === levelHeading_LvOfPrevDfsNodePlusOne) { //@main: //repeat-from[case direct +1 below node_prevDfs]-explain: 1. convert elt_Heading_curr to a new NodeHierarchy instance `node_curr`(/`hihesNode_Heading_currDfs`), //repeat-from[case direct +1 below node_prevDfs]-explain: 2. append `node_curr` into `node_parent.child_array` (`hihesNode_Heading_prevDfs_currHierarchyDownwardChild.arr_hihesNode_child`) // this is automatically done inside the constructor let hihesNode_Heading_currDfs_builder = HihesNode.initBuilder(elt_HeadingOrNot_curr, hihesNode_Heading_prevDfs_currHierarchyDownwardChild); hihesNode_Heading_currDfs = hihesNode_Heading_currDfs_builder.build_hihesNode_HeadingOrNot_RelativeOrNot(det_IsHihesHeadingNode_currELt, det_IsHeadingLevelRelative_currElt, headingLevel_rel_currElt, hihesNode_ClosestRelativable_parent); break; //@flow-direction: } // path[dummy]-normal(70%) add dummmy padding node, and re-loop into check again else { let hihesNode_Heading_currDfs_builder = HihesNode.initBuilder(elt_HeadingOrNot_curr, hihesNode_Heading_prevDfs_currHierarchyDownwardChild); hihesNode_Heading_currDfs = hihesNode_Heading_currDfs_builder.build_hihesNode_DummyPadding(hihesNode_ClosestRelativable_parent); hihesNode_Heading_prevDfs_currHierarchyDownwardChild = hihesNode_Heading_currDfs; //@flow-direction: stepping downward -> & re-loop } // @bug-guard-trivial,debug:: (dont think should happen) if (i > 80) { console.log('>> while (levelHeading_CurrElt > hihesNode_Heading_prevDfs_currHierarchySteppingDown.levelHierarchy) { -- inf looping? :: ' + i + ' - ' + hihesNode_Heading_prevDfs_currHierarchyDownwardChild); } } // while ();; } // #>>> put in shallower layer else if (headingLevel_CurrElt < hihesNode_Heading_prevDfs.headingLevel) { // eg: 2 < 4 let hihesNode_Heading_prevDfs_currHierarchyUpwardParent = hihesNode_Heading_prevDfs; //rt: // 1. if <, -> find node_parent / node_grandparent / node_grandgrandparent ... of node_prev, until appropriate, then append node_curr ... while (headingLevel_CurrElt <= hihesNode_Heading_prevDfs_currHierarchyUpwardParent.headingLevel) { // @duplicated-check: ^ hihesNode_Heading_prevDfs_currHierarchyUpwardParent = hihesNode_Heading_prevDfs_currHierarchyUpwardParent.hihesNode_parent; } let hihesNode_Heading_currDfs_builder = HihesNode.initBuilder(elt_HeadingOrNot_curr, hihesNode_Heading_prevDfs_currHierarchyUpwardParent); hihesNode_Heading_currDfs = hihesNode_Heading_currDfs_builder.build_hihesNode_HeadingOrNot_RelativeOrNot(det_IsHihesHeadingNode_currELt, det_IsHeadingLevelRelative_currElt, headingLevel_rel_currElt, hihesNode_ClosestRelativable_parent); } // @debug-info:: // hihesNode_Heading_currDfs.cssInfo_headingLevel = cssInfo_headingLevel_CurrELt; // hihesNode_Heading_currDfs.cssInfo_IsHeading = cssInfo_IsHeading_CurrELt; // @flow-direction: hihesNode_Heading_prevDfs = hihesNode_Heading_currDfs; // @note,minor:: for the naming of `_(prev|curr)Dfs`:_ // when in the normal case (/ first few times search), the prevDfs rt _the element in the prev nodeHierarchy in the Linear Loop Array_; // however (at later times, -) after you append dummy padding node, its (may) no longer in "the linear looped array" // @note,minor: the cases for prev were all elt_NotAHeading (no heading elt has come yet) is backed by the node_root } // #>- linear loop Dfs;; // // ;debug; console.log(hihesNode_root); // ;debug; console.log(hihesNode_root.toString()); return hihesNode_root; } // @helper_function of `convert_HihesNode_to_TocbotOriRequiredHeadingObject()` // convert_HihesNode_to_TocbotOriRequiredHeadingObject_individually, individually, not recursively // -- so the `children: []` will always be `[]` // // @version-modify: this correspond to the prev ori tocbot code [`getHeadingObject()` (similar)] function convert_HihesNode_to_TocbotOriRequiredHeadingObject_individually(hihesNode) { let elt_HeadingOrNot = hihesNode.elt_self; if (options.ignoreHiddenElements && (!elt_HeadingOrNot.offsetHeight || !elt_HeadingOrNot.offsetParent)) { return null; } // @main:: tocbotHeadingObject let tocbotHeadingObject; if (hihesNode.det_IsHihesDummyPaddingNode === false) { // is not a node_dummyPadding // ie: elt_Heading !== null // can be a elt_NotAHeading const headingLabel = elt_HeadingOrNot.getAttribute('data-heading-label') || (options.headingLabelCallback ? String(options.headingLabelCallback(elt_HeadingOrNot.textContent)) : elt_HeadingOrNot.textContent.trim()); // @main: elt_Heading.textContent tocbotHeadingObject = { id: elt_HeadingOrNot.id, children: [], nodeName: elt_HeadingOrNot.nodeName, headingLevel: hihesNode.headingLevel, textContent: headingLabel }; } else if (hihesNode.det_IsHihesDummyPaddingNode === true) { // is a node_dummyPadding tocbotHeadingObject = { id: null, // (dk the sematic of tocbotHeadingObject that requires ... but use this for now... // actually works) children: [], nodeName: null, headingLevel: hihesNode.headingLevel, textContent: null }; } else { throw new Error('invalid value for hihesNode.det_IsHihesDummyPaddingNode :: ' + hihesNode.det_IsHihesDummyPaddingNode); } // `hihesNode_root` will not & should not be used in this function // @main:: tocbotHeadingObject;; if (options.includeHtml) { obj.childNodes = elt_HeadingOrNot.childNodes; } if (options.headingObjectCallback) { return options.headingObjectCallback(obj, elt_HeadingOrNot); } if (tocbotHeadingObject.headingLevel >= options.collapseDepth) { tocbotHeadingObject.isCollapsed = true; } return tocbotHeadingObject; } // provided with a (root) node `hihesNode_HeadingToBeConverted_parent_currRecursionDfs` // converts the `hihesNode_HeadingToBeConverted_parent_currRecursionDfs` into a `tocbotHeadingObject` // -- a heading object tocbot originally required (before I modify the code in `convert_LinearArrayWithHeadings_to_HihesNode()` -- ie: `tocbotHeadingObject_root = { nest: [] };`) // // converts recursively, for all the nodes in that hierarchy tree (that (root) node) // returns the converted-into `tocbotHeadingObject` // // `tocbotHeadingObject_ConvertedInto_parent_currRecursionDfs` is for internal recursion -- you should not use (/-assign any value to) it function convert_HihesNode_to_TocbotOriRequiredHeadingObject(hihesNode_HeadingToBeConverted_parent_currRecursionDfs, tocbotHeadingObject_ConvertedInto_parent_currRecursionDfs = undefined) { let tocbotHeadingObject_root; let arr_tocbotHeadingObject_ConvertedInto_precentGen_currRecursionDfs; // init recursion /// this must be placed outside of the loop -> otherwise, each time it loops (when its not under recursion -- the first loop) its `tocbotHeadingObject_currRecursionDfs_parentOfConvertedIntoTocbotHeadingObject` is always undefined if (tocbotHeadingObject_ConvertedInto_parent_currRecursionDfs === undefined) { tocbotHeadingObject_root = { nest: [] }; // @note: double loop is due to:_ // 1. inconsistency of structure & naming: in the root heading object -- uses `nest` vs in the child heading obj -- uses `children` // 2. hihesNode_root -- loop through (decompose) first arr_tocbotHeadingObject_ConvertedInto_precentGen_currRecursionDfs = tocbotHeadingObject_root.nest; } // subsequent loop else { arr_tocbotHeadingObject_ConvertedInto_precentGen_currRecursionDfs = tocbotHeadingObject_ConvertedInto_parent_currRecursionDfs.children; } // (loop + recursion::) (loop first) // @comment_ignore_this_comment [[aga, recursion is vertically, loop is horizontally let arr_hihesNode_HeadingToBeConverted_precentGen_currRecursionDfs = hihesNode_HeadingToBeConverted_parent_currRecursionDfs.arr_hihesNode_child; if (arr_hihesNode_HeadingToBeConverted_precentGen_currRecursionDfs !== null && arr_hihesNode_HeadingToBeConverted_precentGen_currRecursionDfs.length !== 0) { // null case is for elt_NotAHeading for (let hihesNode_HeadingToBeConverted_precentGen_currRecursionDsf of arr_hihesNode_HeadingToBeConverted_precentGen_currRecursionDfs) { // (business logic -- conversion::) // @comment_ignore_this_comment // [[ said, the place of recursion & business logic is diff than before... said, DFS depth first search vs depth first action ... //think many ways... // converts the node to a tocbotHeadingObject, individually - not recursively let tocbotHeadingObject_ConvertedInto_precentGen_currRecursionDfs = convert_HihesNode_to_TocbotOriRequiredHeadingObject_individually(hihesNode_HeadingToBeConverted_precentGen_currRecursionDsf); // fill up the tocbotHeadingObject hierarchy -- by appending current `tocbotHeadingObject_curr` (/ `tocbotHeadingObject_ConvertedInto_currRecursionDfs`) into the `tocbotHeadingObject_parent.children` arr_tocbotHeadingObject_ConvertedInto_precentGen_currRecursionDfs.push(tocbotHeadingObject_ConvertedInto_precentGen_currRecursionDfs); convert_HihesNode_to_TocbotOriRequiredHeadingObject(hihesNode_HeadingToBeConverted_precentGen_currRecursionDsf, tocbotHeadingObject_ConvertedInto_precentGen_currRecursionDfs); } } return tocbotHeadingObject_root; } // @version-modify: this correspond to the prev ori tocbot code [`nestHeadingsArray(headingsArray)`] function nestHeadingsArray(headingsArray) { // console.log('>---<'); // nestHeadingsArray_NtOriReduced(headingsArray); let hihesNode_root = convert_LinearArrayWithHeadings_to_HihesNode(headingsArray); // console.log(hihesNode_root); // console.log(hihesNode_root.toString()); let tocbotHeadingObject_root = convert_HihesNode_to_TocbotOriRequiredHeadingObject(hihesNode_root); // console.log(tocbotHeadingObject_root); return tocbotHeadingObject_root; } // ################################# Nl modification for [nest heading object] end ################################# ```

tscanlin commented 1 year ago

Thanks for working on this!

The code looks like a lot and a bit hard for me to follow so I don't plan to include it but feel free to make another library or a blog article to discuss it and share it with the world. I took a try at expanding on the CSS way I mentioned earlier and came up with this:

.toc-link.node-name--H1 ~ .toc-list .toc-list-item .toc-link.node-name--H3,
.toc-link.node-name--H2 ~ .toc-list .toc-list-item .toc-link.node-name--H4,
.toc-link.node-name--H3 ~ .toc-list .toc-list-item .toc-link.node-name--H5 {
  margin-left: 10px;
}

It should handle the display the way you described without adjusting the nesting logic or re-writing so much code. This could easily be expanded upon to support deeper nesting levels, but I'm not sure how common those cases are or if it makes sense to add code for them. Open to it though! Let me know what you think.

tscanlin commented 1 year ago

Closing this but feel free to comment if you are still having issues.

tscanlin / tocbot