Add Suggestions section and demo

Author: Sorita Heng

modules/ROOT/examples/live-demos/suggestededits-suggestions/index.html

@@ -0,0 +1,34 @@
+<textarea id="trackchanges_suggestions">
+  {{logofordemoshtml}}
+
+  <h2 style="text-align: center;">Welcome to the TinyMCE Suggested Edits demo with review permissions!</h2>
+
+  <p style="text-align: center;">In this demo, the user has a 'read' access to the Suggested Edits view. Try typing in the editor and then clicking the Review Changes button in the toolbar to see how it works!</p>
+
+  <p style="text-align: center;">Try setting the editor read-only mode to true to restrict editing permission.</p>
+  
+  <h2>A simple table to play with</h2>
+
+  <table style="border-collapse: collapse; width: 100%;" border="1">
+    <thead>
+      <tr style="text-align: left;">
+        <th>Product</th>
+        <th>Cost</th>
+        <th>Really?</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>TinyMCE Cloud</td>
+        <td>Get started for free</td>
+        <td><strong>Yes!</strong></td>
+      </tr>
+      <tr>
+        <td>Plupload</td>
+        <td>Free</td>
+        <td><strong>Yes!</strong></td>
+      </tr>
+    </tbody>
+  </table>
+
+</textarea>

modules/ROOT/examples/live-demos/suggestededits-suggestions/index.js

@@ -0,0 +1,38 @@
+/** Fake user database */
+const userinfos = {
+  adamhenderson: {
+      uid: 'adamhenderson',
+      name: 'Adam Henderson',
+      avatar: `https://randomuser.me/api/portraits/men/1.jpg`,
+  },
+  michaelcook: {
+      uid: 'michaelcook',
+      name: 'Michael Cook',
+      avatar: `https://randomuser.me/api/portraits/men/2.jpg`,
+  },
+  kalebwilson: {
+      uid: 'kalebwilson',
+      name: 'Kaleb Wilson',
+      avatar: `https://randomuser.me/api/portraits/men/3.jpg`,
+  },
+  kyleeinstein: {
+      uid: 'kyleeinstein',
+      name: 'Kyle Einstein',
+      avatar: `https://randomuser.me/api/portraits/men/4.jpg`,
+  },
+};
+
+const trackchanges_user_lookup = (uid) => new Promise((resolve, reject) =>
+  setTimeout(() => userinfos[uid] ? resolve(userinfos[uid]) : reject(), 1000));
+
+tinymce.init({
+  selector: 'textarea#trackchanges_suggestions',
+  height: 500,
+  plugins: 'trackchanges',
+  toolbar: 'trackchanges',
+  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }', 
+  trackchanges_uid: 'adamhenderson',
+  trackchanges_access: 'suggest', //change this value to set permission to the Suggested Edits view
+  readonly: false, //set to true to restrict a user's editing permission
+  trackchanges_user_lookup
+});

modules/ROOT/pages/suggestededits.adoc

@@ -80,6 +80,14 @@ tinymce.init({
 });
 ----
 
+== Suggestions
+
+The plugin also enables users to provide suggestions or feedback to edits before they are resolved. This feature is only available if xref:{plugincode}_access[`+suggestededits_access+`] is set to `admin` or `suggest`. 
+
+Example: Using Suggestions 
+
+liveDemo::suggestededits-suggestions[]
+
 == Options
 
 The following configuration options affect the behavior of the {pluginname} plugin.

modules/ROOT/partials/configuration/suggestededits-options.adoc

@@ -124,7 +124,7 @@ tinymce.init({
 The `{plugincode}_diff_classes` option configures the CSS classes applied to the change annotations in the {pluginname} view. This is useful to set custom styles and must be used in combination with the `{plugincode}_css_url` option. 
 
 [NOTE]
-The CSS class names must exist in the xref:{plugincode}_css_url[`+{plugincode}_css_url+`].
+The CSS class names must exist in the xref:{plugincode}_css_url[`+suggestededits_css_url+`].
 
 *Type:* `+Object+`