use proper markdown ast structure

updated the code to use markdown ast instead of html templates. also, the main wrapper is now a blockquote.

Signed-off-by: rishichawda <[email protected]>

Author: rishichawda

index.ts

@@ -1,9 +1,9 @@
 import { visit } from 'unist-util-visit'
 import type { Node, Parent } from 'unist'
 import type { Blockquote, Paragraph, Text } from 'mdast'
-import type { NoteNode } from './lib/types/index.js'
 import { NOTE_TYPES } from './lib/types/index.js'
 import { styles } from './lib/styles.js'
+import { createNoteStructure } from './lib/node-structure.js'
 
 export default function remarkNotes() {
   let hasInjectedStyles = false
@@ -62,48 +62,14 @@ export default function remarkNotes() {
       }
 
       // Get the icon for this note type
-      const noteConfig = NOTE_TYPES[noteType]
-      const icon = noteConfig.icon
+      const noteConfig = NOTE_TYPES[noteType];
+      const iconSvg = noteConfig.icon;
 
-      // Create header with icon and title
-      const headerNode = {
-        type: 'html',
-        value: `<div class="remark-note-header"><span class="remark-note-icon">${icon}</span><span class="remark-note-title">${noteType}</span></div>`
-      }
-      
-      const contentWrapperStart = {
-        type: 'html',
-        value: '<div class="remark-note-content">'
-      }
-      
-      const contentWrapperEnd = {
-        type: 'html',
-        value: '</div>'
-      }
-      
-      // Wrap content with header and content wrapper
-      const wrappedChildren = [
-        headerNode,
-        contentWrapperStart,
-        ...children,
-        contentWrapperEnd
-      ]
-      
-      // Create the custom NoteNode
-      const noteNode = {
-        type: 'note',
-        noteType: noteType,
-        data: {
-          hName: 'div',
-          hProperties: {
-            className: ['remark-note', noteType]
-          }
-        },
-        children: wrappedChildren
-      } as NoteNode
+      // Create the note structure using proper mdast nodes
+      const noteContainer = createNoteStructure(noteType, iconSvg, children);
 
-      // Replace the blockquote with the note node in the parent
-      (parent as Parent).children[index] = noteNode as any
+      // Replace the blockquote with the container
+      (parent as Parent).children[index] = noteContainer;
     })
   }
 }

lib/node-structure.ts

@@ -0,0 +1,103 @@
+/**
+ * Creates the mdast node structure for a note callout
+ * 
+ * This module handles the creation of proper mdast nodes with transformation hints
+ * that tell remark-rehype how to convert them to the appropriate HTML structure.
+ * 
+ * @module lib/create-note-structure
+ */
+
+import type { Node } from 'unist'
+
+/**
+ * Creates a properly structured mdast node for a note callout
+ * 
+ * The structure uses standard mdast node types (paragraph, text) with data hints
+ * (hName, hProperties) to tell remark-rehype how to transform them into the
+ * desired HTML structure without requiring manual handlers.
+ * 
+ * Only the SVG icon uses raw HTML - everything else is proper mdast nodes.
+ * 
+ * @param noteType - The type of note (note, tip, important, etc.)
+ * @param iconSvg - The SVG icon as an HTML string
+ * @param children - The content nodes (markdown) to include in the note
+ * @returns A mdast node that will be transformed to the note HTML structure
+ */
+export function createNoteStructure(
+  noteType: string,
+  iconSvg: string,
+  children: Node[]
+): any {
+  // Create icon span (SVG needs to be raw HTML)
+  const iconNode: any = {
+    type: 'paragraph',
+    data: {
+      hName: 'span',
+      hProperties: {
+        className: ['remark-note-icon']
+      }
+    },
+    children: [
+      {
+        type: 'html',
+        value: iconSvg
+      }
+    ]
+  }
+  
+  // Create title span
+  const titleNode: any = {
+    type: 'paragraph',
+    data: {
+      hName: 'span',
+      hProperties: {
+        className: ['remark-note-title']
+      }
+    },
+    children: [
+      {
+        type: 'text',
+        value: noteType
+      }
+    ]
+  }
+  
+  // Create header div
+  const headerNode: any = {
+    type: 'paragraph',
+    data: {
+      hName: 'div',
+      hProperties: {
+        className: ['remark-note-header']
+      }
+    },
+    children: [iconNode, titleNode]
+  }
+  
+  // Create content wrapper div
+  const contentNode: any = {
+    type: 'paragraph',
+    data: {
+      hName: 'div',
+      hProperties: {
+        className: ['remark-note-content']
+      }
+    },
+    children: children
+  }
+  
+  // Build the structure: wrap everything in a blockquote container with data hints
+  // Using blockquote for semantic HTML since the source is a blockquote
+  const noteContainer: any = {
+    type: 'paragraph', // Use a standard mdast type
+    data: {
+      hName: 'blockquote',  // Transform to blockquote for semantic HTML
+      hProperties: {
+        className: ['remark-note', noteType]
+      }
+    },
+    children: [headerNode, contentNode]
+  }
+  
+  return noteContainer
+}

lib/types/index.ts

@@ -2,16 +2,11 @@
  * Type definitions for remark-notes-plugin
  * 
  * This module exports all TypeScript types and interfaces used by the plugin.
- * It provides type definitions for custom AST nodes, note configurations,
- * and type guard utilities.
+ * It provides type definitions for note configurations.
  * 
  * @module lib/types
  */
 
-// Note node type definitions
-export type { NoteNode } from './node.js'
-export { isNoteNode } from './node.js'
-
 // Note configuration type definitions
 export type { NoteType, NoteTypes } from './noteTypes.js'
 export { NOTE_TYPES } from './noteTypes.js'

lib/types/node.ts

@@ -60,6 +60,7 @@
     "postcss": "^8.5.3",
     "postcss-cli": "^11.0.1",
     "rehype-parse": "^9.0.1",
+    "rehype-raw": "^7.0.0",
     "rehype-stringify": "^10.0.1",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",

package.json

@@ -1,7 +1,13 @@
 /* Base note container */
 .remark-note {
+  /* Reset blockquote defaults */
   margin: 1.5rem 0;
   padding: 1.25rem;
+  quotes: none;
+  font-weight: normal;
+  font-style: normal;
+  
+  /* Custom note styles */
   border-radius: 0.5rem;
   border: 1px solid;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

styles.css

@@ -542,6 +542,25 @@ hast-util-parse-selector@^4.0.0:
   dependencies:
     "@types/hast" "^3.0.0"
 
+hast-util-raw@^9.0.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/hast-util-raw/-/hast-util-raw-9.1.0.tgz#79b66b26f6f68fb50dfb4716b2cdca90d92adf2e"
+  integrity sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw==
+  dependencies:
+    "@types/hast" "^3.0.0"
+    "@types/unist" "^3.0.0"
+    "@ungap/structured-clone" "^1.0.0"
+    hast-util-from-parse5 "^8.0.0"
+    hast-util-to-parse5 "^8.0.0"
+    html-void-elements "^3.0.0"
+    mdast-util-to-hast "^13.0.0"
+    parse5 "^7.0.0"
+    unist-util-position "^5.0.0"
+    unist-util-visit "^5.0.0"
+    vfile "^6.0.0"
+    web-namespaces "^2.0.0"
+    zwitch "^2.0.0"
+
 hast-util-to-html@^9.0.0, hast-util-to-html@^9.0.5:
   version "9.0.5"
   resolved "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.5.tgz"
@@ -559,6 +578,19 @@ hast-util-to-html@^9.0.0, hast-util-to-html@^9.0.5:
     stringify-entities "^4.0.0"
     zwitch "^2.0.4"
 
+hast-util-to-parse5@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/hast-util-to-parse5/-/hast-util-to-parse5-8.0.0.tgz#477cd42d278d4f036bc2ea58586130f6f39ee6ed"
+  integrity sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==
+  dependencies:
+    "@types/hast" "^3.0.0"
+    comma-separated-tokens "^2.0.0"
+    devlop "^1.0.0"
+    property-information "^6.0.0"
+    space-separated-tokens "^2.0.0"
+    web-namespaces "^2.0.0"
+    zwitch "^2.0.0"
+
 hast-util-whitespace@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz"
@@ -1248,6 +1280,11 @@ pretty-hrtime@^1.0.3:
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
   integrity sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==
 
+property-information@^6.0.0:
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/property-information/-/property-information-6.5.0.tgz#6212fbb52ba757e92ef4fb9d657563b933b7ffec"
+  integrity sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==
+
 property-information@^7.0.0:
   version "7.0.0"
   resolved "https://registry.npmjs.org/property-information/-/property-information-7.0.0.tgz"
@@ -1276,6 +1313,15 @@ rehype-parse@^9.0.1:
     hast-util-from-html "^2.0.0"
     unified "^11.0.0"
 
+rehype-raw@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/rehype-raw/-/rehype-raw-7.0.0.tgz#59d7348fd5dbef3807bbaa1d443efd2dd85ecee4"
+  integrity sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==
+  dependencies:
+    "@types/hast" "^3.0.0"
+    hast-util-raw "^9.0.0"
+    vfile "^6.0.0"
+
 rehype-stringify@^10.0.1:
   version "10.0.1"
   resolved "https://registry.yarnpkg.com/rehype-stringify/-/rehype-stringify-10.0.1.tgz#2ec1ebc56c6aba07905d3b4470bdf0f684f30b75"