ENH: Allowing inline elements in sidenotes and marginnotes (#641)

* changes in _transforms to accomodate other nodes

* modifying test

* correcting marginnote test

Author: AakashGfude

src/sphinx_book_theme/_transforms.py

@@ -31,26 +31,30 @@ def run(self, **kwargs: Any) -> None:
                 ):
                     parent = foot_node.parent
                     # second children of footnote node is the content text
-                    text = foot_node.children[1].astext()
+                    foot_node_content = foot_node.children[1].children
 
                     sidenote = SideNoteNode()
                     para = docutil_nodes.inline()
                     # first children of footnote node is the label
                     label = foot_node.children[0].astext()
 
-                    if text.startswith("{-}"):
+                    if foot_node_content[0].astext().startswith("{-}"):
                         # marginnotes will have content starting with {-}
                         # remove the number so it doesn't show
                         para.attributes["classes"].append("marginnote")
-                        para.append(docutil_nodes.Text(text.replace("{-}", "")))
+                        foot_node_content[0] = docutil_nodes.Text(
+                            foot_node_content[0].replace("{-}", "")
+                        )
+                        para.children = foot_node_content
 
                         sidenote.attributes["names"].append(f"marginnote-role-{label}")
                     else:
                         # sidenotes are the default behavior if no {-}
                         # in this case we keep the number
                         superscript = docutil_nodes.superscript("", label)
                         para.attributes["classes"].append("sidenote")
-                        para.extend([superscript, docutil_nodes.Text(text)])
+                        parachildren = [superscript] + foot_node_content
+                        para.children = parachildren
 
                         sidenote.attributes["names"].append(f"sidenote-role-{label}")
                         sidenote.append(superscript)

tests/sites/base/page2.md

@@ -7,13 +7,13 @@ Some text to test out one sidenote[^myref] and another sidenote[^3]
 
 [^myref]: This is a sidenote.
 
-[^3]: This is another sidenote.
+[^3]: This is *another* **sidenote**.
 
 ## Marginnotes
 
 Some text to test out one marginnote[^somemargin] and another marginnote[^6]
 
-[^somemargin]: {>} This is a marginnote.
-[^6]: {>} This is another marginnote.
+[^somemargin]: {-} This is a marginnote.
+[^6]: {-} This is *another* **marginnote**.
 
 This is the end of Page 2.

tests/test_build/test_marginnote.html

@@ -10,34 +10,25 @@ <h2>
  </h2>
  <p>
   Some text to test out one marginnote
-  <label class="margin-toggle" for="sidenote-role-2">
-   <span id="id3">
-    <sup>
-     2
-    </sup>
-   </span>
+  <label class="margin-toggle marginnote-label" for="marginnote-role-2">
   </label>
-  <input class="margin-toggle" id="sidenote-role-2" name="sidenote-role-2" type="checkbox"/>
-  <span class="sidenote">
-   <sup>
-    2
-   </sup>
-   {&gt;} This is a marginnote.
+  <input class="margin-toggle" id="marginnote-role-2" name="marginnote-role-2" type="checkbox"/>
+  <span class="marginnote">
+   This is a marginnote.
   </span>
   and another marginnote
-  <label class="margin-toggle" for="sidenote-role-6">
-   <span id="id4">
-    <sup>
-     6
-    </sup>
-   </span>
+  <label class="margin-toggle marginnote-label" for="marginnote-role-6">
   </label>
-  <input class="margin-toggle" id="sidenote-role-6" name="sidenote-role-6" type="checkbox"/>
-  <span class="sidenote">
-   <sup>
-    6
-   </sup>
-   {&gt;} This is another marginnote.
+  <input class="margin-toggle" id="marginnote-role-6" name="marginnote-role-6" type="checkbox"/>
+  <span class="marginnote">
+   This is
+   <em>
+    another
+   </em>
+   <strong>
+    marginnote
+   </strong>
+   .
   </span>
  </p>
  <p>

tests/test_build/test_sidenote.html

@@ -37,7 +37,14 @@ <h2>
    <sup>
     3
    </sup>
-   This is another sidenote.
+   This is
+   <em>
+    another
+   </em>
+   <strong>
+    sidenote
+   </strong>
+   .
   </span>
  </p>
 </section>