From 32ce04c9c74c2e782fe5b16ac2e62317f183a875 Mon Sep 17 00:00:00 2001
From: shikha <shikha.nansi@ephox.com>
Date: Thu, 14 Mar 2019 14:40:11 +1000
Subject: [PATCH] Case Change demo

---
 _data/nav.yml                            |  3 +-
 _includes/codepens/casechange/index.html | 58 ++++++++++++++++++++++++
 _includes/codepens/casechange/index.js   |  6 +++
 _includes/codepens/casechange/style.css  |  0
 demo/casechange.md                       | 15 ++++++
 5 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 _includes/codepens/casechange/index.html
 create mode 100644 _includes/codepens/casechange/index.js
 create mode 100644 _includes/codepens/casechange/style.css
 create mode 100644 demo/casechange.md

diff --git a/_data/nav.yml b/_data/nav.yml
index 71162143a..5dd9edf4a 100644
--- a/_data/nav.yml
+++ b/_data/nav.yml
@@ -29,7 +29,8 @@
   pages:
   - url: "whats-new"
   - url: "basic-example"
-  - url: "full-featured"  
+  - url: "full-featured"
+  - url: "casechange"
   - url: "comments-2"
   - url: "checklist"
   - url: "pageembed"
diff --git a/_includes/codepens/casechange/index.html b/_includes/codepens/casechange/index.html
new file mode 100644
index 000000000..9beaa6057
--- /dev/null
+++ b/_includes/codepens/casechange/index.html
@@ -0,0 +1,58 @@
+<textarea id="casechange">
+  <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 Case Change!</h1>
+
+  <p>
+    Please try out this demo of our new <b>Case Change</b> premium plugin that is a time saving and handy extension that allows changing the case of text in block selection to uppercase, lowercase, or title case.<br>
+  </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 in creating great content.<br>All the best from the TinyMCE team.
+  </p>
+</textarea>
diff --git a/_includes/codepens/casechange/index.js b/_includes/codepens/casechange/index.js
new file mode 100644
index 000000000..901e56284
--- /dev/null
+++ b/_includes/codepens/casechange/index.js
@@ -0,0 +1,6 @@
+tinymce.init({
+  selector: "textarea",
+  plugins: "casechange",
+  toolbar: "casechange",
+  height: "600px",
+});
diff --git a/_includes/codepens/casechange/style.css b/_includes/codepens/casechange/style.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/casechange.md b/demo/casechange.md
new file mode 100644
index 000000000..5d5323bc1
--- /dev/null
+++ b/demo/casechange.md
@@ -0,0 +1,15 @@
+---
+layout: default
+title: Case Change
+title_nav: Case Change
+description: Change the case of text.
+keywords: case capitalization capitalize lowercase uppercase
+controls: toolbar button, menu item
+---
+
+
+## Live example
+
+This example shows how to use the **Case Change** plugin to change the case of text in block selection to uppercase, lowercase, or title case. For more information on the **Case Change** plugin, see the [docs]({{site.baseurl}}/plugins/casechange/).
+
+{% include codepen.html id="casechange" %}
\ No newline at end of file