DOC-207: fix the code sample and add a demo, removed the screenshot

_data/nav.yml

@@ -499,7 +499,7 @@
   # - url: "creating-a-custom-button"
   # - url: "creating-a-skin"
   # - url: "creating-a-plugin"
-  # - url: "annotations"
+  - url: "annotations"
   - url: "yeoman-generator"
   # - url: "creating-custom-dialogs"
   - url: "creating-custom-notifications"

_includes/codepens/annotations/index.html

@@ -0,0 +1,43 @@
+<textarea><p style="text-align: center; font-size: 15px;"><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 the TinyMCE Cloud demo!</h1>
+  <h5 style="text-align: center;">Note, this includes some "enterprise/premium" features.<br>Visit the <a href="https://www.tiny.cloud/pricing/#demo-enterprise">pricing page</a> to learn more about our premium plugins.</h5>
+  <p>Please try out the features provided in this full featured example.</p>
+
+  <h2>Got questions or need help?</h2>
+  <ul>
+    <li>Our <a href="//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/">Community Forum</a>.</li>
+    <li>We also offer enterprise grade support as part of <a href="https://www.tiny.cloud/pricing">TinyMCE premium subscriptions</a>.</li>
+  </ul>
+
+  <h2>A simple table to play with</h2>
+  <table style="text-align: center;border-collapse: collapse; width: 100%;">
+    <thead>
+      <tr>
+        <th>Product</th>
+        <th>Cost</th>
+        <th>Really?</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>TinyMCE Cloud</td>
+        <td>Get started for 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/annotations/index.js

@@ -0,0 +1,44 @@
+var settings = {
+  selector: 'textarea',
+  toolbar: ['annotate-alpha'],
+  menubar: false,
+  height: '750px',
+
+  content_style: '.mce-annotation { background-color: darkgreen; color: white; }',
+
+  setup: function (editor) {
+    editor.ui.registry.addButton('annotate-alpha', {
+      text: 'Annotate',
+      onAction() {
+        const comment = prompt('Comment with?');
+        editor.annotator.annotate('alpha', {
+          uid: 'custom-generated-id',
+          comment: comment
+        });
+        editor.focus();
+      },
+      onSetup (btnApi) {
+        editor.annotator.annotationChanged('alpha', function (state, name, obj) {
+          console.log('Current selection has an annotation: ', state);
+          btnApi.setDisabled(state);
+        });
+      }
+    });
+
+    editor.on('init', function () {
+      editor.annotator.register('alpha', {
+        persistent: true,
+        decorate: function (uid, data) {
+          return {
+            attributes: {
+              'data-mce-comment': data.comment ? data.comment : '',
+              'data-mce-author': data.author ? data.author : 'anonymous'
+            }
+          };
+        }
+      });
+    });
+  }
+};
+
+tinymce.init(settings);

advanced/annotations.md

@@ -6,6 +6,7 @@ keywords: annotation annotations
 ---
 
 ## Introduction
+
 The TinyMCE Annotations API provides the ability to add, modify, and delete annotations; listen to text selection events and retrieve all annotations with the same annotation name. The Annotations API is a part of the TinyMCE core and functions in the same way as the formatting APIs in TinyMCE core.
 
 The primary value that the Annotations API provides is that it tags each annotation with a unique identifier(uid) accessible via `editor.annotator`. This highlights the annotated content and wraps it in annotation markers. These markers can either stay in the content or be removed on `getContent`, depending on the user configuration (`persistent` setting).
@@ -20,17 +21,18 @@ To configure the annotate button on your toolbar:
 
        
  ```js
-setup: function(ed) {
-  ed.addButton('annotate-alpha', {
-    text: 'Annotate',
-    onclick: function() {
-      const comment = prompt('Comment with?');
-      ed.annotator.annotate('alpha', {
-        comment
-      });
-      ed.focus();
-    });
-   }
+  setup: function(ed) {
+    ed.ui.registry.addButton('annotate-alpha', {
+      text: 'Annotate',
+      onAction: function() {
+        var comment = prompt('Comment with?');
+        ed.annotator.annotate('alpha', {
+          comment
+        });
+        ed.focus();
+      }
+    })
+  }
 ```
        
 See [Configure TinyMCE]({{ site.baseurl }}/configure/) for more information on how to configure TinyMCE core.
@@ -41,17 +43,18 @@ The annotator API supports multiple annotation functions. Each annotation functi
 
 ```js
   ed.on('init', function() {
-     ed.annotator.register('alpha', {
-       persistent: true,
-       decorate: function(uid, data) {
-         return {
-           attributes: {
-             'data-mce-author': data.comment
-           }
-         };
-       }
-     });
-   });
+    editor.annotator.register('alpha', {
+      persistent: true,
+      decorate: function (uid, data) {
+        return {
+          attributes: {
+            'data-mce-comment': data.comment ? data.comment : '',
+            'data-mce-author': data.author ? data.author : 'anonymous'
+          }
+        };
+      }
+    });
+  });
 ```
 
 This will register an annotation with the name `alpha`. In our example, when an `alpha` is being added to the document, a span marker will be created with class `alpha` and a data attribute for the author.
@@ -129,67 +132,7 @@ annotationChanged: (name: string, callback): void
 
 Use the following example to create the Annotate API:
 
-```js
-<script type="text/javascript">
-tinymce.init({
-  selector: "textarea",
-  plugins: [
-    "advlist autolink lists link image charmap print preview anchor",
-    "searchreplace visualblocks code fullscreen",
-    "insertdatetime media table contextmenu paste"
-  ],
-  toolbar: "annotate-alpha | insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
-
-  content_style: '.mce-annotation { background-color: darkgreen; color: white; }',
-
-  setup: function(ed) {
-    ed.addButton('annotate-alpha', {
-      text: 'Annotate',
-      onclick: function() {
-        const comment = prompt('Comment with?');
-        ed.annotator.annotate('alpha', {
-          comment: comment
-        });
-        ed.focus();
-      },
-
-      onpostrender: function(ctrl) {
-        const button = ctrl.control;
-        ed.on('init', function() {
-          ed.annotator.annotationChanged('alpha', function(state, name, obj) {
-            if (! state) {
-              button.active(false);
-            } else {
-              button.active(true);
-            }
-          });
-        });
-      }
-    });
-
-    ed.on('init', function() {
-      ed.annotator.register('alpha', {
-        persistent: true,
-        decorate: function(uid, data) {
-          return {
-            attributes: {
-              'data-mce-alpha': data.comment
-            }
-          };
-        }
-      });
-    });
-  }
-});
-
-</script>
-
-<form method="post" action="dump.php">
-    <textarea name="content"></textarea>
-</form>
-```
-
-[Example]({{ site.baseurl }}/images/annotate.png)
+{% include codepen.html id="annotations" height="750" %}
 
 ## Retrieving All Annotations for a Particular Annotation Name