feat: Copy the section attributes from the heading, however the id …

…will be moved

src/plugins/section.ts

@@ -13,13 +13,48 @@ import visit from 'unist-util-visit-parents';
 /** Maximum depth of hierarchy to process headings. */
 const MAX_HEADING_DEPTH = 6;
 
+/**
+ * Check the heading properties to generate properties for the parent `<section>` and update the heading style.
+ * @param node Node of Markdown AST.
+ * @returns Properties.
+ */
+const checkProperties = (node: any, depth: number) => {
+  if (!node.data?.hProperties) {
+    return undefined;
+  }
+
+  // Remove `id` attribute and copy otherwise for the parent `<section>`
+  const hProperties = { ...node.data.hProperties };
+  if (node.data.hProperties.id) {
+    delete node.data.hProperties.id;
+  }
+
+  // {hidden} specifier
+  if (Object.keys(hProperties).includes('hidden')) {
+    node.data.hProperties.style = 'display: none;';
+  }
+
+  // output section levels like Pandoc
+  if (Array.isArray(hProperties.class)) {
+    // Switch references as they do not affect the heading,
+    // and `remark-attr` may add classes, so make sure they come before them (always top)
+    const classes = [...hProperties.class];
+    classes.unshift(`level${depth}`);
+    hProperties.class = classes;
+  } else {
+    hProperties.class = [`level${depth}`];
+  }
+
+  return hProperties;
+};
+
 /**
  * Wrap the header in sections.
  * @param node Node of Markdown AST.
  * @param ancestors Parents.
  * @todo handle `@subtitle` properly.
  */
-function sectionize(node: any, ancestors: Parent[]) {
+const sectionize = (node: any, ancestors: Parent[]) => {
   const start = node;
   const depth = start.depth;
   const parent = ancestors[ancestors.length - 1];
@@ -36,19 +71,7 @@ function sectionize(node: any, ancestors: Parent[]) {
     endIndex > 0 ? endIndex : undefined,
   );
 
-  const type = 'section';
-
-  const hProperties = node.data?.hProperties;
-  if (hProperties) {
-    node.data.hProperties = {};
-
-    const props = Object.keys(hProperties);
-
-    // {hidden} specifier
-    if (props.includes('hidden')) {
-      node.data.hProperties.style = 'display: none;';
-    }
-  }
+  const hProperties = checkProperties(node, depth);
 
   const isDuplicated = parent.type === 'section';
   if (isDuplicated) {
@@ -61,14 +84,7 @@ function sectionize(node: any, ancestors: Parent[]) {
     return;
   }
 
-  // output section levels like Pandoc
-  if (Array.isArray(hProperties.class)) {
-    // `remark-attr` may add classes, so make sure they come before them (always top)
-    hProperties.class.unshift(`level${depth}`);
-  } else {
-    hProperties.class = [`level${depth}`];
-  }
-
+  const type = 'section';
   const section = {
     type,
     data: {
@@ -80,7 +96,7 @@ function sectionize(node: any, ancestors: Parent[]) {
   } as any;
 
   parent.children.splice(startIndex, section.children.length, section);
-}
+};
 
 /**
  * Process Markdown AST.

tests/section.test.ts

@@ -10,11 +10,14 @@ it('plain section', () => {
 });
 */
 
-it('<h1>', () => {
-  const md = '# こんにちは {.test}';
-  const received = stringify(md, { partial: true, disableFormatHtml: true });
-  const expected =
-    '<section class="level1 test" id="こんにちは"><h1>こんにちは</h1></section>';
+it('Leveling and copy attributes, however the `id` will be moved', () => {
+  const md = '# こんにちは {#id1 .class1 key1=value1}';
+  const received = stringify(md, { partial: true });
+  const expected = `
+<section id="id1" class="level1 class1" key1="value1">
+  <h1 class="class1" key1="value1">こんにちは</h1>
+</section>
+`;
   expect(received).toBe(expected);
 });
 
@@ -67,17 +70,17 @@ it('<h1>, ... <h6> with attribute', () => {
   const received = stringify(md, { partial: true });
   const expected = `
 <section class="level1 depth1" id="heading-1">
-  <h1>Heading 1</h1>
+  <h1 class="depth1">Heading 1</h1>
   <section class="level2 depth2" id="heading-2">
-    <h2>Heading 2</h2>
+    <h2 class="depth2">Heading 2</h2>
     <section class="level3 depth3" id="heading-3">
-      <h3>Heading 3</h3>
+      <h3 class="depth3">Heading 3</h3>
       <section class="level4 depth4" id="heading-4">
-        <h4>Heading 4</h4>
+        <h4 class="depth4">Heading 4</h4>
         <section class="level5 depth5" id="heading-5">
-          <h5>Heading 5</h5>
+          <h5 class="depth5">Heading 5</h5>
           <section class="level6 depth6" id="heading-6">
-            <h6>Heading 6</h6>
+            <h6 class="depth6">Heading 6</h6>
           </section>
         </section>
       </section>
@@ -97,7 +100,7 @@ it('Complex structure', () => {
 <section id="heading-1" class="level1">
   <h1>Heading 1</h1>
   <section class="level2 foo" id="heading-2">
-    <h2>Heading 2</h2>
+    <h2 class="foo">Heading 2</h2>
   </section>
 </section>
 <section id="heading-1-1" class="level1">