DOC-2524: Add initial comments to callback demo

tinymce · Oct 8, 2024 · 103239e · 103239e
1 parent cb0f3a8
commit 103239e
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 3 deletions.
diff --git a/modules/ROOT/examples/live-demos/comments-callback/index.html b/modules/ROOT/examples/live-demos/comments-callback/index.html
@@ -7,7 +7,7 @@ <h2>Welcome to Tiny Comments!</h2>
     <li>Type your comment into the text field at the bottom of the Comment sidebar.</li>
     <li>Click <strong>Comment</strong>.</li>
   </ol>
-  <p>Your comment is then attached to the text, exactly like this!</p>
+  <p>Your comment is <span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_420304606321716900864126" data-mce-annotation="tinycomments">then</span> attached to the text, <span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_19679600221621399703915" 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 14 days by signing up for a Tiny account. Make sure to check out our documentation as well.</p>
   <h2>A simple table to play with</h2>
   <table style="border-collapse: collapse; width: 100%;" border="1">

diff --git a/modules/ROOT/examples/live-demos/comments-callback/index.js b/modules/ROOT/examples/live-demos/comments-callback/index.js
@@ -46,8 +46,53 @@ tinymce.ScriptLoader.loadScripts(
   };
 
   /* Our server "database" */
-  const getDB = () =>
-    JSON.parse(localStorage.getItem('fakedb') ?? '{}');
+  const initialDB = {
+    "mce-conversation_19679600221621399703915": {
+      uid: "mce-conversation_19679600221621399703915",
+      comments: [
+        {
+          uid: "mce-conversation_19679600221621399703915",
+          author: "Another Tiny User",
+          authorName: "Another Tiny User",
+          content: "Please revise this sentence, exclamation points are unprofessional!",
+          createdAt: "2021-05-19T04:48:23.914Z",
+          modifiedAt: "2021-05-19T04:48:23.914Z",
+        },
+        {
+          uid: "mce-conversation_19679600221621399703917",
+          author: "Another Tiny User",
+          authorName: "Another Tiny User",
+          content: "Replied",
+          createdAt: "2021-05-19T04:48:23.914Z",
+          modifiedAt: "2021-05-19T04:48:23.914Z",
+        },
+        {
+          uid: "mce-conversation_19679600221621399703918",
+          author: "Another Tiny User",
+          authorName: "Another Tiny User",
+          content: "Replied again",
+          createdAt: "2021-05-19T04:48:23.914Z",
+          modifiedAt: "2021-05-19T04:48:23.914Z",
+        },
+      ],
+    },
+    "mce-conversation_420304606321716900864126": {
+      uid: "mce-conversation_420304606321716900864126",
+      comments: [
+        {
+          uid: "mce-conversation_420304606321716900864126",
+          author: "john_smith",
+          authorName: "John Smith",
+          authorAvatar: "https://i.pravatar.cc/150?img=11",
+          content: "I think this is a great idea!",
+          createdAt: "2024-05-28T12:54:24.126Z",
+          modifiedAt: "2024-05-28T12:54:24.126Z",
+        },
+      ],
+    },
+  };
+
+  const getDB = () => JSON.parse(localStorage.getItem('fakedb') ?? JSON.stringify(initialDB));
   const setDB = (data) => {
     localStorage.setItem('fakedb', JSON.stringify(data));
   };