Skip to content

Commit 43dc3a3

Browse files
MitchC1999MitchC1999
committed
DOC-3246: Demo updates
1 parent 7bdb429 commit 43dc3a3

File tree

4 files changed

+152
-126
lines changed

4 files changed

+152
-126
lines changed

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

Lines changed: 36 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,40 @@
1-
/** Fake user database */
2-
const userDb = {
3-
adamhenderson: {
4-
id: 'adamhenderson',
5-
name: 'Adam Henderson',
6-
avatar: `https://randomuser.me/api/portraits/men/1.jpg`,
7-
},
8-
michaelcook: {
9-
id: 'michaelcook',
10-
name: 'Michael Cook',
11-
avatar: `https://randomuser.me/api/portraits/men/2.jpg`,
12-
},
13-
kalebwilson: {
14-
id: 'kalebwilson',
15-
name: 'Kaleb Wilson',
16-
avatar: `https://randomuser.me/api/portraits/men/3.jpg`,
17-
},
18-
kyleeinstein: {
19-
id: 'kyleeinstein',
20-
name: 'Kyle Einstein',
21-
avatar: `https://randomuser.me/api/portraits/men/4.jpg`,
22-
},
23-
};
24-
25-
const suggestededits_model = null; //Replace with the object returned by the plugin's getModel API, or null if there is no model.
26-
27-
const fetch_users = (ids) => {
28-
return new Promise((resolve, reject) => {
29-
const users = ids.map(id => userDb[id]);
30-
if (users.length > 0) {
31-
resolve(users);
32-
} else {
33-
reject(new Error('No users found'));
34-
}
35-
});
36-
}
37-
38-
tinymce.init({
1+
const config = {
392
selector: 'textarea#suggested-edits',
403
height: 500,
41-
plugins: 'suggestededits',
42-
toolbar: 'suggestededits',
43-
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
44-
suggestededits_model, // If there is no model, the plugin will generate a default model based on the editor content.
4+
plugins: 'suggestededits advlist anchor autolink code charmap emoticons fullscreen help image link lists media preview searchreplace table',
5+
toolbar: 'undo redo | suggestededits | styles fontsizeinput | bold italic | align bullist numlist | table link image | code',
456
user_id: 'michaelcook',
46-
fetch_users,
47-
});
7+
fetch_users: (userIds) => Promise.all(userIds
8+
.map((userId) =>
9+
fetch(`/users/${userId}`) // Fetch user data from the server
10+
.then((response) => response.json())
11+
.catch(() => ({ id: userId })) // Still return a valid user object even if the fetch fails
12+
)),
13+
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
14+
}
15+
16+
const loadTinymce = async () => {
17+
const documentPromise = fetch(`/documents/${documentId}`); // Fetch the document from the server
18+
const modelPromise = fetch(`/models/${documentId}`); // Fetch the model from the same server
19+
20+
await documentPromise
21+
.then((response) => response.text())
22+
.then(async (doc) => {
23+
const tinymceElement = document.querySelector('div#tinymce');
24+
tinymceElement.innerHTML = doc;
25+
26+
await modelPromise
27+
.then((response) => response.json())
28+
.then((model) => {
29+
tinymce.init({
30+
...config,
31+
suggestededits_model: model,
32+
});
33+
})
34+
.catch(() => {
35+
tinymce.init(config); // Initialize without a model if the model fetch fails
36+
});
37+
});
38+
};
4839

40+
loadTinymce();

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

Lines changed: 104 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,39 @@
11
/** Fake user database */
22
const userDb = {
3-
adamhenderson: {
4-
id: 'adamhenderson',
5-
name: 'Adam Henderson',
6-
avatar: `https://randomuser.me/api/portraits/men/1.jpg`,
3+
adamhayes: {
4+
id: 'adamhayes',
5+
name: 'Adam Hayes',
6+
avatar: `https://randomuser.me/api/portraits/men/4.jpg`,
77
},
8-
michaelcook: {
9-
id: 'michaelcook',
10-
name: 'Michael Cook',
11-
avatar: `https://randomuser.me/api/portraits/men/2.jpg`,
8+
martincook: {
9+
id: 'martincook',
10+
name: 'Martin Cook',
11+
avatar: `https://randomuser.me/api/portraits/men/5.jpg`,
1212
},
1313
kalebwilson: {
1414
id: 'kalebwilson',
1515
name: 'Kaleb Wilson',
16-
avatar: `https://randomuser.me/api/portraits/men/3.jpg`,
17-
},
18-
kyleeinstein: {
19-
id: 'kyleeinstein',
20-
name: 'Kyle Einstein',
21-
avatar: `https://randomuser.me/api/portraits/men/4.jpg`,
16+
avatar: `https://randomuser.me/api/portraits/men/6.jpg`,
2217
},
18+
sarahjones: {
19+
id: 'sarahjones',
20+
name: 'Sarah Jones',
21+
avatar: `https://randomuser.me/api/portraits/women/1.jpg`,
22+
}
2323
};
2424

2525
const model = {
26+
"history": {
27+
"2": [
28+
{
29+
"id": 1,
30+
"uid": "sarahjones",
31+
"timestamp": 1752576936000,
32+
"feedback": "Nice improvement!"
33+
}
34+
]
35+
},
2636
"version": 1,
27-
"maxId": 7,
2837
"contents": [
2938
{
3039
"type": "p",
@@ -56,8 +65,8 @@ const model = {
5665
"opData": {
5766
"id": 1,
5867
"type": "insert",
59-
"id": "adamhenderson",
60-
"timestamp": 1749214950000
68+
"uid": "adamhayes",
69+
"timestamp": 1752015064000
6170
}
6271
},
6372
{
@@ -75,42 +84,21 @@ const model = {
7584
"text": "Try out the Suggested Edits feature"
7685
},
7786
{
78-
"text": ": type in the editor, apply formatting or delete some content.",
87+
"text": ": type in the editor, apply formatting or delete some content. T",
7988
"opData": {
80-
"id": 3,
89+
"id": 2,
8190
"type": "insert",
82-
"id": "adamhenderson",
83-
"timestamp": 1749215051000
91+
"uid": "adamhayes",
92+
"timestamp": 1752415064000
8493
}
8594
},
8695
{
87-
"text": " by typing in the editor and",
96+
"text": " by typing in the editor and t",
8897
"opData": {
8998
"id": 2,
9099
"type": "remove",
91-
"id": "adamhenderson",
92-
"timestamp": 1749215053000
93-
}
94-
},
95-
{
96-
"text": " "
97-
},
98-
{
99-
"text": "t",
100-
"opData": {
101-
"id": 4,
102-
"type": "remove",
103-
"id": "adamhenderson",
104-
"timestamp": 1749215055000
105-
}
106-
},
107-
{
108-
"text": "T",
109-
"opData": {
110-
"id": 4,
111-
"type": "insert",
112-
"id": "adamhenderson",
113-
"timestamp": 1749215055000
100+
"uid": "adamhayes",
101+
"timestamp": 1752415064000
114102
}
115103
},
116104
{
@@ -119,10 +107,10 @@ const model = {
119107
{
120108
"text": ",",
121109
"opData": {
122-
"id": 5,
110+
"id": 3,
123111
"type": "insert",
124-
"id": "adamhenderson",
125-
"timestamp": 1749215056000
112+
"uid": "adamhayes",
113+
"timestamp": 1752515064000
126114
}
127115
},
128116
{
@@ -131,10 +119,10 @@ const model = {
131119
{
132120
"text": "ing",
133121
"opData": {
134-
"id": 6,
122+
"id": 4,
135123
"type": "remove",
136-
"id": "adamhenderson",
137-
"timestamp": 1749215060000
124+
"uid": "adamhayes",
125+
"timestamp": 1752515064000
138126
}
139127
},
140128
{
@@ -143,10 +131,10 @@ const model = {
143131
{
144132
"text": " to see your changes",
145133
"opData": {
146-
"id": 7,
134+
"id": 5,
147135
"type": "insert",
148-
"id": "adamhenderson",
149-
"timestamp": 1749215064000
136+
"uid": "kalebwilson",
137+
"timestamp": 1752615064000
150138
}
151139
},
152140
{
@@ -165,13 +153,28 @@ const model = {
165153
},
166154
{
167155
"text": "pricing page",
156+
"opData": {
157+
"id": 6,
158+
"type": "modify",
159+
"uid": "kalebwilson",
160+
"timestamp": 1752615064000
161+
},
168162
"format": [
169163
{
170164
"type": "a",
171165
"attrs": {
172166
"href": "https://www.tiny.cloud/pricing"
173167
}
174168
}
169+
],
170+
"oldFormat": [
171+
{
172+
"type": "a",
173+
"attrs": {
174+
"href": "https://www.tiny.cloud/pricing"
175+
}
176+
},
177+
"em"
175178
]
176179
},
177180
{
@@ -304,6 +307,12 @@ const model = {
304307
},
305308
{
306309
"type": "h2",
310+
"opData": {
311+
"id": 7,
312+
"type": "insert",
313+
"uid": "martincook",
314+
"timestamp": 1752576331000
315+
},
307316
"children": [
308317
{
309318
"text": "Found a bug?"
@@ -314,10 +323,31 @@ const model = {
314323
"type": "p",
315324
"children": [
316325
{
317-
"text": "If you believe you have found a bug please create an issue on the "
326+
"text": " ",
327+
"opData": {
328+
"id": 7,
329+
"type": "remove",
330+
"uid": "martincook",
331+
"timestamp": 1752576331000
332+
}
333+
},
334+
{
335+
"text": "If you believe you have found a bug please create an issue on the ",
336+
"opData": {
337+
"id": 7,
338+
"type": "insert",
339+
"uid": "martincook",
340+
"timestamp": 1752576331000
341+
}
318342
},
319343
{
320344
"text": "GitHub repo",
345+
"opData": {
346+
"id": 7,
347+
"type": "insert",
348+
"uid": "martincook",
349+
"timestamp": 1752576331000
350+
},
321351
"format": [
322352
{
323353
"type": "a",
@@ -328,7 +358,13 @@ const model = {
328358
]
329359
},
330360
{
331-
"text": " to report it to the developers."
361+
"text": " to report it to the developers.",
362+
"opData": {
363+
"id": 7,
364+
"type": "insert",
365+
"uid": "martincook",
366+
"timestamp": 1752576331000
367+
}
332368
}
333369
]
334370
},
@@ -380,29 +416,21 @@ const model = {
380416
}
381417
]
382418
}
383-
],
384-
"history": {}
385-
}
386-
387-
const fetch_users = (ids) => {
388-
return new Promise((resolve, reject) => {
389-
const users = ids.map(id => userDb[id]);
390-
if (users.length > 0) {
391-
resolve(users);
392-
} else {
393-
reject(new Error('No users found'));
394-
}
395-
});
396-
}
419+
]
420+
};
397421

398422
tinymce.init({
399423
selector: 'textarea#suggested-edits',
400424
height: 500,
401-
plugins: 'suggestededits',
402-
toolbar: 'suggestededits',
403-
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
404-
suggestededits_content: 'model',
425+
plugins: 'suggestededits advlist anchor autolink code charmap emoticons fullscreen help image link lists media preview searchreplace table',
426+
toolbar: 'undo redo | suggestededits | styles fontsizeinput | bold italic | align bullist numlist | table link image | code',
427+
user_id: 'kalebwilson',
428+
fetch_users: (userIds) => Promise.all(userIds
429+
.map((userId) => new Promise((resolve) =>
430+
resolve(userDb[userId] || { id: userId }))
431+
)),
432+
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
405433
suggestededits_model: model,
406-
user_id: 'michaelcook',
407-
fetch_users,
434+
suggestededits_content: 'html',
435+
suggestededits_access: 'full'
408436
});

0 commit comments

Comments
 (0)