feat: allow global tagName configuration

Microflash · Feb 6, 2024 · caed40f · caed40f
1 parent 5fb1d9e
commit caed40f
Show file tree

Hide file tree

Showing 5 changed files with 279 additions and 71 deletions.
diff --git a/README.md b/README.md
@@ -21,6 +21,8 @@
 	- [Example: custom callouts](#example-custom-callouts)
 	- [Example: configure aliases](#example-configure-aliases)
 	- [Example: configure element type](#example-configure-element-type)
+	- [Example: configure element type globally](#example-configure-element-type-globally)
+	- [Example: configure element type globally as well as specifically for a callout](#example-configure-element-type-globally-as-well-as-specifically-for-a-callout)
 	- [Example: override the defaults](#example-override-the-defaults)
 - [License](#license)
 
@@ -126,6 +128,7 @@ The following options are available. All of them are optional.
 
 - `aliases`: a list of aliases for the `callouts`
 - `callouts`: an object containing the callout definitions
+- `tagName`: global custom element type. If specified, it'll override the default `aside` element type. This can be overridden by callout specific configuration (`callouts.<calloutName>.tagName`).
 
 ### Default options
 
@@ -419,6 +422,147 @@ Running that with `node example.js` yields:
 </div>
 ```
 
+### Example: configure element type globally
+
+You can override the element type of all callouts by providing a `tagName`.
+
+Say we have the following file `example.md`:
+
+```md
+:::assert
+Some **content** with _Markdown_ `syntax`.
+:::
+```
+
+And our module `example.js` looks as follows:
+
+```js
+import { read } from "to-vfile"
+import { unified } from "unified"
+import remarkParse from "remark-parse"
+import remarkDirective from "remark-directive"
+import remarkCalloutDirectives from "@microflash/remark-callout-directives"
+import remarkRehype from "remark-rehype"
+import rehypeStringify from "rehype-stringify"
+
+main()
+
+async function main() {
+  const file = await unified()
+    .use(remarkParse)
+    .use(remarkDirective)
+    .use(remarkCalloutDirectives, {
+      tagName: "section"
+    })
+    .use(remarkRehype, { allowDangerousHtml: true })
+    .use(rehypeStringify, { allowDangerousHtml: true })
+    .process(await read("example.md"))
+
+  console.log(String(file))
+}
+```
+
+Running that with `node example.js` yields:
+
+```html
+<section class="callout callout-assert">
+  <div class="callout-indicator">
+    <div class="callout-hint">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-assert">
+        <path d="M12.5 7.5h.01m-.01 4v4m-7.926.685L2 21l6.136-1.949c1.307.606 2.791.949 4.364.949 5.243 0 9.5-3.809 9.5-8.5S17.743 3 12.5 3 3 6.809 3 11.5c0 1.731.579 3.341 1.574 4.685"/>
+      </svg>
+    </div>
+    <div class="callout-title">Info</div>
+  </div>
+  <div class="callout-content">
+    <p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</p>
+  </div>
+</section>
+```
+
+### Example: configure element type globally as well as specifically for a callout
+
+You can mix the `tagName` configurations globally and specifically for a callout.
+
+Say we have the following file `example.md`:
+
+```md
+:::assert
+Some **content** with _Markdown_ `syntax`.
+:::
+
+:::note
+Some **content** with _Markdown_ `syntax`.
+:::
+```
+
+And our module `example.js` looks as follows:
+
+```js
+import { read } from "to-vfile"
+import { unified } from "unified"
+import remarkParse from "remark-parse"
+import remarkDirective from "remark-directive"
+import remarkCalloutDirectives from "@microflash/remark-callout-directives"
+import remarkRehype from "remark-rehype"
+import rehypeStringify from "rehype-stringify"
+
+main()
+
+async function main() {
+  const file = await unified()
+    .use(remarkParse)
+    .use(remarkDirective)
+    .use(remarkCalloutDirectives, {
+			tagName: "section",
+      callouts: {
+        assert: {
+          tagName: "div"
+        }
+      }
+    })
+    .use(remarkRehype, { allowDangerousHtml: true })
+    .use(rehypeStringify, { allowDangerousHtml: true })
+    .process(await read("example.md"))
+
+  console.log(String(file))
+}
+```
+
+Running that with `node example.js` yields:
+
+```html
+<div class="callout callout-assert">
+  <div class="callout-indicator">
+    <div class="callout-hint">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-assert">
+        <path d="M12.5 7.5h.01m-.01 4v4m-7.926.685L2 21l6.136-1.949c1.307.606 2.791.949 4.364.949 5.243 0 9.5-3.809 9.5-8.5S17.743 3 12.5 3 3 6.809 3 11.5c0 1.731.579 3.341 1.574 4.685"/>
+      </svg>
+    </div>
+    <div class="callout-title">Info</div>
+  </div>
+  <div class="callout-content">
+    <p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.</p>
+  </div>
+</div>
+
+<section class="callout callout-note">
+  <div class="callout-indicator">
+    <div class="callout-hint">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-note">
+        <path d="M12 8h.01M12 12v4"/>
+        <circle cx="12" cy="12" r="10"/>
+      </svg>
+    </div>
+    <div class="callout-title">Note</div>
+  </div>
+  <div class="callout-content">
+    <p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>.
+    </p>
+  </div>
+</section>
+```
+
 ### Example: override the defaults
 
 You can override the defaults by passing your own preferences; they will be merged on top of the default values.

diff --git a/index.js b/index.js
@@ -104,9 +104,10 @@ export default function remarkCalloutDirectives(userOptions = {}) {
 
 				node.children = generate(title || callout.title, node.children, callout.hint);
 
-				const tagName = callout.tagName || "aside";
-				data.hName = tagName;
-				data.hProperties = h(tagName, node.attributes).properties;
+				const tagName = callout.tagName || options.tagName || "aside";
+				const hast = h(tagName, node.attributes);
+				data.hName = hast.tagName;
+				data.hProperties = hast.properties;
 			}
 		});
 	};

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@microflash/remark-callout-directives",
-	"version": "2.0.0",
+	"version": "3.0.0",
 	"description": "remark plugin to render callouts and admonitions with directives",
 	"license": "MIT",
 	"keywords": [
@@ -27,17 +27,17 @@
 		"test": "ava"
 	},
 	"dependencies": {
-		"defu": "^6.1.3",
-		"hastscript": "^8.0.0",
+		"defu": "^6.1.4",
+		"hastscript": "^9.0.0",
 		"mdast-util-from-markdown": "^2.0.0",
 		"unist-util-visit": "^5.0.0"
 	},
 	"devDependencies": {
-		"ava": "^6.0.0",
+		"ava": "^6.1.1",
 		"rehype-stringify": "^10.0.0",
 		"remark-directive": "^3.0.0",
 		"remark-parse": "^11.0.0",
-		"remark-rehype": "^11.0.0",
+		"remark-rehype": "^11.1.0",
 		"unified": "^11.0.4"
 	},
 	"ava": {