Update option and api examples

Author: Sorita Heng

modules/ROOT/pages/suggestededits.adoc

@@ -82,16 +82,14 @@ For example:
 
 [source,js]
 ----
-const suggestededits_model = `<YOUR_DOCUMENT_MODEL>` // model provided by suggestededits plugin API
+const suggestededits_model = `<YOUR_DOCUMENT_MODEL>` // model provided by the getModel API
 
 tinymce.init({
   selector: 'textarea#suggestededits',  // change this value according to your HTML
   plugins: 'suggestededits',
   toolbar: 'suggestededits',
-  suggestededits_model, // model provided by suggestededits plugin API
+  suggestededits_model,
 });
-
-<textarea id="suggestededits"><p>Your initial content here </p></textarea>
 ----
 
 == Options

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

@@ -1,5 +1,5 @@
-include::partial$configuration/userlookup_userid.adoc[]
-include::partial$configuration/userlookup_fetch.adoc[]
+include::partial$configuration/userlookup_user_id.adoc[]
+include::partial$configuration/userlookup_fetch_users.adoc[]
 include::partial$configuration/suggestededits_model.adoc[]
 include::partial$configuration/suggestededits_content.adoc[]
 include::partial$configuration/suggestededits_access.adoc[]

modules/ROOT/partials/configuration/suggestededits_access.adoc

@@ -38,8 +38,9 @@ tinymce.init({
   selector: 'textarea',  // Change this value according to your HTML
   plugins: 'suggestededits',
   toolbar: 'suggestededits',
-  suggestededits_uid: 'unique-identifier', // replace this with a unique string to identify the user 
-  suggestededits_access: 'full' //change this value to set permission to the Suggested Edits view 
+  user_id: 'unique-identifier', // replace this with a unique string to identify the user
+  fetch_users, // Function to fetch users for the user lookup API
+  suggestededits_access: 'full', //change this value to set the user's permission to the Suggested Edits view
   readonly: false //set to true to restrict a user's editing permission
 });
 ----

modules/ROOT/partials/configuration/suggestededits_content.adoc

@@ -16,15 +16,15 @@ In either case, if a model is not provided, the plugin will generate a new model
 
 === Example: using `{plugincode}_content`
 
-// Add a working and tested configuration.
 [source,js]
 ----
 tinymce.init({
   selector: 'textarea',  // Change this value according to your HTML
   plugins: 'suggestededits',
   toolbar: 'suggestededits',
-  suggestededits_uid: 'unique-identifier', // replace this with a unique string to identify the user
-  suggestededits_model,
-  suggestededits_content: 'model' // change this value to set the content source
+  user_id: 'unique-identifier', // Replace this with a unique string to identify the user
+  fetch_users, // Function to fetch users for the user lookup API
+  suggestededits_model, // Load the saved model into the editor
+  suggestededits_content: 'model' // Only set this if you want to load the initial content from the model
 });
 ----

modules/ROOT/partials/configuration/suggestededits_model.adoc

@@ -4,18 +4,27 @@
 The `{plugincode}_model` option sets the initial model of the document to begin tracking changes. It takes as input an object representing the document, containing all edits made to the document up to that point. This model should be saved externally alongside the document, and loaded into the editor each time the document is opened. This will ensure that both the document and the model are in sync, and that the plugin can track edits correctly.
 
 If the model is not provided in the editor configuration, the plugin will create a new model from the current content of the editor. This model can be retrieved from the editor at any time using the xref:#get_model[`getModel` API].
-//*Type:* xref:#trackeddocument[TrackedDocument] `+Object+`
+
+*Type:* `+Object+`
 
 === Example: using `{plugincode}_model`
 
-// Add a working and tested configuration.
 [source,js]
 ----
-tinymce.init({
-  selector: 'textarea',  // Change this value according to your HTML
-  plugins: 'suggestededits',
-  toolbar: 'suggestededits',
-  suggestededits_uid: 'unique-identifier', // replace this with a unique string to identify the user 
-  suggestededits_model // Model representing the document with up to date edits
+async function fetchSavedModel(documentId) {
+  // Replace this URL and logic with your actual backend API
+  const response = await fetch(`/api/models/${documentId}`);
+  return await response.json();
+}
+
+fetchSavedModel('your-document-id').then((savedModel) => {
+  tinymce.init({
+    selector: 'textarea',  // Change this value according to your HTML
+    plugins: 'suggestededits',
+    toolbar: 'suggestededits',
+    user_id: 'unique-identifier', // Replace with a unique string to identify the user
+    fetch_users, // Function to fetch users for the user lookup API
+    suggestededits_model: savedModel // Load the saved model into the editor
+  });
 });
 ----

modules/ROOT/partials/plugin-apis/suggestededits-apis.adoc

@@ -2,10 +2,10 @@
 |===
 |Name   |Arguments    |Description
 
-|getModel |N/A |Return an object representing the document model used to store data of the tracked changes. 
-|setModel |xref:#trackeddocument[TrackedDocument] `+Object+` | Set the current model of the document. 
+|getModel |N/A |Return an object representing the document model used to store data of the suggested edits. 
+|setModel | `+Object+` | Set the current model of the document. 
 //|resetModel |N/A |Reset the document to its original state. 
-|hasChanges |N/A |Return a boolean value indicating whether the document contains changes to be reviewed.  
+|hasChanges |N/A |Return a boolean value indicating whether the document contains edits to be reviewed.  
 |===
 
 .Examples
@@ -25,7 +25,7 @@ tinymce.activeEditor.plugins.suggestededits.hasChanges();
 .`getModel` Example
 [source,js]
 ----
-const documentId = '<YOUR_DOCUMENT_ID>'; // Replace with the actual document ID
+const documentId = '<YOUR_DOCUMENT_ID>'; // Replace with your document ID
 
 tinymce.init({
   selector: 'textarea#suggestededits',  // change this value according to your HTML
@@ -75,30 +75,40 @@ tinymce.init({
 .`setModel` Example
 [source,js]
 ----
-const documentId = '<YOUR_DOCUMENT_ID>'; // Replace with the actual document ID
+const documentIds = ['doc1', 'doc2', 'doc3']; // Example document IDs
 
 tinymce.init({
   selector: 'textarea#suggestededits',  // change this value according to your HTML
   plugins: 'suggestededits',
   toolbar: 'suggestededits',
-  // No model provided in the editor configuration, it will be fetched from the server
-  init_instance_callback: (editor) => {
-    // Fetch the document from the server
-    fetch(`/api/documents/${documentId}`)
-      .then((response) => {
-        // Set the content in the editor
-        editor.setContent(response);
-      })
-      .catch((error) => console.error(`Error fetching document ${documentId}:`, error));
-      
-    // Fetch the document model from the server
-    fetch(`/api/models/${documentId}`)
-      .then((response) => response.json())
-      .then((model) => {
-        // Set the model in the editor
-        editor.plugins.suggestededits.setModel(model);
-      })
-      .catch((error) => console.error(`Error fetching document ${documentId} model:`, error));
+  setup: (editor) => {
+    // Function to load a document and its model
+    function loadDocument(documentId) {
+      // Fetch and set the document content
+      fetch(`/api/documents/${documentId}`)
+        .then((response) => response.text())
+        .then((content) => {
+          editor.setContent(content);
+        })
+        .catch((error) => console.error(`Error fetching document ${documentId}:`, error));
+
+      // Fetch and set the suggested edits model
+      fetch(`/api/models/${documentId}`)
+        .then((response) => response.json())
+        .then((model) => {
+          editor.plugins.suggestededits.setModel(model);
+        })
+        .catch((error) => console.error(`Error fetching model for ${documentId}:`, error));
+    }
+
+    // Example: Attach to a button click event
+    document.getElementById('loadDocBtn').addEventListener('click', () => {
+      const selectedId = document.getElementById('docSelect').value;
+      loadDocument(selectedId);
+    });
+
+    // Optionally, load the first document on init
+    loadDocument(documentIds[0]);
   }
 });
 ----