Browse Source

add basic table support

Pascal Deschenes 12 years ago
parent
commit
aa76deec74

+ 92 - 0
src/extensions/table.js

@@ -0,0 +1,92 @@
+/*global module:true*/
+(function(){
+  var table = function(converter) {
+    var tables = {}, style = 'text-align:left;', filter; 
+    tables.th = function(header){
+      if (header.trim() === "") { return "";}
+      var id = header.trim().replace(/ /g, '_').toLowerCase();
+      return '<th id="' + id + '" style="'+style+'">' + header + '</th>';
+    };
+    tables.td = function(cell) {
+      return '<td style="'+style+'">' + cell + '</td>';
+    };
+    tables.ths = function(){
+      var out = "", i = 0, hs = [].slice.apply(arguments);
+      for (i;i<hs.length;i+=1) {
+        out += tables.th(hs[i]) + '\n';
+      }
+      return out;
+    };
+    tables.tds = function(){
+      var out = "", i = 0, ds = [].slice.apply(arguments);
+      for (i;i<ds.length;i+=1) {
+        out += tables.td(ds[i]) + '\n';
+      }
+      return out;
+    };
+    tables.thead = function() {
+      var out, i = 0, hs = [].slice.apply(arguments);
+      out = "<thead>\n";
+      out += "<tr>\n";
+      out += tables.ths.apply(this, hs);
+      out += "</tr>\n";
+      out += "</thead>\n";
+      return out;
+    };
+    tables.tr = function() {
+      var out, i = 0, cs = [].slice.apply(arguments);
+      out = "<tr>\n";
+      out += tables.tds.apply(this, cs);
+      out += "</tr>\n";
+      return out;
+    };
+    filter = function(text) { 
+      var i=0, lines = text.split('\n'), tbl = [], line, hs, rows, out = [];
+      for (i; i<lines.length;i+=1) {
+        line = lines[i];
+        // looks like a table heading
+        if (line.trim().match(/^[|]{1}.*[|]{1}$/)) {
+          line = line.trim();
+          tbl.push('<table>');
+          hs = line.substring(1, line.length -1).split('|');
+          tbl.push(tables.thead.apply(this, hs));
+          line = lines[++i];
+          if (!line.trim().match(/^[|]{1}[-=| ]+[|]{1}$/)) {
+            // not a table rolling back
+            line = lines[--i];
+          }
+          else {
+            line = lines[++i];
+            tbl.push('<tbody>');
+            while (line.trim().match(/^[|]{1}.*[|]{1}$/)) {
+              line = line.trim();
+              tbl.push(tables.tr.apply(this, line.substring(1, line.length -1).split('|')));
+              line = lines[++i];
+            }
+            tbl.push('</tbody>');
+            tbl.push('</table>');
+            // we are done with this table and we move along
+            out.push(tbl.join('\n'));
+            ++i;
+            continue;
+          }
+        }
+        out.push(line);
+      }             
+      return out.join('\n');
+    };
+    return [
+    { 
+      type: 'lang', 
+      filter: filter
+    }
+    ];
+  };
+
+  // Client-side export
+  if (typeof window !== 'undefined' && window.Showdown && window.Showdown.extensions) { window.Showdown.extensions.table = table; }
+  // Server-side export
+  if (typeof module !== 'undefined') {
+    module.exports = table;
+  }
+}());

+ 21 - 0
test/extensions/table/basic.html

@@ -0,0 +1,21 @@
+<table>
+<thead>
+<tr>
+<th id="first_header" style="text-align:left;"> First Header  </th>
+<th id="second_header" style="text-align:left;"> Second Header </th>
+</tr>
+</thead>
+
+<tbody>
+<tr>
+<td style="text-align:left;"> Row 1 Cell 1  </td>
+<td style="text-align:left;"> Row 1 Cell 2  </td>
+</tr>
+
+<tr>
+<td style="text-align:left;"> Row 2 Cell 1  </td>
+<td style="text-align:left;"> Row 2 Cell 2  </td>
+</tr>
+
+</tbody>
+</table>

+ 4 - 0
test/extensions/table/basic.md

@@ -0,0 +1,4 @@
+| First Header  | Second Header |
+| ------------- | ------------- |
+| Row 1 Cell 1  | Row 1 Cell 2  |
+| Row 2 Cell 1  | Row 2 Cell 2  |

+ 32 - 0
test/extensions/table/with-surroundings.html

@@ -0,0 +1,32 @@
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisi est, 
+ullamcorper euismod iaculis sed, tristique at neque. Nullam metus risus, 
+malesuada vitae imperdiet ac, tincidunt eget lacus. Proin ullamcorper 
+vulputate dictum. Vestibulum consequat ultricies nibh, sed tempus nisl mattis a.</p> 
+
+<table>
+<thead>
+<tr>
+<th id="first_header" style="text-align:left;"> First Header  </th>
+<th id="second_header" style="text-align:left;"> Second Header </th>
+</tr>
+</thead>
+
+<tbody>
+<tr>
+<td style="text-align:left;"> Row 1 Cell 1  </td>
+<td style="text-align:left;"> Row 1 Cell 2  </td>
+</tr>
+
+<tr>
+<td style="text-align:left;"> Row 2 Cell 1  </td>
+<td style="text-align:left;"> Row 2 Cell 2  </td>
+</tr>
+
+</tbody>
+</table>
+
+<p>Etiam iaculis urna vitae risus facilisis faucibus eu quis risus. Sed aliquet 
+rutrum dictum. Vivamus pulvinar malesuada ultricies. Pellentesque in commodo 
+nibh. Maecenas justo erat, sodales vel bibendum a, dignissim in orci. Duis 
+blandit ornare mi non facilisis. Aliquam rutrum fringilla lacus in semper. 
+Sed vel pretium lorem.</p>

+ 16 - 0
test/extensions/table/with-surroundings.md

@@ -0,0 +1,16 @@
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisi est, 
+ullamcorper euismod iaculis sed, tristique at neque. Nullam metus risus, 
+malesuada vitae imperdiet ac, tincidunt eget lacus. Proin ullamcorper 
+vulputate dictum. Vestibulum consequat ultricies nibh, sed tempus nisl mattis a.
+
+| First Header  | Second Header |
+| ------------- | ------------- |
+| Row 1 Cell 1  | Row 1 Cell 2  |
+| Row 2 Cell 1  | Row 2 Cell 2  |
+
+Phasellus ac porttitor quam. Integer cursus accumsan mauris nec interdum. 
+Etiam iaculis urna vitae risus facilisis faucibus eu quis risus. Sed aliquet 
+rutrum dictum. Vivamus pulvinar malesuada ultricies. Pellentesque in commodo 
+nibh. Maecenas justo erat, sodales vel bibendum a, dignissim in orci. Duis 
+blandit ornare mi non facilisis. Aliquam rutrum fringilla lacus in semper. 
+Sed vel pretium lorem.

+ 11 - 0
test/extensions/table/without-body.html

@@ -0,0 +1,11 @@
+<table>
+<thead>
+<tr>
+<th id="first_header" style="text-align:left;"> First Header  </th>
+<th id="second_header" style="text-align:left;"> Second Header </th>
+</tr>
+</thead>
+
+<tbody>
+</tbody>
+</table>

+ 2 - 0
test/extensions/table/without-body.md

@@ -0,0 +1,2 @@
+| First Header  | Second Header |
+| ------------- | ------------- |

+ 1 - 0
test/extensions/table/without-header-delimiter.html

@@ -0,0 +1 @@
+<p>| First Header  | Second Header |</p>

+ 1 - 0
test/extensions/table/without-header-delimiter.md

@@ -0,0 +1 @@
+| First Header  | Second Header |