Skip to content

Commit 5ab8976

Browse files
MitchC1999MitchC1999
committed
DOC-3251: Update option examples
1 parent a4956f6 commit 5ab8976

File tree

11 files changed

+175
-665
lines changed

11 files changed

+175
-665
lines changed

‎modules/ROOT/examples/live-demos/full-featured/example.js‎

Lines changed: 0 additions & 457 deletions
This file was deleted.

‎modules/ROOT/partials/configuration/fetch_users.adoc‎

Lines changed: 24 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -14,42 +14,39 @@ A **required callback function** that fetches user data. This function is called
1414
.Example: using `fetch_users` option
1515
[source,javascript]
1616
----
17+
const API_URL = 'https://demouserdirectory.tiny.cloud/v1/users';
18+
1719
tinymce.init({
18-
selector: '#editor',
19-
user_id: 'alextaylor',
20+
selector: 'textarea',
21+
user_id: 'james-wilson',
2022
fetch_users: (userIds) => Promise.all(userIds
2123
.map((userId) =>
22-
fetch(`/users/${userId}`) // Fetch user data from the server
23-
.then((response) => response.json())
24-
.catch(() => ({ id: userId })) // Still return a valid user object even if the fetch fails
25-
)),
24+
fetch(`${API_URL}/${userId}`)
25+
.then((response) => response.json())
26+
.catch(() => ({ id: userId })))),
2627
});
2728
----
2829

2930
.Example: returning user array with validation
3031
[source,javascript]
3132
----
33+
const API_URL = 'https://demouserdirectory.tiny.cloud/v1/users';
34+
3235
tinymce.init({
33-
selector: '#editor',
34-
user_id: 'alextaylor',
35-
fetch_users: async (userIds) => {
36-
const users = await fetch('/users', {
37-
method: 'POST',
38-
headers: { 'Content-Type': 'application/json' },
39-
body: JSON.stringify({ userIds })
40-
})
41-
.then((response) => response.json())
42-
.catch(() =>
43-
userIds.map((userId) =>
44-
({ id: userId }) // Still returns valid users even if the fetch fails
45-
)
46-
);
47-
48-
return userIds.map(
49-
(userId) =>
50-
users.find((user) => user.id === userId)
51-
|| ({ id: userId }) // Still returns a valid user even if it wasn't returned from the server
52-
)
53-
}
36+
selector: 'textarea',
37+
user_id: 'james-wilson',
38+
fetch_users: async (userIds) => {
39+
const users = await Promise.all(userIds
40+
.map((userId) =>
41+
fetch(`${API_URL}/${userId}`)
42+
.then((response) => response.json())
43+
.catch(() => ({ id: userId }))));
44+
45+
return userIds.map(
46+
(userId) =>
47+
users.find((user) => user.id === userId)
48+
|| ({ id: userId }) // Still returns a valid user even if it wasn't returned from the server
49+
);
50+
},
5451
});
5552
----

‎modules/ROOT/partials/configuration/mentions_fetch.adoc‎

Lines changed: 41 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -15,29 +15,25 @@ For information on the user properties to pass to the success callback for the a
1515

1616
[source,js]
1717
----
18-
let usersRequest = null;
18+
const API_URL = 'https://demouserdirectory.tiny.cloud/v1/users';
19+
20+
const mentions_fetch = async (query, success) => {
21+
const searchPhrase = query.term.toLowerCase();
22+
await fetch(`${API_URL}?q=${encodeURIComponent(searchPhrase)}`)
23+
.then((response) => response.json())
24+
.then((users) => success(users.data.map((userInfo) => ({
25+
id: userInfo.id,
26+
name: userInfo.name,
27+
image: userInfo.avatar,
28+
description: userInfo.custom.role
29+
}))))
30+
.catch((error) => console.log(error));
31+
};
1932
2033
tinymce.init({
2134
selector: 'textarea',
2235
plugins: 'mentions',
23-
mentions_fetch: (query, success) => {
24-
// Fetch your full user list from the server and cache locally
25-
if (usersRequest === null) {
26-
usersRequest = fetch('/users');
27-
}
28-
usersRequest.then((users) => {
29-
// `query.term` is the text the user typed after the '@'
30-
users = users.filter((user) => {
31-
return user.name.toLowerCase().includes(query.term.toLowerCase());
32-
});
33-
34-
users = users.slice(0, 10);
35-
36-
// Where the user object must contain the properties `id` and `name`
37-
// but you could additionally include anything else you deem useful.
38-
success(users);
39-
});
40-
}
36+
mentions_fetch
4137
});
4238
----
4339

@@ -50,31 +46,34 @@ The `+success+` callback can be passed an optional array of extra items. When cl
5046

5147
[source,js]
5248
----
49+
const API_URL = 'https://demouserdirectory.tiny.cloud/v1/users';
50+
51+
const mentions_fetch = async (query, success) => {
52+
const searchPhrase = query.term.toLowerCase();
53+
await fetch(`${API_URL}?q=${encodeURIComponent(searchPhrase)}`)
54+
.then((response) => response.json())
55+
.then((users) => {
56+
const mentions = users.data.map((userInfo) => ({
57+
id: userInfo.id,
58+
name: userInfo.name,
59+
image: userInfo.avatar,
60+
description: userInfo.custom.role
61+
...(query.meta && query.meta.email)
62+
? { email: userInfo.custom.email }
63+
: {}
64+
}));
65+
const extras = [{
66+
text: 'Include email...',
67+
meta: { email: true }
68+
}];
69+
success(mentions, extras);
70+
})
71+
.catch((error) => console.log(error));
72+
};
73+
5374
tinymce.init({
5475
selector: 'textarea',
5576
plugins: 'mentions',
56-
mentions_fetch: (query, success) => {
57-
// query.term is the text the user typed after the '@'
58-
let url = '/users?query=' + query.term;
59-
const isFullTextSearch = query.meta && query.meta.fullTextSearch;
60-
if (isFullTextSearch) {
61-
url += '&full=true'
62-
}
63-
64-
// Extras are shown at the end of the list and will reload the menu
65-
// by passing the meta to the fetch function
66-
const extras = isFullTextSearch ? [ ] : [
67-
{
68-
text: 'Full user search...',
69-
meta: { fullTextSearch: true }
70-
}
71-
];
72-
73-
fetch(url).then((users) => {
74-
// Where the user object must contain the properties `id` and `name`
75-
// but you could additionally include anything else you deem useful.
76-
success(users, extras);
77-
});
78-
}
77+
mentions_fetch
7978
});
8079
----

‎modules/ROOT/partials/configuration/mentions_menu_complete.adoc‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,20 @@ This option overrides the default logic for inserting the mention into the edito
99

1010
[source,js]
1111
----
12+
const API_URL = 'https://demouserdirectory.tiny.cloud/v1/users';
13+
14+
const mentions_menu_complete = (editor, userInfo) => {
15+
const span = editor.getDoc().createElement('span');
16+
span.className = 'mymention';
17+
span.setAttribute('data-mention-id', userInfo.id);
18+
span.appendChild(editor.getDoc().createTextNode('@' + userInfo.name));
19+
return span;
20+
};
21+
1222
tinymce.init({
1323
selector: 'textarea',
1424
plugins: 'mentions',
1525
mentions_selector: 'span.mymention',
16-
mentions_menu_complete: (editor, userInfo) => {
17-
const span = editor.getDoc().createElement('span');
18-
span.className = 'mymention';
19-
// store the user id in the mention so it can be identified later
20-
span.setAttribute('data-mention-id', userInfo.id);
21-
span.appendChild(editor.getDoc().createTextNode('@' + userInfo.name));
22-
return span;
23-
}
26+
mentions_menu_complete
2427
});
2528
----

‎modules/ROOT/partials/configuration/mentions_menu_hover.adoc‎

Lines changed: 23 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -9,31 +9,30 @@ This option enables you to provide an element to present next to the menu item b
99

1010
[source,js]
1111
----
12-
const userRequest = {};
12+
const API_URL = 'https://demouserdirectory.tiny.cloud/v1/users';
13+
14+
const createCard = (userInfo) => {
15+
const div = document.createElement('div');
16+
div.innerHTML = (
17+
'<div class="card">' +
18+
'<img class="avatar" src="' + userInfo.image + '">' +
19+
'<h1>' + userInfo.name + '</h1>' +
20+
'<p>' + userInfo.description + '</p>' +
21+
'</div>'
22+
);
23+
return div;
24+
};
25+
26+
const mentions_menu_hover = async (userInfo, success) => {
27+
const card = createCard(userInfo);
28+
success(card);
29+
};
1330
1431
tinymce.init({
1532
selector: 'textarea',
1633
plugins: 'mentions',
17-
mentions_menu_hover: (userInfo, success) => {
18-
// request more information about the user from the server and cache it locally
19-
if (!userRequest[userInfo.id]) {
20-
userRequest[userInfo.id] = fetch('/user?id=' + userInfo.id);
21-
}
22-
userRequest[userInfo.id].then((userDetail) => {
23-
const div = document.createElement('div');
24-
25-
div.innerHTML = (
26-
'<div>' +
27-
'<h1>' + userDetail.fullName + '</h1>' +
28-
'<img src="' + userDetail.image + '" ' +
29-
'style="width: 50px; height: 50px; float: left;"/>' +
30-
'<p>' + userDetail.description + '</p>' +
31-
'</div>'
32-
);
33-
34-
success(div);
35-
});
36-
}
34+
mentions_selector: '.mymention',
35+
mentions_menu_hover
3736
});
3837
----
3938

@@ -45,18 +44,11 @@ If `+mentions_menu_hover+` is resolved with an object specifying the type and us
4544

4645
[source,js]
4746
----
48-
const userRequest = {};
4947
tinymce.init({
5048
selector: 'textarea',
5149
plugins: 'mentions',
52-
mentions_menu_hover: (userInfo, success) => {
53-
// request more information about the user from the server and cache it locally
54-
if (!userRequest[userInfo.id]) {
55-
userRequest[userInfo.id] = fetch('/user?id=' + userInfo.id);
56-
}
57-
userRequest[userInfo.id].then((userDetail) => {
58-
success({ type: 'profile', user: userDetail });
59-
});
60-
}
50+
mentions_selector: '.mymention',
51+
mentions_menu_hover: (userInfo, success) =>
52+
success({ type: 'profile', user: userInfo })
6153
});
6254
----

‎modules/ROOT/partials/configuration/mentions_select.adoc‎

Lines changed: 51 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -9,40 +9,41 @@ This option enables a hover card to be presented when a user hovers over a menti
99

1010
[source,js]
1111
----
12-
const userRequest = {};
12+
const API_URL = 'https://demouserdirectory.tiny.cloud/v1/users';
13+
14+
const createCard = (userInfo) => {
15+
const div = document.createElement('div');
16+
div.innerHTML = (
17+
'<div class="card">' +
18+
'<img class="avatar" src="' + userInfo.image + '">' +
19+
'<h1>' + userInfo.name + '</h1>' +
20+
'<p>' + userInfo.description + '</p>' +
21+
'</div>'
22+
);
23+
return div;
24+
};
25+
26+
const mentions_select = async (mention, success) => {
27+
const id = mention.getAttribute('data-mention-id');
28+
await fetch(`${API_URL}/${id}`)
29+
.then((response) => response.json())
30+
.then((userInfo) => {
31+
const card = createCard({
32+
id: userInfo.id,
33+
name: userInfo.name,
34+
image: userInfo.avatar,
35+
description: userInfo.custom.role
36+
});
37+
success(card);
38+
})
39+
.catch((error) => console.error(error));
40+
};
1341
1442
tinymce.init({
1543
selector: 'textarea',
1644
plugins: 'mentions',
17-
mentions_selector: 'span.mymention',
18-
mentions_menu_complete: (editor, userInfo) => {
19-
const span = editor.getDoc().createElement('span');
20-
span.className = 'mymention';
21-
span.setAttribute('data-mention-id', userInfo.id);
22-
span.appendChild(editor.getDoc().createTextNode('@' + userInfo.name));
23-
return span;
24-
},
25-
mentions_select: (mention, success) => {
26-
// `mention` is the element we previously created with `mentions_menu_complete`
27-
// in this case we have chosen to store the id as an attribute
28-
const id = mention.getAttribute('data-mention-id');
29-
// request more information about the user from the server and cache locally
30-
if (!userRequest[id]) {
31-
userRequest[id] = fetch('/user?id=' + id);
32-
}
33-
userRequest[id].then((userDetail) => {
34-
const div = document.createElement('div');
35-
div.innerHTML = (
36-
'<div>' +
37-
'<h1>' + userDetail.fullName + '</h1>' +
38-
'<img src="' + userDetail.image + '" ' +
39-
'style="width: 50px; height: 50px; float: left;"/>' +
40-
'<p>' + userDetail.description + '</p>' +
41-
'</div>'
42-
);
43-
success(div);
44-
});
45-
}
45+
mentions_selector: '.mymention',
46+
mentions_select
4647
});
4748
----
4849

@@ -54,29 +55,28 @@ If `+mentions_select+` is resolved with an object specifying the type and user d
5455

5556
[source,js]
5657
----
57-
const userRequest = {};
58+
const API_URL = 'https://demouserdirectory.tiny.cloud/v1/users';
59+
60+
const mentions_select = async (mention, success) => {
61+
const id = mention.getAttribute('data-mention-id');
62+
await fetch(`${API_URL}/${id}`)
63+
.then((response) => response.json())
64+
.then((userInfo) => {
65+
const user = {
66+
id: userInfo.id,
67+
name: userInfo.name,
68+
image: userInfo.avatar,
69+
description: userInfo.custom.role
70+
};
71+
success({ type: 'profile', user });
72+
})
73+
.catch((error) => console.error(error));
74+
};
75+
5876
tinymce.init({
5977
selector: 'textarea',
6078
plugins: 'mentions',
61-
mentions_selector: 'span.mymention',
62-
mentions_menu_complete: (editor, userInfo) => {
63-
const span = editor.getDoc().createElement('span');
64-
span.className = 'mymention';
65-
span.setAttribute('data-mention-id', userInfo.id);
66-
span.appendChild(editor.getDoc().createTextNode('@' + userInfo.name));
67-
return span;
68-
},
69-
mentions_select: (mention, success) => {
70-
// `mention` is the element we previously created with `mentions_menu_complete`
71-
// in this case we have chosen to store the id as an attribute
72-
const id = mention.getAttribute('data-mention-id');
73-
// request more information about the user from the server and cache locally
74-
if (!userRequest[id]) {
75-
userRequest[id] = fetch('/user?id=' + id);
76-
}
77-
userRequest[id].then((userDetail) => {
78-
success({ type: 'profile', user: userDetail });
79-
});
80-
}
79+
mentions_selector: '.mymention',
80+
mentions_select
8181
});
8282
----

0 commit comments

Comments
 (0)