add live demo

Author: Sorita Heng

antora.yml

@@ -10,7 +10,7 @@ asciidoc:
     companyurl: https://www.tiny.cloud
     cdnurl: https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js
     tdcdnurl: https://cdn.tiny.cloud/1/_your_api_key_/tinydrive/7/tinydrive.min.js
-    tinymce_live_demo_url: https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/7/tinymce.min.js
+    tinymce_live_demo_url: https://internal-preview.tiny.work/epic/EPIC-134/tinymce.min.js
     tinydrive_live_demo_url: https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinydrive/7/tinydrive.min.js
     webcomponent_url: https://cdn.jsdelivr.net/npm/@tinymce/tinymce-webcomponent@2/dist/tinymce-webcomponent.min.js
     jquery_url: https://cdn.jsdelivr.net/npm/@tinymce/tinymce-jquery@2/dist/tinymce-jquery.min.js

modules/ROOT/examples/live-demos/trackchanges/example.js

@@ -1,30 +1,9 @@
-/*
 
-This file is not normally required.
-
-Sometimes, however, a plugin, or a particular feature of a plugin,
-requires a back-end service.
-
-In these cases, creating a working demo requires setting up an
-emulated version of this service.
-
-And `example.js` is part of this emulation.
-
-`index.js` still runs the live demo.
-
-But `example.js` is what is displayed in the *js* tab of the
-live-demo interface on the built docs site.
-
-So `example.js` has to be a working equivalent to `index.js` *if*
-`index.js` was wired up in a standard way, to its required back-end
-service.
-
-NB: there is one UX consequence of setting up demos to work in
-these cases. The *Edit on CodePen* tab does not — and cannot —
-present in the documentation.
-
-The initial setup of these ‘includes-an-emulated-back-end’ examples
-will almost certainly include significant initial input from the
-plugin’s developer.
-
-*/
+tinymce.init({
+    selector: 'textarea#trackchanges',
+    height: 500,
+    plugins: 'trackchanges',
+    toolbar: 'trackchanges',
+    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }', 
+    trackchanges_uid: 'adamhenderson',
+  });

modules/ROOT/examples/live-demos/trackchanges/index.html

@@ -1,8 +1,12 @@
-<textarea id="<plugincode>">
+<textarea id="trackchanges">
   {{logofordemoshtml}}
 
-<!-- example html here -->
+  <h2 style="text-align: center;">Welcome to the TinyMCE Track Changes demo!</h2>
 
+  <p style="text-align: center;">Try out the Track Changes feature by typing in the editor and then clicking the Review Changes button in the toolbar.</p>
+
+  <p style="text-align: center;">And visit the <a href="https://www.tiny.cloud/pricing">pricing page</a> to learn more about our Premium plugins.</p>
+  
   <h2>Found a bug?</h2>
 
   <p>If you believe 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>
@@ -12,4 +16,29 @@ <h2>Finally…</h2>
   <p>Don’t forget to check out <a href="http://www.plupload.com" target="_blank">Plupload</a>, the upload solution featuring HTML5 upload support.</p>
   <p>Thanks for supporting TinyMCE. We hope it helps you and your users create great content.</p>
   <p>All the best from the TinyMCE team.</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/trackchanges/index.js

@@ -1,16 +1,37 @@
+/** 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#<plugincode>',
-// below is a basic 6.x working configuration.
-// Do not assume it is suitable for demonstrating the plugin to be documented.
+  selector: 'textarea#trackchanges',
   height: 500,
-  plugins: [
-    'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
-    'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
-    'insertdatetime', 'media', 'table', 'help', 'wordcount'
-  ],
-  toolbar: 'undo redo | blocks | ' +
-  'bold italic backcolor | alignleft aligncenter ' +
-  'alignright alignjustify | bullist numlist outdent indent | ' +
-  'removeformat | help',
-  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
+  plugins: 'trackchanges',
+  toolbar: 'trackchanges',
+  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }', 
+  trackchanges_uid: 'adamhenderson',
+  trackchanges_user_lookup,
 });

modules/ROOT/pages/trackchanges.adoc

@@ -75,7 +75,7 @@ tinymce.init({
         ]
       }
     ]
-  }
+  },
   trackchanges_uid: 'unique-identifier' // replace this with a unique string to identify the user 
 });
 ----