Skip to content

Commit 45240c5

Browse files
MitchC1999Sorita Hengkimwoodfieldkemister85TheSpyder
authored
DOC-3246: Suggested Edits and User Lookup API documentation (#3798)
* Initial setup * add live demo template * Update API sections * Add description of plugin and examples for API options * Comment out note about stacked changes and minor copy edits * add live demo * rename plugin to Suggested Edits * replace all instanes of plugin name and code * Update docs to include Review Permissions V1 * Fix demo for Review Permissions * Add Suggestions section and demo * Revise Suggestions content * Initial setup * add live demo template * Update API sections * Add description of plugin and examples for API options * Comment out note about stacked changes and minor copy edits * add live demo * rename plugin to Suggested Edits * replace all instanes of plugin name and code * Update docs to include Review Permissions V1 * Fix demo for Review Permissions * Add Suggestions section and demo * Revise Suggestions content * DOC-3174: Updating suggestedits docs * DOC-3174: Remove unused options * Update explanation of plugin and add UID options * fix UID options * Update interactive demo * Update suggestededits_access demo * fix UID options * Update option and api examples * Fix UID options * DOC-3174: Adding icons * DOC-3174: Add `Using the User Lookup API` page * Update UID options partials * DOC-3174: Some edits * DOC-3174: Add `UserLookup` partials to `revisionhistory` and `tinycomments` pages * DOC-3174: Replace reference to `userDb` with `userinfos` * DOC-3174: Remove usage of `uid` in `suggestededits` * DOC-3174: Fix indentations within `Types of suggestions` * DOC-3174: Update interactive demos and examples for `embedded` mode in `tinycomments` * DOC-3174: Update interactive demos and examples for `revisionhistory` * DOC-3174: Rewrite suggested edits * DOC-3174: Edits * DOC-3246: More docs * DOC-3246: Fixed, premium-plugin table, removed template material, fixed whitespace, added missing available-toolbar-buttons. * DOC-3246: Add deprecation messaging to `tinycomments_fetch_author_info` option * DOC-3246: Update interactive examples on `comments-with-mentions` page * DOC-3246: Include `user_id` and `fetch_users` options in `Required Comments options for embedded mode` section * DOC-3246: Update `tinycomments_mentions_enabled` to include `user_id` and `fetch_users` * DOC-3246: Demo updates * Apply suggestions from code review Co-authored-by: Andrew Herron <[email protected]> * DOC-3246: Use lookup over `find` in `fetch_users` * DOC-3246: Updates to `fetch_users` partial * DOC-3246: Improve examples and access option * DOC-3246: Update fetch_users option across other plugin examples * DOC-3246: Single quotes only * Apply suggestions from code review Co-authored-by: Andrew Herron <[email protected]> Co-authored-by: Karl Kemister-Sheppard <[email protected]> * DOC-3246: Improve API examples * DOC-3246: Improvements * Apply suggestions from code review Co-authored-by: Karl Kemister-Sheppard <[email protected]> Co-authored-by: Shan <[email protected]> * DOC-3246: Final edits * DOC-3246: Final final edit * DOC-3246: Docs tweaks * DOC-3246: userlookup api docs restructure and organisation update. * Apply suggestions from code review Co-authored-by: Andrew Herron <[email protected]> * DOC-3246: Final improvements --------- Co-authored-by: Sorita Heng <[email protected]> Co-authored-by: kimwoodfield <[email protected]> Co-authored-by: Karl Kemister-Sheppard <[email protected]> Co-authored-by: Andrew Herron <[email protected]> Co-authored-by: Shan <[email protected]>
1 parent deb117a commit 45240c5

File tree

55 files changed

+2453
-84
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+2453
-84
lines changed

‎antora-playbook.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ content:
88
branches: HEAD
99
start_path: ./
1010
- url: https://github.com/tinymce/tinymce-docs.git
11-
branches: [ tinymce/5, tinymce/6, tinymce/7]
11+
branches: [ tinymce/5, tinymce/6, tinymce/7 ]
1212
urls:
1313
html_extension_style: indexify
1414
latest_version_segment: latest

‎antora.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ asciidoc:
1010
companyurl: https://www.tiny.cloud
1111
cdnurl: https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js
1212
tdcdnurl: https://cdn.tiny.cloud/1/_your_api_key_/tinydrive/7/tinydrive.min.js
13-
tinymce_live_demo_url: https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/7/tinymce.min.js
13+
tinymce_live_demo_url: https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8-dev/tinymce.min.js
1414
tinydrive_live_demo_url: https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinydrive/7/tinydrive.min.js
1515
webcomponent_url: https://cdn.jsdelivr.net/npm/@tinymce/tinymce-webcomponent/dist/tinymce-webcomponent.min.js
1616
jquery_url: https://cdn.jsdelivr.net/npm/@tinymce/tinymce-jquery@2/dist/tinymce-jquery.min.js

‎modules/ROOT/examples/live-demos/comments-callback-with-mentions/index.js‎

Lines changed: 32 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,23 @@
11
import ('https://cdn.jsdelivr.net/npm/@faker-js/faker@9/dist/index.min.js').then(({ faker }) => {
2+
/* This represents a database of users on the server */
23
const userDb = {
34
'michaelcook': {
45
id: 'michaelcook',
56
name: 'Michael Cook',
6-
fullName: 'Michael Cook',
7-
description: 'Product Owner',
8-
image: "{{imagesdir}}/avatars/michaelcook.png"
7+
avatar: '{{imagesdir}}/avatars/michaelcook.png',
8+
custom: {
9+
fullName: 'Michael Cook',
10+
description: 'Product Owner'
11+
}
912
},
1013
'kalebwilson': {
1114
id: 'kalebwilson',
1215
name: 'Kaleb Wilson',
13-
fullName: 'Kaleb Wilson',
14-
description: 'Marketing Director',
15-
image: "{{imagesdir}}/avatars/kalebwilson.png"
16+
avatar: '{{imagesdir}}/avatars/kalebwilson.png',
17+
custom: {
18+
fullName: 'Kaleb Wilson',
19+
description: 'Marketing Director',
20+
}
1621
}
1722
};
1823

@@ -35,7 +40,7 @@ import ('https://cdn.jsdelivr.net/npm/@faker-js/faker@9/dist/index.min.js').then
3540
const getAuthorInfo = (uid) => {
3641
const user = userDb[uid];
3742
if (user) {
38-
return fillAuthorInfo(user.id, user.fullName, user.image);
43+
return fillAuthorInfo(user.id, user.custom.fullName, user.avatar);
3944
}
4045
return {
4146
author: uid,
@@ -85,8 +90,8 @@ import ('https://cdn.jsdelivr.net/npm/@faker-js/faker@9/dist/index.min.js').then
8590
const resolvedConversationDb = {};
8691

8792
const setupFakeServer = () => {
88-
const images = [ adminUser.image, currentUser.image ];
89-
const userNames = [ adminUser.fullName, currentUser.fullName ];
93+
const images = [ adminUser.avatar, currentUser.avatar ];
94+
const userNames = [ adminUser.custom.fullName, currentUser.custom.fullName ];
9095

9196
for (let i = 0; i < numberOfUsers; i++) {
9297
images.push(faker.image.avatar());
@@ -99,14 +104,16 @@ import ('https://cdn.jsdelivr.net/npm/@faker-js/faker@9/dist/index.min.js').then
99104
[currentUser.id]: currentUser
100105
};
101106
userNames.map((fullName) => {
102-
if ((fullName !== currentUser.fullName) && (fullName !== adminUser.fullName)) {
107+
if ((fullName !== currentUser.custom.fullName) && (fullName !== adminUser.custom.fullName)) {
103108
const id = fullName.toLowerCase().replace(/ /g, '');
104109
userDb[id] = {
105110
id,
106111
name: fullName,
107-
fullName,
108-
description: faker.person.jobTitle(),
109-
image: images[Math.floor(images.length * Math.random())]
112+
avatar: images[Math.floor(images.length * Math.random())],
113+
custom: {
114+
fullName,
115+
description: faker.person.jobTitle(),
116+
}
110117
};
111118
}
112119
});
@@ -118,8 +125,8 @@ import ('https://cdn.jsdelivr.net/npm/@faker-js/faker@9/dist/index.min.js').then
118125
const users = Object.keys(userDb).map((id) => ({
119126
id,
120127
name: userDb[id].name,
121-
image: userDb[id].image,
122-
description: userDb[id].description
128+
image: userDb[id].avatar,
129+
description: userDb[id].custom.description
123130
}));
124131
resolve(users);
125132
}, fakeDelay);
@@ -320,9 +327,6 @@ import ('https://cdn.jsdelivr.net/npm/@faker-js/faker@9/dist/index.min.js').then
320327
});
321328
setTimeout(() => done({ conversations: fetchedConversations }), fakeDelay);
322329
};
323-
324-
// Read the above `getAuthorInfo` function to see how this could be implemented
325-
const tinycomments_fetch_author_info = (done) => done(getAuthorInfo(currentUid));
326330

327331
tinymce.init({
328332
selector: 'textarea#comments-callback-with-mentions',
@@ -350,9 +354,16 @@ import ('https://cdn.jsdelivr.net/npm/@faker-js/faker@9/dist/index.min.js').then
350354
mentions_select,
351355

352356
tinycomments_mode: 'callback',
353-
tinycomments_author: currentUser.id,
354-
tinycomments_author_name: currentUser.fullName,
355-
tinycomments_avatar: currentUser.image,
357+
user_id: currentUser.id,
358+
fetch_users: (userIds) => {
359+
return Promise.all(
360+
userIds.map(
361+
(userId) => new Promise(
362+
(resolve) => resolve(userDb[userId] || { id: userId })
363+
)
364+
)
365+
)
366+
},
356367
tinycomments_create,
357368
tinycomments_reply,
358369
tinycomments_delete,
@@ -362,6 +373,5 @@ import ('https://cdn.jsdelivr.net/npm/@faker-js/faker@9/dist/index.min.js').then
362373
tinycomments_delete_comment,
363374
tinycomments_edit_comment,
364375
tinycomments_fetch,
365-
tinycomments_fetch_author_info
366376
});
367377
});

‎modules/ROOT/examples/live-demos/comments-embedded-with-mentions/index.js‎

Lines changed: 41 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,28 @@
11
import ('https://cdn.jsdelivr.net/npm/@faker-js/faker@9/dist/index.min.js').then(({ faker }) => {
2-
const adminUser = {
3-
id: 'johnsmith',
4-
name: 'John Smith',
5-
fullName: 'John Smith',
6-
description: 'Company Founder',
7-
image: "https://i.pravatar.cc/150?img=11"
2+
/* This represents a database of users on the server */
3+
const userDb = {
4+
'johnsmith': {
5+
id: 'johnsmith',
6+
name: 'John Smith',
7+
avatar: 'https://i.pravatar.cc/150?img=11',
8+
custom: {
9+
fullName: 'John Smith',
10+
description: 'Company Founder',
11+
}
12+
},
13+
'jennynichols': {
14+
id: 'jennynichols',
15+
name: 'Jenny Nichols',
16+
avatar: 'https://i.pravatar.cc/150?img=10',
17+
custom: {
18+
fullName: 'Jenny Nichols',
19+
description: 'Marketing Director',
20+
}
21+
}
822
};
923

10-
const currentUser = {
11-
id: 'jennynichols',
12-
name: 'Jenny Nichols',
13-
fullName: 'Jenny Nichols',
14-
description: 'Marketing Director',
15-
image: "https://i.pravatar.cc/150?img=10"
16-
};
24+
const adminUser = userDb['johnsmith'];
25+
const currentUser = userDb['jennynichols'];
1726

1827
const fakeDelay = 500;
1928
const numberOfUsers = 200;
@@ -24,28 +33,25 @@ import ('https://cdn.jsdelivr.net/npm/@faker-js/faker@9/dist/index.min.js').then
2433
const userRequest = {};
2534

2635
const setupFakeServer = () => {
27-
const images = [ adminUser.image, currentUser.image ];
28-
const userNames = [ adminUser.fullName, currentUser.fullName ];
36+
const images = [ adminUser.avatar, currentUser.avatar ];
37+
const userNames = [ adminUser.custom.fullName, currentUser.custom.fullName ];
2938

3039
for (let i = 0; i < numberOfUsers; i++) {
3140
images.push(faker.image.avatar());
3241
userNames.push(`${faker.person.firstName()} ${faker.person.lastName()}`);
3342
}
34-
35-
/* This represents a database of users on the server */
36-
const userDb = {
37-
[adminUser.id]: adminUser,
38-
[currentUser.id]: currentUser
39-
};
43+
4044
userNames.map((fullName) => {
41-
if ((fullName !== currentUser.fullName) && (fullName !== adminUser.fullName)) {
45+
if ((fullName !== currentUser.custom.fullName) && (fullName !== adminUser.custom.fullName)) {
4246
const id = fullName.toLowerCase().replace(/ /g, '');
4347
userDb[id] = {
4448
id,
4549
name: fullName,
46-
fullName,
47-
description: faker.person.jobTitle(),
48-
image: images[Math.floor(images.length * Math.random())]
50+
avatar: images[Math.floor(images.length * Math.random())],
51+
custom: {
52+
fullName,
53+
description: faker.person.jobTitle(),
54+
}
4955
};
5056
}
5157
});
@@ -155,9 +161,16 @@ import ('https://cdn.jsdelivr.net/npm/@faker-js/faker@9/dist/index.min.js').then
155161

156162
tinycomments_mode: 'embedded',
157163
sidebar_show: 'showcomments',
158-
tinycomments_author: currentUser.id,
159-
tinycomments_author_name: currentUser.fullName,
160-
tinycomments_avatar: currentUser.image,
164+
user_id: currentUser.id,
165+
fetch_users: (userIds) => {
166+
return Promise.all(
167+
userIds.map(
168+
(userId) => new Promise(
169+
(resolve) => resolve(userDb[userId] || { id: userId })
170+
)
171+
)
172+
)
173+
},
161174
tinycomments_can_resolve,
162175
});
163176
});

‎modules/ROOT/examples/live-demos/comments-embedded/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ tinymce.init({
1616
quickbars_image_toolbar: 'alignleft aligncenter alignright | rotateleft rotateright | imageoptions',
1717
tinycomments_mode: 'embedded',
1818
sidebar_show: 'showcomments',
19-
tinycomments_author: currentAuthor,
19+
user_id: currentAuthor,
2020
tinycomments_can_resolve: (req, done, fail) => {
2121
const allowed = req.comments.length > 0 &&
2222
req.comments[0].author === currentAuthor;

‎modules/ROOT/examples/live-demos/revisionhistory/index.js‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,15 @@ const getRandomDelay = () => {
44
return Math.floor(Math.random() * (maxDelay - minDelay + 1)) + minDelay;
55
};
66

7+
/* This represents a database of users on the server */
8+
const userDb = {
9+
'john.doe': {
10+
id: 'john.doe',
11+
name: 'John Doe',
12+
avatar: 'https://i.pravatar.cc/150?img=11'
13+
}
14+
};
15+
716
const lightRevisions = [
817
{
918
revisionId: '3',
@@ -202,9 +211,15 @@ tinymce.init({
202211
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
203212
revisionhistory_fetch,
204213
revisionhistory_fetch_revision,
205-
revisionhistory_author: {
206-
id: 'john.doe',
207-
name: 'John Doe'
208-
},
214+
user_id: 'john.doe',
215+
fetch_users: (userIds) => {
216+
return Promise.all(
217+
userIds.map(
218+
(userId) => new Promise(
219+
(resolve) => resolve(userDb[userId] || { id: userId })
220+
)
221+
)
222+
)
223+
},
209224
revisionhistory_display_author: true
210225
});

‎modules/ROOT/examples/live-demos/suggestededits-access-feedback/example.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
const tinymceElement = document.querySelector('textarea#suggested-edits');
2+
const model = tinymceElement.getAttribute('suggestededits-model');
3+
4+
tinymce.init({
5+
selector: 'textarea#suggested-edits',
6+
height: 500,
7+
plugins: 'suggestededits advlist anchor autolink code charmap emoticons fullscreen help image link lists media preview searchreplace table',
8+
toolbar: 'undo redo | suggestededits | styles fontsizeinput | bold italic | align bullist numlist | table link image | code',
9+
user_id: 'michaelcook',
10+
fetch_users: (userIds) => Promise.all(userIds
11+
.map((userId) =>
12+
fetch(`/users/${userId}`) // Fetch user data from the server
13+
.then((response) => response.json())
14+
.catch(() => ({ id: userId })) // Still return a valid user object even if the fetch fails
15+
)),
16+
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
17+
readonly: false, // Set to true to prevent edits to the content
18+
suggestededits_access: 'feedback', // Set this value to restrict the permissions in the Suggested Edits view
19+
suggestededits_content: 'html',
20+
suggestededits_model: model
21+
});

‎modules/ROOT/examples/live-demos/suggestededits-access-feedback/index.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<textarea id="suggestededits-access-feedback">
2+
{{logofordemoshtml}}
3+
4+
<h2 style="text-align: center;">Welcome to the TinyMCE Suggested Edits demo!</h2>
5+
6+
<p style="text-align: center;">Try out the Suggested Edits feature by typing in the editor and then clicking the Review Changes button in the toolbar.</p>
7+
8+
<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>
9+
10+
<h2>A simple table to play with</h2>
11+
12+
<table style="border-collapse: collapse; width: 100%;" border="1">
13+
<thead>
14+
<tr style="text-align: left;">
15+
<th>Product</th>
16+
<th>Cost</th>
17+
<th>Really?</th>
18+
</tr>
19+
</thead>
20+
<tbody>
21+
<tr>
22+
<td>TinyMCE Cloud</td>
23+
<td>Get started for free</td>
24+
<td><strong>Yes!</strong></td>
25+
</tr>
26+
<tr>
27+
<td>Plupload</td>
28+
<td>Free</td>
29+
<td><strong>Yes!</strong></td>
30+
</tr>
31+
</tbody>
32+
</table>
33+
34+
<h2>Found a bug?</h2>
35+
36+
<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>
37+
38+
<h2>Finally…</h2>
39+
40+
<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>
41+
<p>Thanks for supporting TinyMCE. We hope it helps you and your users create great content.</p>
42+
<p>All the best from the TinyMCE team.</p>
43+
44+
</textarea>

0 commit comments

Comments
 (0)