fix(attributes): treat non-bounded attribute like html attributes (#91)

Author: farnabaz

Diff for: README.md

@@ -210,6 +210,8 @@ Object
 ::
 ```
 
+> **Escape Character Behavior:** In MDC, the escape character (backslash `\`) can be used to escape special characters within attribute values. However, this behavior only applies to bound attributes. For example, in a bound attribute like `:list="[\"item 1\"]"`, the escape character will allow you to include quotes within the value. In contrast, for non-bound attributes such as `class="my-class"`, the escape character will not have any effect, and the value will be rendered as is. Therefore, it's important to use binding when you need to include special characters in attribute values.
+
 ### `---` Yaml Props
 
 The YAML method uses the `---` identifier to declare one prop per line, which can be useful for readability.

Diff for: src/micromark-extension/factory-attributes.ts

@@ -30,6 +30,7 @@ export default function createAttributes(
 ) {
   let type: keyof TokenTypeMap
   let marker: number | undefined
+  let isBindAttribute: boolean = false
 
   return start
 
@@ -57,6 +58,7 @@ export default function createAttributes(
       effects.enter(attributeType)
       effects.enter(attributeNameType)
       effects.consume(code)
+      isBindAttribute = code === Codes.colon
       return (code === Codes.colon ? bindAttributeName : name) as State
     }
 
@@ -296,7 +298,7 @@ export default function createAttributes(
   }
 
   function valueQuoted(code: number) {
-    if (code === Codes.backSlash) {
+    if (isBindAttribute && code === Codes.backSlash) {
       effects.exit(attributeValueData)
       effects.exit(attributeValueType)
       effects.enter('escapeCharacter')

Diff for: test/__snapshots__/attributes.test.ts.snap

@@ -613,7 +613,7 @@ exports[`Attributes > id-suger 1`] = `
 }
 `;
 
-exports[`Attributes > ignoreEscapeAttrInNormalAttribute 1`] = `
+exports[`Attributes > ignoreEscapeCharacterInNormalAttribute 1`] = `
 {
   "children": [
     {
@@ -631,9 +631,9 @@ exports[`Attributes > ignoreEscapeAttrInNormalAttribute 1`] = `
       "name": "copy",
       "position": {
         "end": {
-          "column": 29,
+          "column": 27,
           "line": 1,
-          "offset": 28,
+          "offset": 26,
         },
         "start": {
           "column": 1,
@@ -646,9 +646,59 @@ exports[`Attributes > ignoreEscapeAttrInNormalAttribute 1`] = `
   ],
   "position": {
     "end": {
-      "column": 29,
+      "column": 27,
+      "line": 1,
+      "offset": 26,
+    },
+    "start": {
+      "column": 1,
       "line": 1,
-      "offset": 28,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
+
+exports[`Attributes > ignoreEscapeCharacterInNormalAttributeYaml 1`] = `
+{
+  "children": [
+    {
+      "attributes": {},
+      "children": [],
+      "data": {
+        "hName": "copy",
+        "hProperties": {
+          "code": "D:\\Software\\",
+        },
+      },
+      "fmAttributes": {
+        "code": "D:\\Software\\",
+      },
+      "name": "copy",
+      "position": {
+        "end": {
+          "column": 3,
+          "line": 5,
+          "offset": 36,
+        },
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "rawData": "
+code: D:\\Software\\
+---",
+      "type": "containerComponent",
+    },
+  ],
+  "position": {
+    "end": {
+      "column": 3,
+      "line": 5,
+      "offset": 36,
     },
     "start": {
       "column": 1,

Diff for: test/attributes.test.ts

@@ -61,14 +61,6 @@ describe('Attributes', () => {
     'emphasis': {
       markdown: '_emphasis_{#id .class}',
     },
-    'ignoreEscapeAttrInNormalAttribute': {
-      markdown: ':copy{code="D:\\\\Software\\\\"}',
-      expected: ':copy{code="D:\\Software\\"}',
-      extra: (_md, ast) => {
-        expect(ast.children[0].type).toBe('textComponent')
-        expect(ast.children[0].attributes.code).toBe('D:\\Software\\')
-      },
-    },
     'nested-in-table': {
       markdown: [
         '| Col1 |      Col2      |',
@@ -81,5 +73,21 @@ describe('Attributes', () => {
         '| aa   | [a](/a){a="a"} |',
       ].join('\n'),
     },
+    'ignoreEscapeCharacterInNormalAttribute': {
+      markdown: ':copy{code="D:\\Software\\"}',
+      expected: ':copy{code="D:\\Software\\"}',
+      extra: (_md, ast) => {
+        expect(ast.children[0].type).toBe('textComponent')
+        expect(ast.children[0].attributes.code).toBe('D:\\Software\\')
+      },
+    },
+    'ignoreEscapeCharacterInNormalAttributeYaml': {
+      markdown: '::copy\n---\ncode: D:\\Software\\\n---\n::',
+      expected: '::copy\n---\ncode: D:\\Software\\\n---\n::',
+      extra: (_md, ast) => {
+        expect(ast.children[0].type).toBe('containerComponent')
+        expect(ast.children[0].fmAttributes.code).toBe('D:\\Software\\')
+      },
+    },
   })
 })

Diff for: test/utils/index.ts

@@ -26,6 +26,11 @@ export function runMarkdownTests(tests: Record<string, MarkdownTest>) {
       if (extra) {
         extra(markdown, ast, expected || markdown)
       }
+
+      // We should be able regenerate same markdown starting from the `regeneratedMarkdown`
+      const ast2 = await markdownToAST(regeneratedMarkdown, plugins, mdcOptions)
+      const regeneratedMarkdown2 = await astToMarkdown(ast2, plugins, mdcOptions)
+      expect(regeneratedMarkdown2).toEqual(regeneratedMarkdown)
     })
   }
 }