From 493d50520e6d57dcb4e45065374ff4eda5cbedbc Mon Sep 17 00:00:00 2001
From: shikha <shikha.nansi@ephox.com>
Date: Wed, 20 Feb 2019 12:55:39 +1000
Subject: [PATCH] comments 2 demo

---
 _data/nav.yml                            |  1 +
 _includes/codepens/comments-2/index.html | 32 ++++++++++++++++++++++++
 _includes/codepens/comments-2/index.js   | 14 +++++++++++
 _includes/codepens/comments-2/style.css  |  0
 demo/comments-2.md                       | 18 +++++++++++++
 enterprise/tiny-comments.md              |  7 +-----
 plugins/comments.md                      |  2 +-
 7 files changed, 67 insertions(+), 7 deletions(-)
 create mode 100644 _includes/codepens/comments-2/index.html
 create mode 100644 _includes/codepens/comments-2/index.js
 create mode 100644 _includes/codepens/comments-2/style.css
 create mode 100644 demo/comments-2.md

diff --git a/_data/nav.yml b/_data/nav.yml
index 1cb6fbade..518729361 100644
--- a/_data/nav.yml
+++ b/_data/nav.yml
@@ -30,6 +30,7 @@
   - url: "whats-new"
   - url: "basic-example"
   - url: "full-featured"
+  - url: "comments-2"
   - url: "pageembed"
   - url: "permanentpen"
   - url: "formatpainter"
diff --git a/_includes/codepens/comments-2/index.html b/_includes/codepens/comments-2/index.html
new file mode 100644
index 000000000..716e88197
--- /dev/null
+++ b/_includes/codepens/comments-2/index.html
@@ -0,0 +1,32 @@
+<div id="tiny-ui">
+  <textarea class="editor" style="width: 100%; height: 300px;">
+    <h1>Welcome to Tiny Comments!</h1>
+    <p>Please try out this demo of our new Tiny Comments premium plugin.  Just highlight the content you want to add a comment to, click the Comment icon in the toolbar, type your comment into the text field at the bottom of the Comment sidebar, and click ‘Start’. Your comment is then attached to the text, <span class="mce-annotation" data-mce-annotation-uid="96pewyxd0h5" data-mce-annotation="tinycomments">exactly like this!</span></p>
+
+    <p>If you want to take Tiny Comments for a test drive in your own environment, Tiny Comments is one of the premium plugins you can try for free for 30 days by signing up for a Tiny account. Make sure to check out our documentation as well.</p>
+
+    <p>And if you are ready to buy, you can either purchase Tiny Comments a la carte or as part of your Tiny Pro subscription. If you are a current cloud user, Tiny Comments has already been added to your key, and if you are a self-hosted user, Tiny Comments is now available in the latest download which you can access in My Account.</p>
+
+    <h2>A simple table to play with</h2>
+    <table style="text-align: center;">
+      <thead>
+        <tr>
+          <th>Product</th>
+          <th>Value</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td><a href="https://www.tinymce.com">Tiny Cloud</a></td>
+          <td>The easiest and most reliable way to integrate powerful rich text editing into your application.</td>
+        </tr>
+        <tr>
+          <td><a href="https://www.tiny.cloud/tinydrive/">Tiny Drive</a></td>
+          <td>Image and file management for TinyMCE in the cloud.</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <p>Thanks for supporting TinyMCE! We hope it helps your users create great content.</p>
+  </textarea>
+</div>
\ No newline at end of file
diff --git a/_includes/codepens/comments-2/index.js b/_includes/codepens/comments-2/index.js
new file mode 100644
index 000000000..82616983e
--- /dev/null
+++ b/_includes/codepens/comments-2/index.js
@@ -0,0 +1,14 @@
+tinymce.init({
+  selector: '#tiny-ui .editor',
+  toolbar: 'bold italic underline | addcomment',
+  menubar: 'file edit view insert format tools tc',
+  menu: {
+    tc: {
+      title: 'TinyComments',
+      items: 'addcomment showcomments deleteallconversations'
+    }
+  },
+  plugins: 'paste tinycomments',
+  tinycomments_mode: 'embedded',
+  tinycomments_author: 'Author'
+});
\ No newline at end of file
diff --git a/_includes/codepens/comments-2/style.css b/_includes/codepens/comments-2/style.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/comments-2.md b/demo/comments-2.md
new file mode 100644
index 000000000..70f4dd85c
--- /dev/null
+++ b/demo/comments-2.md
@@ -0,0 +1,18 @@
+---
+layout: default
+title: Comments 2.0 Demo
+title_nav: Comments 2.0
+description: Tiny Comments provides the ability to add comments to the content and collaborate with other users for content editing.
+keywords: comments commenting tinycomments
+controls: toolbar button
+---
+
+## Live example
+
+This example displays how to add the ability to start or join a conversation by adding comments to the content within the TinyMCE editor.
+
+In this example, the features in Comments 2.0 are highlighted, including adding a comment, replying to a comment, and deleting a comment.
+
+For more information on the other Comments 2.0 configuration options, see the [docs]({{ site.baseurl }}/plugins/comments/).
+
+{% include codepen.html id="comments-2" %}
\ No newline at end of file
diff --git a/enterprise/tiny-comments.md b/enterprise/tiny-comments.md
index 86a7dd8ed..e12400cb4 100644
--- a/enterprise/tiny-comments.md
+++ b/enterprise/tiny-comments.md
@@ -40,10 +40,5 @@ We provide a working example for integrating the TinyMCE plugin into your site.
 
 Start with the [pricing](https://www.tiny.cloud/pricing/) page to see our flexible pricing options. Enterprise customers should [contact sales directly](https://www.tinymce.com/pricing/).
 
-<!--Still not sure? Check out the demo below.
+Still not sure? Check out the [demo]({{site.baseurl}}/demo/comments-2/) that displays the features in Comments 2.0.
 
- ## Comments 2.0 Demo
-
-In this example, the features in Comments 2.0 are highlighted, including adding a comment, replying to a comment, and deleting a comment. For more information on the other Comments 2.0 configuration options, see the [docs]({{ site.baseurl }}/plugins/comments/comments_2.0).
-
-[Demo coming soon!]-->
\ No newline at end of file
diff --git a/plugins/comments.md b/plugins/comments.md
index 4fb1704f5..e4fbda63f 100644
--- a/plugins/comments.md
+++ b/plugins/comments.md
@@ -160,4 +160,4 @@ Follow this procedure to delete all conversations in the document:
 
 **Result**: All the comments for the selected document will be deleted.
 
-Check out the [Comments demo]({{site.baseurl}}/enterprise/tiny-comments/#tinycomments20demo) to try out this new feature.
+Check out the [Comments demo]({{site.baseurl}}/demo/comments-2) to try this new feature.