Use colSpan and rowSpan (#399)

* Use colSpan and rowSpan

Closes #302

* add marktest test too

spec/marktest/tests.yaml

@@ -717,7 +717,7 @@
     * Test 1 - 3
     ---
     * Test 2 - 1
-    * Test 2 - 2
+    * Test 2 - 2 {% colspan=2 %}
     * Test 2 - 3
     ---
     * Test 3 - 1
@@ -746,7 +746,9 @@
                 - tag: td
                   children: [Test 2 - 1]
                 - tag: td
-                  children: [Test 2 - 2]
+                  children: ['Test 2 - 2 ']
+                  attributes:
+                    colSpan: 2
                 - tag: td
                   children: [Test 2 - 3]
             - tag: tr

src/renderers/html.test.ts

@@ -54,6 +54,13 @@ describe('HTML renderer', function () {
     expect(html).toEqual('<p>1</p>');
   });
 
+  it('lowercase attributes', function () {
+    const content = tag('td', { colSpan: 2, rowSpan: 3 }, ['Data']);
+
+    const html = render(content);
+    expect(html).toEqual('<td colspan="2" rowspan="3">Data</td>');
+  });
+
   describe('attributes', function () {
     it('with basic value', function () {
       const example = tag('foo', { bar: 'baz' });

src/renderers/html.ts

@@ -36,7 +36,7 @@ export default function render(node: RenderableTreeNodes): string {
 
   let output = `<${name}`;
   for (const [k, v] of Object.entries(attributes ?? {}))
-    output += ` ${k}="${escapeHtml(String(v))}"`;
+    output += ` ${k.toLowerCase()}="${escapeHtml(String(v))}"`;
   output += '>';
 
   if (voidElements.has(name)) return output;

src/schema.ts

@@ -136,8 +136,8 @@ export const td: Schema = {
     'hr',
   ],
   attributes: {
-    colspan: { type: Number },
-    rowspan: { type: Number },
+    colspan: { type: Number, render: 'colSpan' },
+    rowspan: { type: Number, render: 'rowSpan' },
     align: { type: String },
   },
 };