Update interactive demo

Author: Sorita Heng

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

@@ -1,9 +1,48 @@
+/** Fake user database */
+const userDb = {
+  adamhenderson: {
+      id: 'adamhenderson',
+      name: 'Adam Henderson',
+      avatar: `https://randomuser.me/api/portraits/men/1.jpg`,
+  },
+  michaelcook: {
+      id: 'michaelcook',
+      name: 'Michael Cook',
+      avatar: `https://randomuser.me/api/portraits/men/2.jpg`,
+  },
+  kalebwilson: {
+      id: 'kalebwilson',
+      name: 'Kaleb Wilson',
+      avatar: `https://randomuser.me/api/portraits/men/3.jpg`,
+  },
+  kyleeinstein: {
+      id: 'kyleeinstein',
+      name: 'Kyle Einstein',
+      avatar: `https://randomuser.me/api/portraits/men/4.jpg`,
+  },
+};
+
+const suggestededits_model = null; //Replace with the object returned by the plugin's getModel API, or null if there is no model.
+
+const fetch_users = (ids) => {
+  return new Promise((resolve, reject) => {
+    const users = ids.map(id => userDb[id]);
+    if (users.length > 0) {
+      resolve(users);
+    } else {
+      reject(new Error('No users found'));
+    }
+  });
+}
 
 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',
-  });
+  selector: 'textarea#suggested-edits',
+  height: 500,
+  plugins: 'suggestededits',
+  toolbar: 'suggestededits',
+  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }', 
+  suggestededits_model, // If there is no model, the plugin will generate a default model based on the editor content.
+  user_id: 'michaelcook',
+  fetch_users, 
+});
+

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

@@ -1,4 +1,4 @@
-<textarea id="trackchanges">
+<textarea id="suggested-edits">
   {{logofordemoshtml}}
 
   <h2 style="text-align: center;">Welcome to the TinyMCE Suggested Edits demo!</h2>