Codepen for Checklist

_data/nav.yml

@@ -30,7 +30,8 @@
   - url: "whats-new"
   - url: "basic-example"
   - url: "full-featured"  
-  - url: "comments-2" 
+  - url: "comments-2"
+  - url: "checklist"
   - url: "pageembed"
   - url: "permanentpen"
   - url: "formatpainter"

_includes/codepens/checklist/index.html

@@ -0,0 +1,59 @@
+<textarea id="checklist">
+  <p style="text-align: center;">
+    <img title="TinyMCE Logo" src="//www.tiny.cloud/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" />
+  </p>
+
+  <h1 style="text-align: center;">Welcome to Checklist!</h1>
+
+  <p>
+    Please try out this demo of our new **Checklist** premium plugin plugin that adds interactive checklists to your content.<br>
+    Note that he Checklist Plugin has to be used together with the <a href="https://www.tiny.cloud/docs/plugins/lists/">Lists</a> plugin to work.
+  </p>
+
+  <h2>Got questions or need help?</h2>
+
+  <ul>
+    <li>Our <a href="https://www.tiny.cloud/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
+    <li>Have a specific question? Visit the <a href="https://community.tinymce.com/forum/" target="_blank">Community Forum</a>.</li>
+    <li>We also offer enterprise grade support as part of <a href="https://www.tiny.cloud/pricing">TinyMCE Enterprise</a>.</li>
+  </ul>
+
+  <h2>A simple table to play with</h2>
+
+  <table style="text-align: center;">
+    <thead>
+      <tr>
+        <th>Product</th>
+        <th>Cost</th>
+        <th>Really?</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>TinyMCE</td>
+        <td>Free</td>
+        <td>YES!</td>
+      </tr>
+      <tr>
+        <td>Plupload</td>
+        <td>Free</td>
+        <td>YES!</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <h2>Found a bug?</h2>
+
+  <p>
+    If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.
+  </p>
+
+  <h2>Finally ...</h2>
+
+  <p>
+    Don't forget to check out our other product <a href="http://www.plupload.com" target="_blank">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.
+  </p>
+  <p>
+    Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br>All the best from the TinyMCE team.
+  </p>
+</textarea>

_includes/codepens/checklist/index.js

@@ -0,0 +1,6 @@
+tinymce.init({
+  selector: "textarea",
+  plugins: "lists checklist",
+  toolbar: "checklist",
+  height: "600px",
+});

_includes/codepens/checklist/style.css

@@ -0,0 +1,19 @@
+.tox-checklist > li:not(.tox-checklist--hidden) {
+  list-style: none;
+  margin: .25em 0;
+  position: relative;
+}
+.tox-checklist > li:not(.tox-checklist--hidden)::before {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
+  background-size: 100%;
+  content: '';
+  cursor: pointer;
+  height: 1em;
+  left: -1.5em;
+  position: absolute;
+  top: .125em;
+  width: 1em;
+}
+.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
+}

demo/checklist.md

@@ -0,0 +1,15 @@
+---
+layout: default
+title: Checklist plugin
+title_nav: Checklist
+description: Add checklists to the content.
+keywords: lists todo checklist
+controls: toolbar button
+---
+
+
+## Live example
+
+This example shows how to use the **Checklist** plugin to add interactive checklists to your content. For more information on the Checklist plugin, see the [docs]().
+
+{% include codepen.html id="checklist" %}