' +
+ '
' +
+ '
'
+ );
+ return div;
+};
+
+const mentions_select = async (mention, success) => {
+ const id = mention.getAttribute('data-mention-id');
+ await fetch(`${API_URL}/${id}`)
+ .then((response) => response.json())
+ .then((userInfo) => {
+ const card = createCard({
+ id: userInfo.id,
+ name: userInfo.name,
+ image: userInfo.avatar,
+ description: userInfo.custom.role
});
- }
- };
-
- /********************************
- * Tiny Comments functions *
- * (must call "done" or "fail") *
- ********************************/
+ success(card);
+ })
+ .catch((error) => console.error(error));
+};
- const tinycomments_create = (req, done, fail) => {
+const mentions_menu_hover = async (userInfo, success) => {
+ const card = createCard(userInfo);
+ success(card);
+};
+
+const tinycomments_create = (req, done, fail) => {
if (req.content === 'fail') {
fail(new Error('Something has gone wrong...'));
} else {
@@ -208,7 +110,9 @@ import ('https://cdn.jsdelivr.net/npm/@faker-js/faker@9/dist/index.min.js').then
uid,
comments: [{
uid,
- ...getAuthorInfo(currentUid),
+ author: user_id,
+ authorName: 'James Wilson',
+ authorAvatar: 'https://sneak-preview.tiny.cloud/demouserdirectory/images/employee_james-wilson_128_52f19412.jpg',
content: req.content,
createdAt: req.createdAt,
modifiedAt: req.createdAt
@@ -218,160 +122,159 @@ import ('https://cdn.jsdelivr.net/npm/@faker-js/faker@9/dist/index.min.js').then
}
};
- const tinycomments_reply = (req, done) => {
- const replyUid = 'annotation-' + randomString();
- conversationDb[req.conversationUid].comments.push({
- uid: replyUid,
- ...getAuthorInfo(currentUid),
- content: req.content,
- createdAt: req.createdAt,
- modifiedAt: req.createdAt
- });
- setTimeout(() => done({ commentUid: replyUid }), fakeDelay);
- };
+const tinycomments_reply = (req, done) => {
+ const replyUid = 'annotation-' + randomString();
+ conversationDb[req.conversationUid].comments.push({
+ uid: replyUid,
+ author: user_id,
+ authorName: 'James Wilson',
+ authorAvatar: 'https://sneak-preview.tiny.cloud/demouserdirectory/images/employee_james-wilson_128_52f19412.jpg',
+ content: req.content,
+ createdAt: req.createdAt,
+ modifiedAt: req.createdAt
+ });
+ setTimeout(() => done({ commentUid: replyUid }), fakeDelay);
+};
- const tinycomments_delete = (req, done) => {
- if (currentUid === adminUid) { // Replace wth your own logic, e.g. check if user created the conversation
- delete conversationDb[req.conversationUid];
- setTimeout(() => done({ canDelete: true }), fakeDelay);
- } else {
- setTimeout(() => done({ canDelete: false, reason: 'Must be admin user' }), fakeDelay);
- }
- };
+const tinycomments_delete = (req, done) => {
+ if (user_id === collaborator_id) { // Replace wth your own logic, e.g. check if user created the conversation
+ delete conversationDb[req.conversationUid];
+ setTimeout(() => done({ canDelete: true }), fakeDelay);
+ } else {
+ setTimeout(() => done({ canDelete: false, reason: 'Must be admin user' }), fakeDelay);
+ }
+};
- const tinycomments_resolve = (req, done) => {
- const conversation = conversationDb[req.conversationUid];
- if (currentUid === conversation.comments[0].author) { // Replace wth your own logic, e.g. check if user has admin priveleges
- delete conversationDb[req.conversationUid];
- setTimeout(() => done({ canResolve: true }), fakeDelay);
- } else {
- setTimeout(() => done({ canResolve: false, reason: 'Must be conversation author' }), fakeDelay);
+const tinycomments_resolve = (req, done) => {
+ const conversation = conversationDb[req.conversationUid];
+ if (user_id === conversation.comments[0].author) { // Replace wth your own logic, e.g. check if user has admin priveleges
+ delete conversationDb[req.conversationUid];
+ setTimeout(() => done({ canResolve: true }), fakeDelay);
+ } else {
+ setTimeout(() => done({ canResolve: false, reason: 'Must be conversation author' }), fakeDelay);
+ }
+};
+
+const tinycomments_delete_comment = (req, done) => {
+ const oldcomments = conversationDb[req.conversationUid].comments;
+ let reason = 'Comment not found';
+
+ const newcomments = oldcomments.filter((comment) => {
+ if (comment.uid === req.commentUid) { // Found the comment to delete
+ if (user_id === comment.author) { // Replace with your own logic, e.g. check if user has admin privileges
+ return false; // Remove the comment
+ } else {
+ reason = 'Not authorised to delete this comment'; // Update reason
+ }
}
- };
+ return true; // Keep the comment
+ });
- const tinycomments_delete_comment = (req, done) => {
- const oldcomments = conversationDb[req.conversationUid].comments;
- let reason = 'Comment not found';
+ if (newcomments.length === oldcomments.length) {
+ setTimeout(() => done({ canDelete: false, reason }), fakeDelay);
+ } else {
+ conversationDb[req.conversationUid].comments = newcomments;
+ setTimeout(() => done({ canDelete: true }), fakeDelay);
+ }
+};
- const newcomments = oldcomments.filter((comment) => {
- if (comment.uid === req.commentUid) { // Found the comment to delete
- if (currentUid === comment.author) { // Replace with your own logic, e.g. check if user has admin privileges
- return false; // Remove the comment
- } else {
- reason = 'Not authorised to delete this comment'; // Update reason
- }
+const tinycomments_edit_comment = (req, done) => {
+ const oldcomments = conversationDb[req.conversationUid].comments;
+ let reason = 'Comment not found';
+ let canEdit = false;
+
+ const newcomments = oldcomments.map((comment) => {
+ if (comment.uid === req.commentUid) { // Found the comment to delete
+ if (user_id === comment.author) { // Replace with your own logic, e.g. check if user has admin privileges
+ canEdit = true; // User can edit the comment
+ return { ...comment, content: req.content, modifiedAt: new Date().toISOString() }; // Update the comment
+ } else {
+ reason = 'Not authorised to edit this comment'; // Update reason
}
- return true; // Keep the comment
- });
- if (newcomments.length === oldcomments.length) {
- setTimeout(() => done({ canDelete: false, reason }), fakeDelay);
- } else {
- conversationDb[req.conversationUid].comments = newcomments;
- setTimeout(() => done({ canDelete: true }), fakeDelay);
}
- };
+ return comment; // Keep the comment
+ });
- const tinycomments_edit_comment = (req, done) => {
- const oldcomments = conversationDb[req.conversationUid].comments;
- let reason = 'Comment not found';
- let canEdit = false;
+ if (canEdit) {
+ conversationDb[req.conversationUid].comments = newcomments;
+ setTimeout(() => done({ canEdit }), fakeDelay);
+ } else {
+ setTimeout(() => done({ canEdit, reason }), fakeDelay);
+ }
+};
- const newcomments = oldcomments.map((comment) => {
- if (comment.uid === req.commentUid) { // Found the comment to delete
- if (currentUid === comment.author) { // Replace with your own logic, e.g. check if user has admin privileges
- canEdit = true; // User can edit the comment
- return { ...comment, content: req.content, modifiedAt: new Date().toISOString() }; // Update the comment
- } else {
- reason = 'Not authorised to edit this comment'; // Update reason
- }
+const tinycomments_delete_all = (req, done) => {
+ const conversation = conversationDb[req.conversationUid];
+ if (user_id === conversation.comments[0].author) { // Replace wth your own logic, e.g. check if user has admin priveleges
+ delete conversationDb[req.conversationUid];
+ setTimeout(() => done({ canDelete: true }), fakeDelay);
+ } else {
+ setTimeout(() => done({ canDelete: false, reason: 'Must be conversation author' }), fakeDelay);
+ }
+};
+
+const tinycomments_lookup = (req, done) => {
+ setTimeout(() => {
+ done({
+ conversation: {
+ uid: conversationDb[req.conversationUid].uid,
+ comments: [...conversationDb[req.conversationUid].comments]
}
- return comment; // Keep the comment
});
+ }, fakeDelay);
+};
- if (canEdit) {
- conversationDb[req.conversationUid].comments = newcomments;
- setTimeout(() => done({ canEdit }), fakeDelay);
- } else {
- setTimeout(() => done({ canEdit, reason }), fakeDelay);
+const tinycomments_fetch = (conversationUids, done) => {
+ const fetchedConversations = {};
+ conversationUids.forEach((uid) => {
+ const conversation = conversationDb[uid];
+ if (conversation) {
+ fetchedConversations[uid] = {...conversation};
}
- };
+ });
+ setTimeout(() => done({ conversations: fetchedConversations }), fakeDelay);
+};
- const tinycomments_delete_all = (req, done) => {
- const conversation = conversationDb[req.conversationUid];
- if (currentUid === conversation.comments[0].author) { // Replace wth your own logic, e.g. check if user has admin priveleges
- delete conversationDb[req.conversationUid];
- setTimeout(() => done({ canDelete: true }), fakeDelay);
- } else {
- setTimeout(() => done({ canDelete: false, reason: 'Must be conversation author' }), fakeDelay);
+tinymce.init({
+ selector: 'textarea#comments-callback-with-mentions',
+ license_key: 'gpl',
+ toolbar: 'addcomment showcomments code | bold italic underline',
+ menubar: 'file edit view insert format tools tc help',
+ menu: {
+ tc: {
+ title: 'TinyComments',
+ items: 'addcomment showcomments deleteallconversations'
}
- };
+ },
+ plugins: [ 'tinycomments', 'mentions', 'help', 'code', 'quickbars', 'link', 'lists', 'image' ],
+ quickbars_selection_toolbar: 'alignleft aligncenter alignright | addcomment showcomments',
+ quickbars_image_toolbar: 'alignleft aligncenter alignright | rotateleft rotateright | imageoptions',
+
+ tinycomments_mode: 'callback',
+ tinycomments_mentions_enabled: true,
+ sidebar_show: 'showcomments',
+ tinycomments_create,
+ tinycomments_reply,
+ tinycomments_delete,
+ tinycomments_resolve,
+ tinycomments_delete_all,
+ tinycomments_lookup,
+ tinycomments_delete_comment,
+ tinycomments_edit_comment,
+ tinycomments_fetch,
- const tinycomments_lookup = (req, done) => {
- setTimeout(() => {
- done({
- conversation: {
- uid: conversationDb[req.conversationUid].uid,
- comments: [...conversationDb[req.conversationUid].comments]
- }
- });
- }, fakeDelay);
- };
+ mentions_item_type: 'profile',
+ mentions_min_chars: 0,
+ mentions_selector: '.mymention',
+ mentions_fetch,
+ mentions_menu_hover,
+ mentions_menu_complete,
+ mentions_select,
- const tinycomments_fetch = (conversationUids, done) => {
- const fetchedConversations = {};
- conversationUids.forEach((uid) => {
- const conversation = conversationDb[uid];
- if (conversation) {
- fetchedConversations[uid] = {...conversation};
- }
- });
- setTimeout(() => done({ conversations: fetchedConversations }), fakeDelay);
- };
-
- tinymce.init({
- selector: 'textarea#comments-callback-with-mentions',
- license_key: 'gpl',
- toolbar: 'addcomment showcomments code | bold italic underline',
- menubar: 'file edit view insert format tools tc help',
- menu: {
- tc: {
- title: 'TinyComments',
- items: 'addcomment showcomments deleteallconversations'
- }
- },
- plugins: [ 'tinycomments', 'mentions', 'help', 'code', 'quickbars', 'link', 'lists', 'image' ],
- quickbars_selection_toolbar: 'alignleft aligncenter alignright | addcomment showcomments',
- quickbars_image_toolbar: 'alignleft aligncenter alignright | rotateleft rotateright | imageoptions',
- tinycomments_mentions_enabled: true,
- sidebar_show: 'showcomments',
-
- mentions_item_type: 'profile',
- mentions_min_chars: 0,
- mentions_selector: '.mymention',
- mentions_fetch,
- mentions_menu_hover,
- mentions_menu_complete,
- mentions_select,
-
- tinycomments_mode: 'callback',
- user_id: currentUser.id,
- fetch_users: (userIds) => {
- return Promise.all(
- userIds.map(
- (userId) => new Promise(
- (resolve) => resolve(userDb[userId] || { id: userId })
- )
- )
- )
- },
- tinycomments_create,
- tinycomments_reply,
- tinycomments_delete,
- tinycomments_resolve,
- tinycomments_delete_all,
- tinycomments_lookup,
- tinycomments_delete_comment,
- tinycomments_edit_comment,
- tinycomments_fetch,
- });
-});
+ user_id,
+ fetch_users: (userIds) => Promise.all(userIds
+ .map((userId) =>
+ fetch(`${API_URL}/${userId}`)
+ .then((response) => response.json())
+ .catch(() => ({ id: userId }))))
+});
\ No newline at end of file
diff --git a/modules/ROOT/examples/live-demos/comments-callback-with-mentions/style.css b/modules/ROOT/examples/live-demos/comments-callback-with-mentions/style.css
new file mode 100644
index 0000000000..264b0c9223
--- /dev/null
+++ b/modules/ROOT/examples/live-demos/comments-callback-with-mentions/style.css
@@ -0,0 +1,45 @@
+span.mymention {
+ color: gray !important;
+}
+
+div.card,
+.tox div.card {
+ width: 240px;
+ background: white;
+ border: 1px solid #ccc;
+ border-radius: 3px;
+ box-shadow: 0 4px 8px 0 rgba(34, 47, 62, .1);
+ padding: 8px;
+ font-size: 14px;
+ font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+}
+
+div.card::after,
+.tox div.card::after {
+ content: "";
+ clear: both;
+ display: table;
+}
+
+div.card h1,
+.tox div.card h1 {
+ font-size: 14px;
+ font-weight: bold;
+ margin: 0 0 8px;
+ padding: 0;
+ line-height: normal;
+ font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+}
+
+div.card p,
+.tox div.card p {
+ font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+}
+
+div.card img.avatar,
+.tox div.card img.avatar {
+ width: 48px;
+ height: 48px;
+ margin-right: 8px;
+ float: left;
+}
diff --git a/modules/ROOT/examples/live-demos/comments-callback/index.html b/modules/ROOT/examples/live-demos/comments-callback/index.html
index 92c933f6e6..abdeea9f22 100644
--- a/modules/ROOT/examples/live-demos/comments-callback/index.html
+++ b/modules/ROOT/examples/live-demos/comments-callback/index.html
@@ -7,7 +7,7 @@ ' + userInfo.name + '
' + + '' + userInfo.description + '
' + + 'Welcome to Tiny Comments!
Your comment is then attached to the text, exactly like this!
+Your comment is then attached to the text, exactly like this!
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.
A simple table to play with
| Product | -Cost | -Really? | -
|---|---|---|
| TinyMCE | -Free | -YES! | -
| Plupload | -Free | -YES! | -
Found a bug?
-If you think you have found a bug please create an issue on the GitHub repo to report it to the developers.
-Finally ...
-Don't forget to check out our other product Plupload, your ultimate upload solution featuring HTML5 upload support.
Thanks for supporting TinyMCE! We hope it helps you and your users create great content.
All the best from the TinyMCE team.
Welcome to the TinyMCE editor demo!
-Got questions or need help?
--
-
- Our documentation is a great resource for learning how to configure TinyMCE. -
- Have a specific question? Try the
tinymcetag at Stack Overflow.
- - We also offer enterprise grade support as part of TinyMCE premium plans. -
A simple table to play with
-| Product | -Cost | -Really? | -
|---|---|---|
| TinyMCE | -Free | -YES! | -
| Plupload | -Free | -YES! | -
Found a bug?
-If you think you have found a bug please create an issue on the GitHub repo to report it to the developers.
-Finally ...
-Don't forget to check out our other product Plupload, your ultimate upload solution featuring HTML5 upload support.
-Thanks for supporting TinyMCE! We hope it helps you and your users create great content.
All the best from the TinyMCE team.
Welcome to the TinyMCE editor demo!
-Got questions or need help?
--
-
- Our documentation is a great resource for learning how to configure TinyMCE. -
- Have a specific question? Try the
tinymcetag at Stack Overflow.
- - We also offer enterprise grade support as part of TinyMCE premium plans. -
A simple table to play with
-| Product | -Cost | -Really? | -
|---|---|---|
| TinyMCE | -Free | -YES! | -
| Plupload | -Free | -YES! | -
Found a bug?
-If you think you have found a bug please create an issue on the GitHub repo to report it to the developers.
-Finally ...
-Don't forget to check out our other product Plupload, your ultimate upload solution featuring HTML5 upload support.
-Thanks for supporting TinyMCE! We hope it helps you and your users create great content.
All the best from the TinyMCE team.
Got questions or need help?
Please try out this demo of our Tiny Comments premium plugin with @mentions support.
+-
+
- Highlight the content you want to comment on. +
- Click the Add Comment icon in the toolbar. +
- Type your comment into the text field at the bottom of the Comment sidebar, and use
@followed by a name to mention a collaborator.
+ - Click Comment. +
Your comment is then attached to the text, exactly like this! You can @Mia Andersson directly in your comments to notify them.
+A simple table to play with
Character strings to demonstrate some of the Advanced Typography plugin’s features
Select the characters in the list below and choose Tools → Typography → Enhance.
diff --git a/modules/ROOT/examples/live-demos/full-featured/index.js b/modules/ROOT/examples/live-demos/full-featured/index.js index c9721b1615..c29bb7a30e 100644 --- a/modules/ROOT/examples/live-demos/full-featured/index.js +++ b/modules/ROOT/examples/live-demos/full-featured/index.js @@ -1,621 +1,735 @@ const fetchApi = import('https://cdn.skypack.dev/@microsoft/fetch-event-source@2.0.1') .then((module) => module.fetchEventSource); - - -/* Script to import faker.js for generating random data for demonstration purposes */ -tinymce.ScriptLoader.loadScripts(['https://cdn.jsdelivr.net/npm/faker@5/dist/faker.min.js']).then(() => { - - /* - ** This is to simulate requesting information from a server. - ** - ** It has 2 functions: - ** fetchUsers() - returns a complete list of users' ids and names. - ** fetchUser(id) - returns the full information about a single user id. - ** - ** Both of these functions have a slight delay to simulate a server request. - */ - const fakeServer = (() => { - /* Some user profile images for our fake server (original source: unsplash) */ - const images = [ - 'Abdullah_Hadley', 'Abriella_Bond', 'Addilynn_Dodge', 'Adolfo_Hess', 'Alejandra_Stallings', 'Alfredo_Schafer', 'Aliah_Pitts', 'Amilia_Luna', 'Andi_Lane', 'Angelina_Winn', 'Arden_Dean', 'Ariyanna_Hicks', 'Asiya_Wolff', 'Brantlee_Adair', 'Carys_Metz', 'Daniela_Dewitt', 'Della_Case', 'Dianna_Smiley', 'Eliana_Stout', 'Elliana_Palacios', 'Fischer_Garland', 'Glen_Rouse', 'Grace_Gross', 'Heath_Atwood', 'Jakoby_Roman', 'Judy_Sewell', 'Kaine_Hudson', 'Kathryn_Mcgee', 'Kayley_Dwyer', 'Korbyn_Colon', 'Lana_Steiner', 'Loren_Spears', 'Lourdes_Browning', 'Makinley_Oneill', 'Mariana_Dickey', 'Miyah_Myles', 'Moira_Baxter', 'Muhammed_Sizemore', 'Natali_Craig', 'Nevaeh_Cates', 'Oscar_Khan', 'Rodrigo_Hawkins', 'Ryu_Duke', 'Tripp_Mckay', 'Vivianna_Kiser', 'Yamilet_Booker', 'Yarely_Barr', 'Zachary_Albright', 'Zahir_Mays', 'Zechariah_Burrell' - ]; - - /* Create an array of 200 random names using faker.js */ - const userNames = []; - for (let i = 0; i < 200; i++) { - userNames.push(faker.name.findName()); - } - - /* This represents a database of users on the server */ - const userDb = {}; - userNames.map((fullName) => { - const id = fullName.toLowerCase().replace(/ /g, ''); - return { - id: id, - name: fullName, - fullName: fullName, - description: faker.name.jobTitle(), - image: '{{imagesdir}}/unsplash/uifaces-unsplash-portrait-' + images[Math.floor(images.length * Math.random())] + '.jpg' +const API_URL = 'https://demouserdirectory.tiny.cloud/v1/users'; + +const user_id = 'james-wilson'; +const collaborator_id = 'mia-andersson'; + +const now = new Date(); +const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000).toISOString(); +const anhourago = new Date(now.getTime() - 60 * 60 * 1000).toISOString(); +const fakeDelay = 200; + +const randomString = () => { + return crypto.getRandomValues(new Uint32Array(1))[0].toString(36).substring(2, 14); +}; + +const conversationDb = { + 'mce-conversation_19679600221621399703915': { + uid: 'mce-conversation_19679600221621399703915', + comments: [{ + uid: 'mce-conversation_19679600221621399703915', + author: user_id, + authorName: 'James Wilson', + authorAvatar: 'https://sneak-preview.tiny.cloud/demouserdirectory/images/employee_james-wilson_128_52f19412.jpg', + content: `What do you think about this? @${collaborator_id}?`, + createdAt: yesterday, + modifiedAt: yesterday + }, { + uid: 'mce-conversation_19679600221621399703917', + author: collaborator_id, + authorName: 'Mia Andersson', + authorAvatar: 'https://sneak-preview.tiny.cloud/demouserdirectory/images/employee_mia-andersson_128_e6f9424b.jpg', + content: `I think this is a great idea @${user_id}!`, + createdAt: anhourago, + modifiedAt: anhourago, + }] + }, + 'mce-conversation_420304606321716900864126': { + uid: 'mce-conversation_420304606321716900864126', + comments: [{ + uid: 'mce-conversation_420304606321716900864126', + author: collaborator_id, + authorName: 'Mia Andersson', + authorAvatar: 'https://sneak-preview.tiny.cloud/demouserdirectory/images/employee_mia-andersson_128_e6f9424b.jpg', + content: `@${user_id} Please revise this sentence, exclamation points are unprofessional!`, + createdAt: yesterday, + modifiedAt: anhourago + }] + } +}; + +const mentions_fetch = async (query, success) => { + const searchPhrase = query.term.toLowerCase(); + await fetch(`${API_URL}?q=${encodeURIComponent(searchPhrase)}`) + .then((response) => response.json()) + .then((users) => success(users.data.map((userInfo) => ({ + id: userInfo.id, + name: userInfo.name, + image: userInfo.avatar, + description: userInfo.custom.role + })))) + .catch((error) => console.log(error)); +}; + +const mentions_menu_complete = (editor, userInfo) => { + const span = editor.getDoc().createElement('span'); + span.className = 'mymention'; + span.setAttribute('data-mention-id', userInfo.id); + span.appendChild(editor.getDoc().createTextNode('@' + userInfo.name)); + return span; +}; + +const createCard = (userInfo) => { + const div = document.createElement('div'); + div.innerHTML = ( + '' +
+ '' +
+ '
'
+ );
+ return div;
+};
+
+const mentions_select = async (mention, success) => {
+ const id = mention.getAttribute('data-mention-id');
+ await fetch(`${API_URL}/${id}`)
+ .then((response) => response.json())
+ .then((userInfo) => {
+ const card = createCard({
+ id: userInfo.id,
+ name: userInfo.name,
+ image: userInfo.avatar,
+ description: userInfo.custom.role
+ });
+ success(card);
+ })
+ .catch((error) => console.error(error));
+};
+
+const mentions_menu_hover = async (userInfo, success) => {
+ const card = createCard(userInfo);
+ success(card);
+};
+
+const tinycomments_create = (req, done, fail) => {
+ if (req.content === 'fail') {
+ fail(new Error('Something has gone wrong...'));
+ } else {
+ const uid = 'annotation-' + randomString();
+ conversationDb[uid] = {
+ uid,
+ comments: [{
+ uid,
+ author: user_id,
+ authorName: 'James Wilson',
+ authorAvatar: 'https://sneak-preview.tiny.cloud/demouserdirectory/images/employee_james-wilson_128_52f19412.jpg',
+ content: req.content,
+ createdAt: req.createdAt,
+ modifiedAt: req.createdAt
+ }]
};
- }).forEach((user) => {
- userDb[user.id] = user;
- });
-
- /* This represents getting the complete list of users from the server with the details required for the mentions "profile" item */
- const fetchUsers = () => new Promise((resolve, _reject) => {
- /* simulate a server delay */
- setTimeout(() => {
- const users = Object.keys(userDb).map(id => ({
- id: id,
- name: userDb[id].name,
- image: userDb[id].image,
- description: userDb[id].description
- }));
- resolve(users);
- }, 500);
- });
-
- /* This represents requesting all the details of a single user from the server database */
- const fetchUser = (id) => new Promise((resolve, reject) => {
- /* simulate a server delay */
- setTimeout(() => {
- if (Object.prototype.hasOwnProperty.call(userDb, id)) {
- resolve(userDb[id]);
- }
- reject(`unknown user id "${id}"`);
- }, 300);
- });
-
- return {
- fetchUsers: fetchUsers,
- fetchUser: fetchUser
- };
- })();
-
- /* These are "local" caches of the data returned from the fake server */
- let usersRequest = null;
- const userRequest = {};
-
- const mentions_fetch = (query, success) => {
- /* Fetch your full user list from somewhere */
- if (usersRequest === null) {
- usersRequest = fakeServer.fetchUsers();
+ setTimeout(() => done({ conversationUid: uid }), fakeDelay);
}
- usersRequest.then((users) => {
- /* `query.term` is the text the user typed after the '@' */
- users = users.filter((user) => user.name.indexOf(query.term.toLowerCase()) !== -1);
- users = users.slice(0, 10);
-
- /* Where the user object must contain the properties `id` and `name`
- but you could additionally include anything else you deem useful. */
- success(users);
- });
};
- const mentions_menu_hover = (userInfo, success) => {
- /* Request more information about the user from the server and cache it locally */
- if (!userRequest[userInfo.id]) {
- userRequest[userInfo.id] = fakeServer.fetchUser(userInfo.id);
+const tinycomments_reply = (req, done) => {
+ const replyUid = 'annotation-' + randomString();
+ conversationDb[req.conversationUid].comments.push({
+ uid: replyUid,
+ author: user_id,
+ authorName: 'James Wilson',
+ authorAvatar: 'https://sneak-preview.tiny.cloud/demouserdirectory/images/employee_james-wilson_128_52f19412.jpg',
+ content: req.content,
+ createdAt: req.createdAt,
+ modifiedAt: req.createdAt
+ });
+ setTimeout(() => done({ commentUid: replyUid }), fakeDelay);
+};
+
+const tinycomments_delete = (req, done) => {
+ if (user_id === collaborator_id) { // Replace wth your own logic, e.g. check if user created the conversation
+ delete conversationDb[req.conversationUid];
+ setTimeout(() => done({ canDelete: true }), fakeDelay);
+ } else {
+ setTimeout(() => done({ canDelete: false, reason: 'Must be admin user' }), fakeDelay);
+ }
+};
+
+const tinycomments_resolve = (req, done) => {
+ const conversation = conversationDb[req.conversationUid];
+ if (user_id === conversation.comments[0].author) { // Replace wth your own logic, e.g. check if user has admin priveleges
+ delete conversationDb[req.conversationUid];
+ setTimeout(() => done({ canResolve: true }), fakeDelay);
+ } else {
+ setTimeout(() => done({ canResolve: false, reason: 'Must be conversation author' }), fakeDelay);
+ }
+};
+
+const tinycomments_delete_comment = (req, done) => {
+ const oldcomments = conversationDb[req.conversationUid].comments;
+ let reason = 'Comment not found';
+
+ const newcomments = oldcomments.filter((comment) => {
+ if (comment.uid === req.commentUid) { // Found the comment to delete
+ if (user_id === comment.author) { // Replace with your own logic, e.g. check if user has admin privileges
+ return false; // Remove the comment
+ } else {
+ reason = 'Not authorised to delete this comment'; // Update reason
+ }
}
- userRequest[userInfo.id].then(userDetail => {
- const div = document.createElement('div');
-
- div.innerHTML = (
- '' + userInfo.name + '
' + + '' + userInfo.description + '
' + + '' +
- '
' +
- '
'
- );
-
- success(div);
- });
- };
+ return true; // Keep the comment
+ });
- const mentions_menu_complete = (editor, userInfo) => {
- const span = editor.getDoc().createElement('span');
- span.className = 'mymention';
- span.setAttribute('data-mention-id', userInfo.id);
- span.appendChild(editor.getDoc().createTextNode('@' + userInfo.name));
- return span;
- };
+ if (newcomments.length === oldcomments.length) {
+ setTimeout(() => done({ canDelete: false, reason }), fakeDelay);
+ } else {
+ conversationDb[req.conversationUid].comments = newcomments;
+ setTimeout(() => done({ canDelete: true }), fakeDelay);
+ }
+};
+
+const tinycomments_edit_comment = (req, done) => {
+ const oldcomments = conversationDb[req.conversationUid].comments;
+ let reason = 'Comment not found';
+ let canEdit = false;
+
+ const newcomments = oldcomments.map((comment) => {
+ if (comment.uid === req.commentUid) { // Found the comment to delete
+ if (user_id === comment.author) { // Replace with your own logic, e.g. check if user has admin privileges
+ canEdit = true; // User can edit the comment
+ return { ...comment, content: req.content, modifiedAt: new Date().toISOString() }; // Update the comment
+ } else {
+ reason = 'Not authorised to edit this comment'; // Update reason
+ }
+ }
+ return comment; // Keep the comment
+ });
- const mentions_select = (mention, success) => {
- /* `mention` is the element we previously created with `mentions_menu_complete`
- in this case we have chosen to store the id as an attribute */
- const id = mention.getAttribute('data-mention-id');
- /* Request more information about the user from the server and cache it locally */
- if (!userRequest[id]) {
- userRequest[id] = fakeServer.fetchUser(id);
+ if (canEdit) {
+ conversationDb[req.conversationUid].comments = newcomments;
+ setTimeout(() => done({ canEdit }), fakeDelay);
+ } else {
+ setTimeout(() => done({ canEdit, reason }), fakeDelay);
+ }
+};
+
+const tinycomments_delete_all = (req, done) => {
+ const conversation = conversationDb[req.conversationUid];
+ if (user_id === conversation.comments[0].author) { // Replace wth your own logic, e.g. check if user has admin priveleges
+ delete conversationDb[req.conversationUid];
+ setTimeout(() => done({ canDelete: true }), fakeDelay);
+ } else {
+ setTimeout(() => done({ canDelete: false, reason: 'Must be conversation author' }), fakeDelay);
+ }
+};
+
+const tinycomments_lookup = (req, done) => {
+ setTimeout(() => {
+ done({
+ conversation: {
+ uid: conversationDb[req.conversationUid].uid,
+ comments: [...conversationDb[req.conversationUid].comments]
+ }
+ });
+ }, fakeDelay);
+};
+
+const tinycomments_fetch = (conversationUids, done) => {
+ const fetchedConversations = {};
+ conversationUids.forEach((uid) => {
+ const conversation = conversationDb[uid];
+ if (conversation) {
+ fetchedConversations[uid] = {...conversation};
}
- userRequest[id].then((userDetail) => {
- const div = document.createElement('div');
- div.innerHTML = (
- '' + userDetail.fullName + '
' + - '' + userDetail.description + '
' + - '' +
- '' +
- '
'
- );
- success(div);
+ });
+ setTimeout(() => done({ conversations: fetchedConversations }), fakeDelay);
+};
+
+const ai_request = (request, respondWith) => {
+ respondWith.stream((signal, streamMessage) => {
+ // Adds each previous query and response as individual messages
+ const conversation = request.thread.flatMap((event) => {
+ if (event.response) {
+ return [
+ { role: "user", content: event.request.query },
+ { role: "assistant", content: event.response.data },
+ ];
+ } else {
+ return [];
+ }
});
- };
- const isSmallScreen = window.matchMedia('(max-width: 1023.5px)').matches;
-
- const ai_request = (request, respondWith) => {
- respondWith.stream((signal, streamMessage) => {
- // Adds each previous query and response as individual messages
- const conversation = request.thread.flatMap((event) => {
- if (event.response) {
- return [
- { role: "user", content: event.request.query },
- { role: "assistant", content: event.response.data },
- ];
- } else {
- return [];
- }
- });
+ // System messages provided by the plugin to format the output as HTML content.
+ const systemMessages = request.system.map((content) => ({
+ role: "system",
+ content,
+ }));
+
+ // Forms the new query sent to the API
+ const content =
+ request.context.length === 0 || conversation.length > 0
+ ? request.query
+ : `Question: ${request.query} Context: """${request.context}"""`;
+
+ const messages = [
+ ...conversation,
+ ...systemMessages,
+ { role: "user", content },
+ ];
- // System messages provided by the plugin to format the output as HTML content.
- const systemMessages = request.system.map((content) => ({
- role: "system",
- content,
- }));
-
- // Forms the new query sent to the API
- const content =
- request.context.length === 0 || conversation.length > 0
- ? request.query
- : `Question: ${request.query} Context: """${request.context}"""`;
-
- const messages = [
- ...conversation,
- ...systemMessages,
- { role: "user", content },
- ];
-
- let hasHead = false;
- let markdownHead = "";
-
- const hasMarkdown = (message) => {
- if (message.includes("`") && markdownHead !== "```") {
- const numBackticks = message.split("`").length - 1;
- markdownHead += "`".repeat(numBackticks);
- if (hasHead && markdownHead === "```") {
- markdownHead = "";
- hasHead = false;
- }
- return true;
- } else if (message.includes("html") && markdownHead === "```") {
+ let hasHead = false;
+ let markdownHead = "";
+
+ const hasMarkdown = (message) => {
+ if (message.includes("`") && markdownHead !== "```") {
+ const numBackticks = message.split("`").length - 1;
+ markdownHead += "`".repeat(numBackticks);
+ if (hasHead && markdownHead === "```") {
markdownHead = "";
- hasHead = true;
- return true;
+ hasHead = false;
}
- return false;
- };
+ return true;
+ } else if (message.includes("html") && markdownHead === "```") {
+ markdownHead = "";
+ hasHead = true;
+ return true;
+ }
+ return false;
+ };
- const requestBody = {
- model: "gpt-4o",
- temperature: 0.7,
- max_tokens: 4000,
- messages,
- stream: true,
- };
+ const requestBody = {
+ model: "gpt-4o",
+ temperature: 0.7,
+ max_tokens: 4000,
+ messages,
+ stream: true,
+ };
- const openAiOptions = {
- signal,
- method: "POST",
- headers: {
- "Content-Type": "application/json",
- Authorization: `Bearer {{ openai_proxy_token }}`,
- },
- body: JSON.stringify(requestBody),
- };
+ const openAiOptions = {
+ signal,
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer {{ openai_proxy_token }}`,
+ },
+ body: JSON.stringify(requestBody),
+ };
- const onopen = async (response) => {
- if (response) {
- const contentType = response.headers.get("content-type");
- if (response.ok && contentType?.includes("text/event-stream")) {
- return;
- } else if (contentType?.includes("application/json")) {
- const data = await response.json();
- if (data.error) {
- throw new Error(`${data.error.type}: ${data.error.message}`);
- }
+ const onopen = async (response) => {
+ if (response) {
+ const contentType = response.headers.get("content-type");
+ if (response.ok && contentType?.includes("text/event-stream")) {
+ return;
+ } else if (contentType?.includes("application/json")) {
+ const data = await response.json();
+ if (data.error) {
+ throw new Error(`${data.error.type}: ${data.error.message}`);
}
- } else {
- throw new Error("Failed to communicate with the ChatGPT API");
}
- };
+ } else {
+ throw new Error("Failed to communicate with the ChatGPT API");
+ }
+ };
- // This function passes each new message into the plugin via the `streamMessage` callback.
- const onmessage = (ev) => {
- const data = ev.data;
- if (data !== "[DONE]") {
- const parsedData = JSON.parse(data);
- const firstChoice = parsedData?.choices[0];
- const message = firstChoice?.delta?.content;
- if (message && message !== "") {
- if (!hasMarkdown(message)) {
- streamMessage(message);
- }
+ // This function passes each new message into the plugin via the `streamMessage` callback.
+ const onmessage = (ev) => {
+ const data = ev.data;
+ if (data !== "[DONE]") {
+ const parsedData = JSON.parse(data);
+ const firstChoice = parsedData?.choices[0];
+ const message = firstChoice?.delta?.content;
+ if (message && message !== "") {
+ if (!hasMarkdown(message)) {
+ streamMessage(message);
}
}
- };
+ }
+ };
- const onerror = (error) => {
- // Stop operation and do not retry by the fetch-event-source
- throw error;
- };
+ const onerror = (error) => {
+ // Stop operation and do not retry by the fetch-event-source
+ throw error;
+ };
- // Use microsoft's fetch-event-source library to work around the 2000 character limit
- // of the browser `EventSource` API, which requires query strings
- return fetchApi
- .then((fetchEventSource) =>
- fetchEventSource("{{ openai_proxy_url }}", {
- ...openAiOptions,
- openWhenHidden: true,
- onopen,
- onmessage,
- onerror,
- })
- )
- .then(async (response) => {
- if (response && !response.ok) {
- const data = await response.json();
- if (data.error) {
- throw new Error(`${data.error.type}: ${data.error.message}`);
- }
- }
+ // Use microsoft's fetch-event-source library to work around the 2000 character limit
+ // of the browser `EventSource` API, which requires query strings
+ return fetchApi
+ .then((fetchEventSource) =>
+ fetchEventSource("{{ openai_proxy_url }}", {
+ ...openAiOptions,
+ openWhenHidden: true,
+ onopen,
+ onmessage,
+ onerror,
})
- .catch(onerror);
- });
- };
-
- // Fetch revisions
- const fetchRevisions = () => {
- return Promise.resolve([
- {
- revisionId: '3',
- createdAt: '2023-11-24T22:26:21.578Z',
- author: {
- id: 'husky',
- name: 'A Tiny Husky',
- avatar: '{{imagesdir}}/tiny-husky.jpg'
- },
- content: `
- ' + userDetail.fullName + '
' + - '' + userDetail.description + '
' + - '
Welcome to the TinyMCE editor demo!
-A simple table to play with
-| Product | -Cost | -Really? | -
|---|---|---|
| TinyMCE | -Free | -YES! | -
| Plupload | -Free | -YES! | -
Found a bug?
-If you think you have found a bug please create an issue on the GitHub repo to report it to the developers.
-Finally ...
-Don't forget to check out our other product Plupload, your ultimate upload solution featuring HTML5 upload support.
Thanks for supporting TinyMCE! We hope it helps you and your users create great content.
All the best from the TinyMCE team.
Welcome to the TinyMCE editor demo!
-Got questions or need help?
--
-
- Our documentation is a great resource for learning how to configure TinyMCE. -
- Have a specific question? Try the
tinymcetag at Stack Overflow.
- - We also offer enterprise grade support as part of TinyMCE premium plans. -
A simple table to play with
-| Product | -Cost | -Really? | -
|---|---|---|
| TinyMCE | -Free | -YES! | -
| Plupload | -Free | -YES! | -
Found a bug?
-If you think you have found a bug please create an issue on the GitHub repo to report it to the developers.
-Finally ...
-Don't forget to check out our other product Plupload, your ultimate upload solution featuring HTML5 upload support.
-Thanks for supporting TinyMCE! We hope it helps you and your users create great content.
All the best from the TinyMCE team.
Welcome to the TinyMCE editor demo!
-Got questions or need help?
--
-
- Our documentation is a great resource for learning how to configure TinyMCE. -
- Have a specific question? Try the
tinymcetag at Stack Overflow.
- - We also offer enterprise grade support as part of TinyMCE premium plans. -
A simple table to play with
-| Product | -Cost | -Really? | -
|---|---|---|
| TinyMCE | -Free | -YES! | -
| Plupload | -Free | -YES! | -
Found a bug?
-If you think you have found a bug please create an issue on the GitHub repo to report it to the developers.
-Finally ...
-Don't forget to check out our other product Plupload, your ultimate upload solution featuring HTML5 upload support.
-Thanks for supporting TinyMCE! We hope it helps you and your users create great content.
All the best from the TinyMCE team.
Welcome to the TinyMCE editor demo!
+A simple table to play with
+| Product | +Cost | +Really? | +
|---|---|---|
| TinyMCE | +Free | +YES! | +
| Plupload | +Free | +YES! | +
Found a bug?
+If you think you have found a bug please create an issue on the GitHub repo to report it to the developers.
+Finally ...
+Don't forget to check out our other product Plupload, your ultimate upload solution featuring HTML5 upload support.
Thanks for supporting TinyMCE! We hope it helps you and your users create great content.
All the best from the TinyMCE team.
Welcome to the TinyMCE editor demo!
+Got questions or need help?
+-
+
- Our documentation is a great resource for learning how to configure TinyMCE. +
- Have a specific question? Try the
tinymcetag at Stack Overflow.
+ - We also offer enterprise grade support as part of TinyMCE premium plans. +
A simple table to play with
+| Product | +Cost | +Really? | +
|---|---|---|
| TinyMCE | +Free | +YES! | +
| Plupload | +Free | +YES! | +
Found a bug?
+If you think you have found a bug please create an issue on the GitHub repo to report it to the developers.
+Finally ...
+Don't forget to check out our other product Plupload, your ultimate upload solution featuring HTML5 upload support.
+Thanks for supporting TinyMCE! We hope it helps you and your users create great content.
All the best from the TinyMCE team.
As we have not heard back from you in over a week, we have gone ahead and resolved your ticket.
' - }, - { - id: '2', - title: 'Quick replies', - items: [ - { - id: '3', - title: 'Message received', - content: 'Just a quick note to say we have received your message, and will get back to you within 48 hours.
' - }, - { - id: '4', - title: 'Progress update', - content: 'Just a quick note to let you know we are still working on your case
' - } - ] - } - ], - link_list: [ - { title: 'My page 1', value: 'https://www.tiny.cloud' }, - { title: 'My page 2', value: 'http://www.moxiecode.com' } - ], - image_list: [ - { title: 'My page 1', value: 'https://www.tiny.cloud' }, - { title: 'My page 2', value: 'http://www.moxiecode.com' } - ], - image_class_list: [ - { title: 'None', value: '' }, - { title: 'Some class', value: 'class-name' } - ], - importcss_append: true, - height: 600, - image_caption: true, - quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable', - noneditable_class: 'mceNonEditable', - toolbar_mode: 'sliding', - spellchecker_ignore_list: ['Ephox', 'Moxiecode', 'tinymce', 'TinyMCE'], - tinycomments_mode: 'embedded', - content_style: '.mymention{ color: gray; }' + - 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }', - contextmenu: 'link image editimage table spellchecker configurepermanentpen', - a11y_advanced_options: true, - mentions_selector: '.mymention', - mentions_fetch: mentions_fetch, - mentions_menu_hover: mentions_menu_hover, - mentions_menu_complete: mentions_menu_complete, - mentions_select: mentions_select, - mentions_item_type: 'profile', - autocorrect_capitalize: true, - mergetags_list: [ - { - title: 'Client', - menu: [ + content: ` +
Welcome to the TinyMCE editor demo!
+Got questions or need help?
+-
+
- Our documentation is a great resource for learning how to configure TinyMCE. +
- Have a specific question? Try the
tinymcetag at Stack Overflow.
+ - We also offer enterprise grade support as part of TinyMCE premium plans. +
A simple table to play with
+| Product | +Cost | +Really? | +
|---|---|---|
| TinyMCE | +Free | +YES! | +
| Plupload | +Free | +YES! | +
Found a bug?
+If you think you have found a bug please create an issue on the GitHub repo to report it to the developers.
+Finally ...
+Don't forget to check out our other product Plupload, your ultimate upload solution featuring HTML5 upload support.
+Thanks for supporting TinyMCE! We hope it helps you and your users create great content.
All the best from the TinyMCE team.
As we have not heard back from you in over a week, we have gone ahead and resolved your ticket.
' + }, + { + id: '2', + title: 'Quick replies', + items: [ { - value: 'Client.LastCallDate', - title: 'Call date' + id: '3', + title: 'Message received', + content: 'Just a quick note to say we have received your message, and will get back to you within 48 hours.
' }, { - value: 'Client.Name', - title: 'Client name' + id: '4', + title: 'Progress update', + content: 'Just a quick note to let you know we are still working on your case
' } ] - }, - { - title: 'Proposal', - menu: [ - { - value: 'Proposal.SubmissionDate', - title: 'Submission date' - } - ] - }, - { - value: 'Consultant', - title: 'Consultant' - }, - { - value: 'Salutation', - title: 'Salutation' - } - ], - ai_request, - exportpdf_converter_options: { - 'format': 'Letter', - 'margin_top': '1in', - 'margin_right': '1in', - 'margin_bottom': '1in', - 'margin_left': '1in' + } + ], + link_list: [ + { title: 'My page 1', value: 'https://www.tiny.cloud' }, + { title: 'My page 2', value: 'http://www.moxiecode.com' } + ], + image_list: [ + { title: 'My page 1', value: 'https://www.tiny.cloud' }, + { title: 'My page 2', value: 'http://www.moxiecode.com' } + ], + image_class_list: [ + { title: 'None', value: '' }, + { title: 'Some class', value: 'class-name' } + ], + importcss_append: true, + height: 600, + image_caption: true, + quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable', + noneditable_class: 'mceNonEditable', + toolbar_mode: 'sliding', + spellchecker_ignore_list: ['Ephox', 'Moxiecode', 'tinymce', 'TinyMCE'], + content_style: '.mymention{ color: gray; }' + + 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }', + contextmenu: 'link image editimage table spellchecker configurepermanentpen', + a11y_advanced_options: true, + + ai_request, + + tinycomments_mode: 'callback', + tinycomments_mentions_enabled: true, + sidebar_show: 'showcomments', + tinycomments_create, + tinycomments_reply, + tinycomments_delete, + tinycomments_resolve, + tinycomments_delete_all, + tinycomments_lookup, + tinycomments_delete_comment, + tinycomments_edit_comment, + tinycomments_fetch, + + mentions_item_type: 'profile', + mentions_min_chars: 0, + mentions_selector: '.mymention', + mentions_fetch, + mentions_menu_hover, + mentions_menu_complete, + mentions_select, + + autocorrect_capitalize: true, + mergetags_list: [ + { + title: 'Client', + menu: [ + { + value: 'Client.LastCallDate', + title: 'Call date' + }, + { + value: 'Client.Name', + title: 'Client name' + } + ] }, - exportword_converter_options: { - 'document': { - 'size': 'Letter' - } + { + title: 'Proposal', + menu: [ + { + value: 'Proposal.SubmissionDate', + title: 'Submission date' + } + ] }, - importword_converter_options: { - 'formatting': { - 'styles': 'inline', - 'resets': 'inline', - 'defaults': 'inline', - } + { + value: 'Consultant', + title: 'Consultant' }, - revisionhistory_fetch: fetchRevisions, - revisionhistory_display_author: true, - // Suggested Edits plugin configuration - user_id: 'kalebwilson', - fetch_users: (userIds) => Promise.all(userIds - .map((userId) => new Promise((resolve) => - resolve(suggestededitsUserDb[userId] || { id: userId })) - )), - suggestededits_content: 'html', - suggestededits_access: 'full', - }); - + { + value: 'Salutation', + title: 'Salutation' + } + ], + exportpdf_converter_options: { + 'format': 'Letter', + 'margin_top': '1in', + 'margin_right': '1in', + 'margin_bottom': '1in', + 'margin_left': '1in' + }, + exportword_converter_options: { + 'document': { + 'size': 'Letter' + } + }, + importword_converter_options: { + 'formatting': { + 'styles': 'inline', + 'resets': 'inline', + 'defaults': 'inline', + } + }, + revisionhistory_fetch, + revisionhistory_fetch_revision, + revisionhistory_display_author: true, + + suggestededits_content: 'html', + suggestededits_access: 'full', + + user_id, + fetch_users: (userIds) => Promise.all(userIds + .map((userId) => + fetch(`${API_URL}/${userId}`) + .then((response) => response.json()) + .catch(() => ({ id: userId })))) }); \ No newline at end of file diff --git a/modules/ROOT/examples/live-demos/full-featured/style.css b/modules/ROOT/examples/live-demos/full-featured/style.css index 0bdb3ae26d..264b0c9223 100644 --- a/modules/ROOT/examples/live-demos/full-featured/style.css +++ b/modules/ROOT/examples/live-demos/full-featured/style.css @@ -1,6 +1,5 @@ - -textarea#mentions { - height: 350px; +span.mymention { + color: gray !important; } div.card, @@ -43,4 +42,4 @@ div.card img.avatar, height: 48px; margin-right: 8px; float: left; -} \ No newline at end of file +} diff --git a/modules/ROOT/examples/live-demos/mentions/index.html b/modules/ROOT/examples/live-demos/mentions/index.html index 69895e4e2c..2a3de834e9 100644 --- a/modules/ROOT/examples/live-demos/mentions/index.html +++ b/modules/ROOT/examples/live-demos/mentions/index.html @@ -1,7 +1,46 @@ diff --git a/modules/ROOT/examples/live-demos/mentions/index.js b/modules/ROOT/examples/live-demos/mentions/index.js index 57d75acbe3..02efd6779d 100644 --- a/modules/ROOT/examples/live-demos/mentions/index.js +++ b/modules/ROOT/examples/live-demos/mentions/index.js @@ -1,155 +1,73 @@ -/* Script to import faker.js for generating random data for demonstration purposes */ -tinymce.ScriptLoader.loadScripts(['https://cdn.jsdelivr.net/npm/faker@5/dist/faker.min.js']).then(() => { - - /* - ** This is to simulate requesting information from a server. - ** - ** It has 2 functions: - ** fetchUsers() - returns a complete list of users' ids and names. - ** fetchUser(id) - returns the full information about a single user id. - ** - ** Both of these functions have a slight delay to simulate a server request. - */ - const fakeServer = (() => { - /* Some user profile images for our fake server (original source: unsplash) */ - const images = [ - 'Abdullah_Hadley', 'Abriella_Bond', 'Addilynn_Dodge', 'Adolfo_Hess', 'Alejandra_Stallings', 'Alfredo_Schafer', 'Aliah_Pitts', 'Amilia_Luna', 'Andi_Lane', 'Angelina_Winn', 'Arden_Dean', 'Ariyanna_Hicks', 'Asiya_Wolff', 'Brantlee_Adair', 'Carys_Metz', 'Daniela_Dewitt', 'Della_Case', 'Dianna_Smiley', 'Eliana_Stout', 'Elliana_Palacios', 'Fischer_Garland', 'Glen_Rouse', 'Grace_Gross', 'Heath_Atwood', 'Jakoby_Roman', 'Judy_Sewell', 'Kaine_Hudson', 'Kathryn_Mcgee', 'Kayley_Dwyer', 'Korbyn_Colon', 'Lana_Steiner', 'Loren_Spears', 'Lourdes_Browning', 'Makinley_Oneill', 'Mariana_Dickey', 'Miyah_Myles', 'Moira_Baxter', 'Muhammed_Sizemore', 'Natali_Craig', 'Nevaeh_Cates', 'Oscar_Khan', 'Rodrigo_Hawkins', 'Ryu_Duke', 'Tripp_Mckay', 'Vivianna_Kiser', 'Yamilet_Booker', 'Yarely_Barr', 'Zachary_Albright', 'Zahir_Mays', 'Zechariah_Burrell' - ]; - - /* Create an array of 200 random names using faker.js */ - const userNames = []; - for (let i = 0; i < 200; i++) { - userNames.push(faker.name.findName()); - } - userNames.sort((a, b) => a.localeCompare(b)); - - /* This represents a database of users on the server */ - const userDb = {}; - userNames.map((fullName) => { - const id = fullName.toLowerCase().replace(/ /g, ''); - return { - id: id, - name: fullName, - fullName: fullName, - description: faker.name.jobTitle(), - image: '{{imagesdir}}/unsplash/uifaces-unsplash-portrait-' + images[Math.floor(images.length * Math.random())] + '.jpg' - }; - }).forEach((user) => { - userDb[user.id] = user; - }); - - /* This represents getting the complete list of users from the server with the details required for the mentions "profile" item */ - const fetchUsers = () => new Promise((resolve, _reject) => { - /* simulate a server delay */ - setTimeout(() => { - const users = Object.keys(userDb).map((id) => ({ - id: id, - name: userDb[id].name, - image: userDb[id].image, - description: userDb[id].description - })); - resolve(users); - }, 500); - }); - - /* This represents requesting all the details of a single user from the server database */ - const fetchUser = (id) => new Promise((resolve, reject) => { - /* simulate a server delay */ - setTimeout(() => { - if (Object.prototype.hasOwnProperty.call(userDb, id)) { - resolve(userDb[id]); - } - reject('unknown user id "' + id + '"'); - }, 300); - }); - - return { - fetchUsers: fetchUsers, - fetchUser: fetchUser - }; - })(); - - /* These are "local" caches of the data returned from the fake server */ - let usersRequest = null; - const userRequest = {}; - - const mentions_fetch = (query, success) => { - /* Fetch your full user list from somewhere */ - if (usersRequest === null) { - usersRequest = fakeServer.fetchUsers(); - } - usersRequest.then((users) => { - /* `query.term` is the text the user typed after the '@' */ - users = users.filter((user) => user.name.toLowerCase().includes(query.term.toLowerCase())) - - users = users.slice(0, 10); - - /* Where the user object must contain the properties `id` and `name` - but you could additionally include anything else you deem useful. */ - success(users); - }); - }; - - const mentions_menu_hover = (userInfo, success) => { - /* Request more information about the user from the server and cache it locally */ - if (!userRequest[userInfo.id]) { - userRequest[userInfo.id] = fakeServer.fetchUser(userInfo.id); - } - userRequest[userInfo.id].then((userDetail) => { - const div = document.createElement('div'); - - div.innerHTML = ( - '' +
- '' +
- '
'
- );
-
- success(div);
- });
- };
-
- const mentions_menu_complete = (editor, userInfo) => {
- const span = editor.getDoc().createElement('span');
- span.className = 'mymention';
- span.setAttribute('data-mention-id', userInfo.id);
- span.appendChild(editor.getDoc().createTextNode('@' + userInfo.name));
- return span;
- };
-
- const mentions_select = (mention, success) => {
- /* `mention` is the element we previously created with `mentions_menu_complete`
- in this case we have chosen to store the id as an attribute */
- const id = mention.getAttribute('data-mention-id');
- /* Request more information about the user from the server and cache it locally */
- if (!userRequest[id]) {
- userRequest[id] = fakeServer.fetchUser(id);
- }
- userRequest[id].then((userDetail) => {
- const div = document.createElement('div');
- div.innerHTML = (
- '' + userDetail.fullName + '
' + - '' + userDetail.description + '
' + - '' +
- '' +
- '
'
- );
- success(div);
- });
- };
-
- tinymce.init({
- selector: 'textarea#mentions',
- plugins: 'mentions',
- content_style: '.mymention{ color: gray; }' +
- 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
-
+const API_URL = 'https://demouserdirectory.tiny.cloud/v1/users';
+
+const mentions_fetch = async (query, success) => {
+ const searchPhrase = query.term.toLowerCase();
+ await fetch(`${API_URL}?q=${encodeURIComponent(searchPhrase)}`)
+ .then((response) => response.json())
+ .then((users) => success(users.data.map((userInfo) => ({
+ id: userInfo.id,
+ name: userInfo.name,
+ image: userInfo.avatar,
+ description: userInfo.custom.role
+ }))))
+ .catch((error) => console.log(error));
+};
+
+const mentions_menu_complete = (editor, userInfo) => {
+ const span = editor.getDoc().createElement('span');
+ span.className = 'mymention';
+ span.setAttribute('data-mention-id', userInfo.id);
+ span.appendChild(editor.getDoc().createTextNode('@' + userInfo.name));
+ return span;
+};
+
+const createCard = (userInfo) => {
+ const div = document.createElement('div');
+ div.innerHTML = (
+ '' + userDetail.fullName + '
' + - '' + userDetail.description + '
' + - '' +
+ '' +
+ '
'
+ );
+ return div;
+};
+
+const mentions_select = async (mention, success) => {
+ const id = mention.getAttribute('data-mention-id');
+ await fetch(`${API_URL}/${id}`)
+ .then((response) => response.json())
+ .then((userInfo) => {
+ const card = createCard({
+ id: userInfo.id,
+ name: userInfo.name,
+ image: userInfo.avatar,
+ description: userInfo.custom.role
+ });
+ success(card);
+ })
+ .catch((error) => console.error(error));
+};
+
+const mentions_menu_hover = async (userInfo, success) => {
+ const card = createCard(userInfo);
+ success(card);
+};
+
+tinymce.init({
+ selector: "textarea",
+ plugins: [
+ "advlist", "anchor", "autolink", "charmap", "code", "fullscreen",
+ "help", "image", "insertdatetime", "link", "lists", "media",
+ "preview", "searchreplace", "table", "visualblocks", "mentions"
+ ],
+ toolbar: "undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
+ content_style: '.mymention{ color: gray; }',
+ mentions_fetch,
+ mentions_item_type: 'profile',
+ mentions_menu_complete,
mentions_selector: '.mymention',
- mentions_fetch: mentions_fetch,
- mentions_menu_hover: mentions_menu_hover,
- mentions_menu_complete: mentions_menu_complete,
- mentions_select: mentions_select,
- mentions_item_type: 'profile'
- });
-});
+ mentions_select,
+ mentions_menu_hover,
+ tinycomments_mode: 'embedded'
+});
\ No newline at end of file
diff --git a/modules/ROOT/examples/live-demos/mentions/style.css b/modules/ROOT/examples/live-demos/mentions/style.css
index ee9d933713..3d14f0525c 100644
--- a/modules/ROOT/examples/live-demos/mentions/style.css
+++ b/modules/ROOT/examples/live-demos/mentions/style.css
@@ -2,6 +2,10 @@ textarea#mentions {
height: 350px;
}
+.mymention {
+ color: gray !important;
+}
+
div.card,
.tox div.card {
width: 240px;
diff --git a/modules/ROOT/examples/live-demos/revisionhistory/index.js b/modules/ROOT/examples/live-demos/revisionhistory/index.js
index 7b3b282b87..2a7fcff4ce 100644
--- a/modules/ROOT/examples/live-demos/revisionhistory/index.js
+++ b/modules/ROOT/examples/live-demos/revisionhistory/index.js
@@ -1,69 +1,15 @@
-const getRandomDelay = () => {
- const minDelay = 500;
- const maxDelay = 2000;
- return Math.floor(Math.random() * (maxDelay - minDelay + 1)) + minDelay;
-};
+const API_URL = 'https://demouserdirectory.tiny.cloud/v1/users';
-/* This represents a database of users on the server */
-const userDb = {
- 'john.doe': {
- id: 'john.doe',
- name: 'John Doe',
- avatar: 'https://i.pravatar.cc/150?img=11'
- }
-};
-
-const lightRevisions = [
- {
- revisionId: '3',
- author: {
- id: 'tiny.husky',
- name: 'A Tiny Husky',
- avatar: '{{imagesdir}}/tiny-husky.jpg',
- },
- createdAt: '2023-11-25T08:30:21.578Z'
- },
- {
- revisionId: '2',
- author: {
- id: 'tiny.user',
- name: 'A Tiny User',
- avatar: '{{imagesdir}}/logos/android-chrome-192x192.png',
- },
- createdAt: '2023-11-24T22:26:21.578Z',
- },
- {
- revisionId: '1',
- author: {
- id: 'tiny.user',
- name: 'A Tiny User',
- avatar: '{{imagesdir}}/logos/android-chrome-192x192.png',
- },
- createdAt: '2023-11-23T20:26:21.578Z',
- },
-];
-
-const revisionhistory_fetch = () =>
- new Promise((resolve) => {
- setTimeout(() => {
- resolve(
- lightRevisions
- .sort((a, b) =>
- new Date(a.createdAt) < new Date(b.createdAt) ? -1 : 1
- )
- .reverse()
- );
- }, getRandomDelay());
- });
+const fakeDelay = 200;
const revisions = [
{
revisionId: '3',
createdAt: '2023-11-24T22:26:21.578Z',
author: {
- id: 'tiny.husky',
+ id: 'james-wilson',
name: 'A Tiny Husky',
- avatar: '{{imagesdir}}/tiny-husky.jpg',
+ avatar: 'https://sneak-preview.tiny.cloud/demouserdirectory/images/employee_james-wilson_128_52f19412.jpg',
},
content: `
' + userInfo.name + '
' + + '' + userInfo.description + '
' + + '