mixmark-io · guyplusplus · Apr 15, 2021 · Apr 15, 2021 · Apr 18, 2021 · Apr 21, 2021
diff --git a/README.md b/README.md
@@ -2,31 +2,53 @@
 
 A [Turndown](https://github.com/domchristie/turndown) plugin which adds GitHub Flavored Markdown extensions.
 
+## Test Page
+
+The test page can be found [here](https://guyplusplus.github.io/turndown-plugin-gfm/).
+
+## Fork information
+
+This is a fork of the original [turndown-plugin-gfm](https://github.com/domchristie/turndown-plugin-gfm) for general purpose. It is pending on this [pull request](https://github.com/domchristie/turndown-plugin-gfm/pull/31).
+
+The changes are:
+- migrated to node v5
+- upgraded inclusion of turndown npm package to 7.0.0
+- support tables with `caption` and `colgroup` elements
+- support conversion of a multi-lines cell to a single line cell
+- pipe character `|` are properly escaped in a table cell
+- fix support for tables with no row
+- support for `colspan`
+- nested table inside a table render as is, gfm is not applied
+- added more test cases accordingly
+
+TODO:
+- [ ] rowspan support
+- [ ] support for relaxed and strict gfm (not html) rendering. So new lines, nested tables would render differently
+
 ## Installation
 
 npm:
 
 ```
-npm install turndown-plugin-gfm
+npm install @guyplusplus/turndown-plugin-gfm
 ```
 
 Browser:
 
 ```html
 <script src="https://unpkg.com/turndown/dist/turndown.js"></script>
-<script src="https://unpkg.com/turndown-plugin-gfm/dist/turndown-plugin-gfm.js"></script>
+<script src="https://unpkg.com/@guyplusplus/turndown-plugin-gfm/dist/turndown-plugin-gfm.js"></script>
 ```
 
 ## Usage
 
 ```js
 // For Node.js
 var TurndownService = require('turndown')
-var turndownPluginGfm = require('turndown-plugin-gfm')
+var TurndownPluginGfm = require('@guyplusplus/turndown-plugin-gfm')
 
-var gfm = turndownPluginGfm.gfm
 var turndownService = new TurndownService()
-turndownService.use(gfm)
+TurndownPluginGfm.gfm(turndownService)
 var markdown = turndownService.turndown('<strike>Hello world!</strike>')
 ```
 

diff --git a/config/rollup.config.iife.js b/config/rollup.config.iife.js
@@ -3,6 +3,7 @@ import config from './rollup.config'
 export default config({
   output: {
     format: 'iife',
-    file: 'dist/turndown-plugin-gfm.js'
+    file: 'dist/turndown-plugin-gfm.js',
+    name: 'TurndownPluginGfmService'
   }
 })
diff --git a/config/rollup.config.js b/config/rollup.config.js
@@ -1,6 +1,5 @@
 export default function (config) {
   return {
-    name: 'turndownPluginGfm',
     input: 'src/gfm.js',
     output: config.output
   }

diff --git a/index.html b/index.html
@@ -0,0 +1,266 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Turndown Plugin GFM Demo</title>
+<meta name="viewport" content="width=device-width">
+<style>
+  * {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+
+  body {
+    margin: 0 auto;
+    font-family: courier, monospace, sans-serif;
+    line-height: 1.3125;
+    color: #333;
+  }
+
+  header {
+    padding: 0.5em;
+    background-color: #fff;
+    text-align: center;
+  }
+
+  footer {
+    font-size: 0.875em;
+    text-align: center;
+    color: #666;
+  }
+
+  h1,
+  label[for="input"],
+  label[for="output"] {
+    margin: 0;
+    font-size: 1em;
+    font-weight: 700;
+    letter-spacing: 0.0625em;
+    text-transform: uppercase;
+  }
+
+  label[for="input"],
+  label[for="output"] {
+    font-weight: 400;
+  }
+
+  .source-link {
+    font-size: 0.875em;
+  }
+
+  .row:before,
+  .row:after {
+    content: " ";
+    display: table;
+  }
+
+  .row:after {
+    clear: both;
+  }
+
+  .row {
+    *zoom: 1;
+  }
+
+  .col,
+  .form-group {
+    padding: 0 0.5em;
+  }
+
+  @media (min-width: 36em) {
+    .col {
+      float: left;
+      width: 50%;
+    }
+  }
+
+  textarea {
+    width: 100%;
+    height: 36em;
+    margin: 0;
+    padding: 0.5em;
+    overflow: auto;
+    border: 1px solid;
+    background-color: #fff;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    color: inherit;
+  }
+
+  #input {
+    background-color: #333;
+    color: #fff;
+    border: none;
+  }
+
+  select {
+    display: block;
+    width: 100%;
+    font-size: inherit;
+  }
+
+  .form-group {
+    display: inline-block;
+  }
+
+  .form-group label {
+    font-size: 0.875em;
+  }
+</style>
+<script src="https://unpkg.com/turndown/dist/turndown.js"></script>
+<script src="https://unpkg.com/@guyplusplus/turndown-plugin-gfm/dist/turndown-plugin-gfm.js"></script>
+</head>
+<body>
+<header>
+  <h1>Turndown Plugin GFM Demo</h1>
+  <a class="source-link" href="https://github.com/guyplusplus/turndown-plugin-gfm">Source on GitHub</a>
+</header>
+<div class="row">
+  <div class="col">
+    <label for="input">HTML</label>
+    <textarea cols="100" rows=10 id="input"><h1>Turndown Plugin GFM Demo</h1>
+
+<p>This demonstrates <a href="https://github.com/domchristie/turndown">turndown</a> – an HTML to Markdown converter in JavaScript with additional support for GFM via the <a href="https://github.com/guyplusplus/turndown-plugin-gfm">turndown-plugin-gfm</a> plugin.</p>
+
+<h2>Usage</h2>
+
+<pre><code class="language-js">var turndownService = new TurndownService()
+TurndownPluginGfmService.gfm(turndownService)
+console.log(
+  turndownService.turndown('&amp;lt;strike&amp;gt;Hello world&amp;lt;/strike&amp;gt;')
+)</code></pre>
+
+<hr />
+
+<p>It aims to be <a href="http://commonmark.org/">CommonMark</a>
+ compliant, and includes additional options to style the output. These options include:</p>
+
+<ul>
+  <li>strikethrough (~)</li>
+  <li>tables (|, |---|)</li>
+  <li>task list (- [ ] or - [x])</li>
+</ul></textarea>
+  </div>
+  <div class="col">
+    <label for="output">GFM (GitHub Flavored Markdown)</label>
+    <textarea readonly cols="100" rows=10 id="output"></textarea>
+  </div>
+</div>
+
+<div class="row">
+  <form method="get" action="/turndown" id="options">
+    <div class="form-group">
+      <label for="headingStyle">Heading style</label>
+      <select name="headingStyle" id="headingStyle">
+        <option value="setext">setext</option>
+        <option value="atx">atx</option>
+      </select>
+    </div>
+
+    <div class="form-group">
+      <label for="hr">Horizontal rule</label>
+      <select name="hr" id="hr">
+        <option value="* * *">* * *</option>
+        <option value="- - -">- - -</option>
+        <option value="_ _ _">_ _ _</option>
+      </select>
+    </div>
+
+    <div class="form-group">
+      <label for="bulletListMarker">Bullet</label>
+      <select name="bulletListMarker" id="bulletListMarker">
+        <option value="*">*</option>
+        <option value="-">-</option>
+        <option value="+">+</option>
+      </select>
+    </div>
+
+    <div class="form-group">
+      <label for="codeBlockStyle">Code block style</label>
+      <select name="codeBlockStyle" id="codeBlockStyle">
+        <option value="indented">indented</option>
+        <option value="fenced">fenced</option>
+      </select>
+    </div>
+
+    <div class="form-group">
+      <label for="fence">Fence</label>
+      <select name="fence" id="fence">
+        <option value="```">```</option>
+        <option value="~~~">~~~</option>
+      </select>
+    </div>
+
+    <div class="form-group">
+      <label for="emDelimiter">Em delimiter</label>
+      <select name="emDelimiter" id="emDelimiter">
+        <option value="_">_</option>
+        <option value="*">*</option>
+      </select>
+    </div>
+
+    <div class="form-group">
+      <label for="strongDelimiter">Strong delimiter</label>
+      <select name="strongDelimiter" id="strongDelimiter">
+        <option value="**">**</option>
+        <option value="__">__</option>
+      </select>
+    </div>
+
+    <div class="form-group">
+      <label for="linkStyle">Link style</label>
+      <select name="linkStyle" id="linkStyle">
+        <option value="inlined">inlined</option>
+        <option value="referenced">referenced</option>
+      </select>
+    </div>
+
+    <div class="form-group">
+      <label for="linkReferenceStyle">Link reference style</label>
+      <select name="linkReferenceStyle" id="linkReferenceStyle">
+        <option value="full">full</option>
+        <option value="collapsed">collapsed</option>
+        <option value="shortcut">shortcut</option>
+      </select>
+    </div>
+  </form>
+</div>
+
+<footer><p>Turndown is copyright © 2017 <a href="http://www.domchristie.co.uk/">Dom Christie</a> and is released under the MIT license</p></footer>
+<script>
+  ;(function () {
+    var input = document.getElementById('input')
+    var output = document.getElementById('output')
+    var optionsForm = document.getElementById('options')
+    var turndownService = new window.TurndownService(options())
+    TurndownPluginGfmService.gfm(turndownService)
+
+    input.addEventListener('input', update)
+
+    optionsForm.addEventListener('change', function () {
+      turndownService = new window.TurndownService(options())
+      TurndownPluginGfmService.gfm(turndownService)
+      update()
+    })
+
+    update()
+
+    function update () {
+      output.value = turndownService.turndown(input.value)
+    }
+
+    function options () {
+      var opts = {}
+      var inputs = optionsForm.getElementsByTagName('select')
+      for (var i = 0; i < inputs.length; i++) {
+        var input = inputs[i]
+        opts[input.name] = input.value
+      }
+      return opts
+    }
+  })()
+</script>
+</body>
+</html>