0.0.6

- Can now apply block level attributes to tables

Author: valentine195

README.md

@@ -43,14 +43,25 @@ Attributes must be added to headers at the end of the line.
 
 ### Tables
 
-Currently, there is not a way to add attributes to an entire table or table row. However, attributes can be added to individual table cells like so:
+Attributes can be added to the `<table>` element by placing the attribute on the line below it.
+
+```markdown
+| header1 | header2 |
+| ------- | ------- |
+| column1 | column2 |
+{: .table-class}
+```
+
+Attributes can be added to individual table cells like so:
 
 ```markdown
 | header1 {: .class} | header2                |
 | ------------------ | ---------------------- |
 | column1            | column2 {: .class-two} |
 ```
 
+It is not currently possible to add attributes to `<tr>` or `<thead>` elements.
+
 ### Links
 
 Both Wikilinks and markdown syntax links may have attributes placed on them.

manifest.json

@@ -1,7 +1,7 @@
 {
     "id": "markdown-attributes",
     "name": "Markdown Attributes",
-    "version": "0.0.5",
+    "version": "0.0.6",
     "minAppVersion": "0.12.10",
     "description": "Add markdown attributes to elements in Obsidian.md",
     "author": "Jeremy Valentine",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "markdown-attributes",
-    "version": "0.0.5",
+    "version": "0.0.6",
     "description": "Add markdown attributes to elements in Obsidian.md",
     "main": "main.js",
     "scripts": {

src/main.ts

@@ -43,6 +43,47 @@ export default class MarkdownAttributes extends Plugin {
             child.prepend(new Text(attribute_string));
         }
 
+        /**
+         * Table elements should check the next line in the source to see if it is a single block attribute,
+         * because those block attributes are not applied to the table.
+         */
+        if (child instanceof HTMLTableElement) {
+            if (!ctx.getSectionInfo(topElement)) return;
+
+            /** Pull the Section data. */
+            const { text, lineEnd } = ctx.getSectionInfo(topElement);
+
+            /** Get the source for this element. */
+            let source = (
+                text.split("\n").slice(lineEnd + 1, lineEnd + 2) ?? []
+            ).shift();
+
+            /** Test if the element contains attributes. */
+            if (
+                !source ||
+                !source.length ||
+                !Processor.ONLY_RE.test(source.trim())
+            )
+                return;
+
+            /** Pull the matched string and add it to the child so the Processor catches it. */
+            let [attribute_string] = source.match(Processor.ONLY_RE) ?? [];
+            child.prepend(new Text(attribute_string));
+
+            str = topElement.innerText;
+        }
+
+        /**
+         * If the element is a <p> and the text is *only* an attribute, it was used as a block attribute
+         * and should be removed.
+         */
+        if (child instanceof HTMLParagraphElement) {
+            if (Processor.ONLY_RE.test(child.innerText.trim())) {
+                child.detach();
+                return;
+            }
+        }
+
         /** Test if the element contains attributes. */
         if (!Processor.BASE_RE.test(str)) return;
 

src/processor.ts

@@ -6,6 +6,7 @@ interface ElementWithAttributes {
 
 export default class Processor {
     static BASE_RE = /\{\:[ ]*([^\}\n ][^\}\n]*)[ ]*\}/;
+    static ONLY_RE = /^\{\:[ ]*([^\}\n ][^\}\n]*)[ ]*\}$/;
     static BLOCK_RE = /\n[ ]*\{\:?[ ]*([^\}\n ][^\}\n]*)[ ]*\}[ ]*$/;
 
     constructor(private topLevelElement: HTMLElement) {}
@@ -103,7 +104,6 @@ export default class Processor {
 
         // Text content of this node and *not* the children.
         const text = this.getTopLevelText(el);
-        console.log("🚀 ~ file: processor.ts ~ line 102 ~ el", text);
 
         if (Processor.BLOCK_RE.test(text)) {
             // Attributes should apply to the whole block.
@@ -129,7 +129,6 @@ export default class Processor {
             }
         } else if (Processor.BASE_RE.test(text)) {
             // Attributes are inline.
-            console.log(Processor.BASE_RE.test(text));
             // Get the text nodes that contains the attribute string.
             let textNode = Array.from(el.childNodes).find(
                 (node) =>
@@ -147,10 +146,6 @@ export default class Processor {
 
             // Collapsible elements are a special case due to the collapse handle.
             if (sibling && sibling.hasClass("collapse-indicator")) {
-                console.log(
-                    "🚀 ~ file: processor.ts ~ line 150 ~ Processor.BASE_RE.test(text)",
-                    Processor.BASE_RE.test(text)
-                );
                 sibling = sibling.parentElement;
             }
 

versions.json

@@ -1,3 +1,3 @@
 {
-    "0.0.5": "0.12.0"
+    "0.0.6": "0.12.0"
 }