diff --git a/.api-version b/.api-version index 7501d508f7..8df288f274 100644 --- a/.api-version +++ b/.api-version @@ -1 +1 @@ -7.5.1 \ No newline at end of file +7.6.0 \ No newline at end of file diff --git a/antora.yml b/antora.yml index 60b0544775..f9fe15e976 100644 --- a/antora.yml +++ b/antora.yml @@ -26,7 +26,7 @@ asciidoc: # product variables productname: TinyMCE productmajorversion: 7 - productminorversion: '7.5' + productminorversion: '7.6' ##### product name in codeblock prodnamecode: tinymce #### more names diff --git a/modules/ROOT/examples/live-demos/comments-callback/example.js b/modules/ROOT/examples/live-demos/comments-callback/example.js index 9557de760b..1d944e99ee 100644 --- a/modules/ROOT/examples/live-demos/comments-callback/example.js +++ b/modules/ROOT/examples/live-demos/comments-callback/example.js @@ -48,7 +48,11 @@ const tinycomments_reply = (req, done, fail) => { }) .then((req2) => { const commentUid = req2.commentUid; - done({ commentUid }); + done({ + commentUid: replyUid, + author: currentUser.id, + authorName: currentUser.fullName + }); }) .catch((e) => { fail(e); diff --git a/modules/ROOT/examples/live-demos/context-toolbar-labels/index.html b/modules/ROOT/examples/live-demos/context-toolbar-labels/index.html new file mode 100644 index 0000000000..172316e060 --- /dev/null +++ b/modules/ROOT/examples/live-demos/context-toolbar-labels/index.html @@ -0,0 +1,9 @@ + diff --git a/modules/ROOT/examples/live-demos/context-toolbar-labels/index.js b/modules/ROOT/examples/live-demos/context-toolbar-labels/index.js new file mode 100644 index 0000000000..7c0d94b2dc --- /dev/null +++ b/modules/ROOT/examples/live-demos/context-toolbar-labels/index.js @@ -0,0 +1,34 @@ +tinymce.init({ + selector: 'textarea#context-toolbar-labels', + height: 350, + setup: (editor) => { + editor.ui.registry.addContextToolbar('imagealignment', { + predicate: (node) => node.nodeName.toLowerCase() === 'img', + position: 'node', + scope: 'node', + items: [ + { + name: 'Formatting', + items: ['alignleft', 'aligncenter', 'alignright'] + }, + { + label: 'Copy', + items: ['copy', 'paste'] + } + ], + }); + + editor.ui.registry.addContextToolbar('textselection', { + predicate: (node) => !editor.selection.isCollapsed(), + position: 'selection', + scope: 'node', + items: [ + { + name: 'Format', + items: ['bold', 'italic', 'underline'] + }, + ], + }); + }, + content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }' +}); diff --git a/modules/ROOT/examples/live-demos/uploadcare/index.html b/modules/ROOT/examples/live-demos/uploadcare/index.html new file mode 100644 index 0000000000..df54bcd522 --- /dev/null +++ b/modules/ROOT/examples/live-demos/uploadcare/index.html @@ -0,0 +1,86 @@ + + diff --git a/modules/ROOT/examples/live-demos/uploadcare/index.js b/modules/ROOT/examples/live-demos/uploadcare/index.js new file mode 100644 index 0000000000..23f7fc84e3 --- /dev/null +++ b/modules/ROOT/examples/live-demos/uploadcare/index.js @@ -0,0 +1,19 @@ +tinymce.init({ + selector: "textarea", + plugins: [ "uploadcare", "code", "link", "preview", "lists" ], + uploadcare_public_key: 'cfef242412638bfc4193', + toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist| link uploadcare | code preview", + height: 700, + content_style: ` + body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } + h1 { font-size: 1.5em; } + h2 { font-size: 1.17em; } + h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; } + p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; } + p { line-height: 1.6; margin: 0; } + p + p { margin-top: 1rem; } + a { color: #2b70e3; } + blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; } + figcaption {font-size: 0.875em;} + ` +}); diff --git a/modules/ROOT/images/icons/add-file.svg b/modules/ROOT/images/icons/add-file.svg new file mode 100644 index 0000000000..18af2d8265 --- /dev/null +++ b/modules/ROOT/images/icons/add-file.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/modules/ROOT/images/icons/adjustments.svg b/modules/ROOT/images/icons/adjustments.svg new file mode 100644 index 0000000000..2079d17011 --- /dev/null +++ b/modules/ROOT/images/icons/adjustments.svg @@ -0,0 +1,3 @@ + + + diff --git a/modules/ROOT/images/icons/alt-text.svg b/modules/ROOT/images/icons/alt-text.svg new file mode 100644 index 0000000000..6e85a1f800 --- /dev/null +++ b/modules/ROOT/images/icons/alt-text.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/modules/ROOT/images/icons/blur.svg b/modules/ROOT/images/icons/blur.svg new file mode 100644 index 0000000000..0cf6893a70 --- /dev/null +++ b/modules/ROOT/images/icons/blur.svg @@ -0,0 +1,3 @@ + + + diff --git a/modules/ROOT/images/icons/box.svg b/modules/ROOT/images/icons/box.svg new file mode 100644 index 0000000000..dce6de1685 --- /dev/null +++ b/modules/ROOT/images/icons/box.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/modules/ROOT/images/icons/camera.svg b/modules/ROOT/images/icons/camera.svg new file mode 100644 index 0000000000..21c6164636 --- /dev/null +++ b/modules/ROOT/images/icons/camera.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/modules/ROOT/images/icons/caption.svg b/modules/ROOT/images/icons/caption.svg new file mode 100644 index 0000000000..bbfa23cf7f --- /dev/null +++ b/modules/ROOT/images/icons/caption.svg @@ -0,0 +1,3 @@ + + + diff --git a/modules/ROOT/images/icons/dropbox.svg b/modules/ROOT/images/icons/dropbox.svg new file mode 100644 index 0000000000..61576ab6f5 --- /dev/null +++ b/modules/ROOT/images/icons/dropbox.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/modules/ROOT/images/icons/evernote.svg b/modules/ROOT/images/icons/evernote.svg new file mode 100644 index 0000000000..a750417723 --- /dev/null +++ b/modules/ROOT/images/icons/evernote.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/modules/ROOT/images/icons/exposure.svg b/modules/ROOT/images/icons/exposure.svg new file mode 100644 index 0000000000..fda78d4caf --- /dev/null +++ b/modules/ROOT/images/icons/exposure.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/modules/ROOT/images/icons/fb.svg b/modules/ROOT/images/icons/fb.svg new file mode 100644 index 0000000000..5503a9b4c0 --- /dev/null +++ b/modules/ROOT/images/icons/fb.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/modules/ROOT/images/icons/flickr.svg b/modules/ROOT/images/icons/flickr.svg new file mode 100644 index 0000000000..336b721bc4 --- /dev/null +++ b/modules/ROOT/images/icons/flickr.svg @@ -0,0 +1,3 @@ + + + diff --git a/modules/ROOT/images/icons/folder.svg b/modules/ROOT/images/icons/folder.svg new file mode 100644 index 0000000000..9bd6f4a888 --- /dev/null +++ b/modules/ROOT/images/icons/folder.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/modules/ROOT/images/icons/google-drive.svg b/modules/ROOT/images/icons/google-drive.svg new file mode 100644 index 0000000000..3ca54f4325 --- /dev/null +++ b/modules/ROOT/images/icons/google-drive.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/modules/ROOT/images/icons/google-photos.svg b/modules/ROOT/images/icons/google-photos.svg new file mode 100644 index 0000000000..33a6af34c5 --- /dev/null +++ b/modules/ROOT/images/icons/google-photos.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/modules/ROOT/images/icons/grayscale.svg b/modules/ROOT/images/icons/grayscale.svg new file mode 100644 index 0000000000..21af08f8a8 --- /dev/null +++ b/modules/ROOT/images/icons/grayscale.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/modules/ROOT/images/icons/huddle.svg b/modules/ROOT/images/icons/huddle.svg new file mode 100644 index 0000000000..b4755a1247 --- /dev/null +++ b/modules/ROOT/images/icons/huddle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/modules/ROOT/images/icons/image-decorative.svg b/modules/ROOT/images/icons/image-decorative.svg new file mode 100644 index 0000000000..656cb0260c --- /dev/null +++ b/modules/ROOT/images/icons/image-decorative.svg @@ -0,0 +1,3 @@ + + + diff --git a/modules/ROOT/images/icons/image-enhancements.svg b/modules/ROOT/images/icons/image-enhancements.svg new file mode 100644 index 0000000000..f95c841695 --- /dev/null +++ b/modules/ROOT/images/icons/image-enhancements.svg @@ -0,0 +1,4 @@ + + + + diff --git a/modules/ROOT/images/icons/instagram.svg b/modules/ROOT/images/icons/instagram.svg new file mode 100644 index 0000000000..c46d3c45ec --- /dev/null +++ b/modules/ROOT/images/icons/instagram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/modules/ROOT/images/icons/onedrive.svg b/modules/ROOT/images/icons/onedrive.svg new file mode 100644 index 0000000000..9463e3cecf --- /dev/null +++ b/modules/ROOT/images/icons/onedrive.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/modules/ROOT/images/icons/revert.svg b/modules/ROOT/images/icons/revert.svg new file mode 100644 index 0000000000..68854286fc --- /dev/null +++ b/modules/ROOT/images/icons/revert.svg @@ -0,0 +1,4 @@ + + + + diff --git a/modules/ROOT/images/icons/saturation.svg b/modules/ROOT/images/icons/saturation.svg new file mode 100644 index 0000000000..4ed121e860 --- /dev/null +++ b/modules/ROOT/images/icons/saturation.svg @@ -0,0 +1,3 @@ + + + diff --git a/modules/ROOT/images/icons/transform-image.svg b/modules/ROOT/images/icons/transform-image.svg new file mode 100644 index 0000000000..15e252c9cf --- /dev/null +++ b/modules/ROOT/images/icons/transform-image.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/modules/ROOT/images/icons/vibrance.svg b/modules/ROOT/images/icons/vibrance.svg new file mode 100644 index 0000000000..63f83303ab --- /dev/null +++ b/modules/ROOT/images/icons/vibrance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/modules/ROOT/images/icons/vk.svg b/modules/ROOT/images/icons/vk.svg new file mode 100644 index 0000000000..3c24b20293 --- /dev/null +++ b/modules/ROOT/images/icons/vk.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/modules/ROOT/images/icons/warmth.svg b/modules/ROOT/images/icons/warmth.svg new file mode 100644 index 0000000000..1694549adc --- /dev/null +++ b/modules/ROOT/images/icons/warmth.svg @@ -0,0 +1,3 @@ + + + diff --git a/modules/ROOT/nav.adoc b/modules/ROOT/nav.adoc index 47b1c49a5a..fb00b91c4c 100644 --- a/modules/ROOT/nav.adoc +++ b/modules/ROOT/nav.adoc @@ -320,6 +320,7 @@ *** xref:importword.adoc[Import from Word] **** xref:docx-to-html-converter-api.adoc[DOCX to HTML Converter API] *** xref:editimage.adoc[Image Editing] +*** xref:uploadcare.adoc[Image Optimizer Powered by Uploadcare] *** xref:inline-css.adoc[Inline CSS] *** xref:linkchecker.adoc[Link Checker] *** xref:math.adoc[Math] @@ -409,6 +410,15 @@ ** xref:tinymce-and-cors.adoc[Cross-Origin Resource Sharing (CORS)] * Release information ** xref:release-notes.adoc[Release notes for {productname}] +*** {productname} 7.6.0 +**** xref:7.6.0-release-notes.adoc#overview[Overview] +**** xref:7.6.0-release-notes.adoc#new-premium-plugin[New Premium plugin] +**** xref:7.6.0-release-notes.adoc#accompanying-premium-plugin-changes[Accompanying Premium plugin changes] +**** xref:7.6.0-release-notes.adoc#accompanying-enhanced-skins-and-icon-packs-changes[Accompanying Enhanced Skins & Icon Packs changes] +// **** xref:7.6.0-release-notes.adoc#improvements[Improvements] +**** xref:7.6.0-release-notes.adoc#additions[Additions] +**** xref:7.6.0-release-notes.adoc#bug-fixes[Bug fixes] +**** xref:7.6.0-release-notes.adoc#known-issues[Known issues] *** {productname} 7.5.1 **** xref:7.5.1-release-notes.adoc#overview[Overview] **** xref:7.5.1-release-notes.adoc#accompanying-premium-plugin-changes[Accompanying Premium Plugin changes] diff --git a/modules/ROOT/pages/7.6.0-release-notes.adoc b/modules/ROOT/pages/7.6.0-release-notes.adoc new file mode 100644 index 0000000000..a07371b400 --- /dev/null +++ b/modules/ROOT/pages/7.6.0-release-notes.adoc @@ -0,0 +1,423 @@ += {productname} {release-version} +:release-version: 7.6.0 +:navtitle: {productname} {release-version} +:description: Release notes for {productname} {release-version} +:keywords: releasenotes, new, changes, bugfixes +:page-toclevels: 1 + +include::partial$misc/admon-releasenotes-for-stable.adoc[] + + +[[overview]] +== Overview + +{productname} {release-version} was released for {enterpriseversion} and {cloudname} on Wednesday, December 11^th^, 2024. These release notes provide an overview of the changes for {productname} {release-version}, including: + +* xref:new-premium-plugin[New Premium plugin] +* xref:accompanying-premium-plugin-changes[Accompanying Premium plugin changes] +* xref:accompanying-enhanced-skins-and-icon-packs-changes[Accompanying Enhanced Skins & Icon Packs changes] +// * xref:improvements[Improvements] +* xref:additions[Additions] +* xref:changes[Changes] +* xref:bug-fixes[Bug fixes] +* xref:known-issues[Known issues] + + +[[new-premium-plugin]] +== New Premium plugin + +The following new Premium plugin was released alongside {productname} {release-version}. + +=== Image Optimizer (Powered by Uploadcare) + +{productname} {release-version} introduces the **Image Optimizer (Powered by Uploadcare)** plugin. + +The **Image Optimizer** plugin offers a range of powerful features for image hosting, serving, and editing. These include responsive image delivery, automatic image format selection, automatic compression, and non-destructive image transformations and adjustments, all powered by link:https://uploadcare.com[Uploadcare]. + +For information on the **Image Optimizer (Powered by Uploadcare)** plugin, see xref:uploadcare.adoc[Image Optimizer (Powered by Uploadcare)]. + +[[accompanying-premium-plugin-changes]] +== Accompanying Premium plugin changes + +The following premium plugin updates were released alongside {productname} {release-version}. + +=== Accessibility Checker + +The {productname} {release-version} release includes an accompanying release of the **Accessibility Checker** premium plugin. + +**Accessibility Checker** Premium plugin includes the following fixes and improvements. + +==== Introduced a new live region for screen readers to improve accessibility checker dialog announcements +// #TINY-11523 + +Previously, an issue was identified where screen reader announcements for the accessibility dialog were inconsistent across different browsers. This inconsistency resulted in a poor user experience with screen readers and accessibility dialogs. + +In {productname} {release-version}, this issue has been resolved by adding a dedicated hidden screen reader section within the dialog structure, ensuring more consistent and accurate announcements across browsers. + +==== Add detailed issue description to accessibility checker +// #TINY-11462 + +An issue was identified where users relying on screen readers did not receive sufficient context about the current content when navigating the accessibility checker. This limitation could cause confusion and make it challenging for users to understand or resolve accessibility issues effectively. + +To address this, {productname} {release-version} introduces a new section that clearly displays the content type and includes a snippet of the content. This enhancement provides users with better context and improves the overall navigation experience. By offering more comprehensive indicators, this update ensures screen reader users can efficiently identify and address accessibility issues within the content. + +==== Improve editor content highlighting when using accessibility checker +// #TINY-11463 + +Previously, an issue involving the accessibility checker was identified where the content area highlights did not properly meet accessibility standards. This issue caused users with vision impairments to encounter difficulty in identifying the currently focused element. + +In {productname} {release-version}, this issue has been resolved by unifying the color palette to meet accessibility color contrast standards, ensuring that all users can easily locate the currently focused element. + +For information on the **Accessibility Checker** plugin, see: xref:a11ychecker.adoc[Accessibility Checker]. + +=== Checklist + +The {productname} {release-version} release includes an accompanying release of the **Checklist** premium plugin. + +**Checklist** Premium plugin includes the following fix. + +==== Checklist items were unresponsive in `center` or `right` alignments +// #TINY-11357 + +In previous versions of {productname}, an issue was identified where users could not check checklist items when they were `center` or `right` aligned. This occurred because the logic for detecting clicks relied on the left-most position of the `+
  • +` element, which remains unchanged regardless of text alignment. + +As a result, clicks in center or right alignments would fail the logic check, leaving the items unresponsive. + +{productname} {release-version} addresses this issue. Now, the logic compares the click position against the left-most position of the aligned text, rather than the parent `+
  • +` element. This adjustment ensures that clicks are properly registered regardless of alignment, restoring expected functionality across all alignment settings. + +For information on the **Checklist** plugin, see: xref:checklist.adoc[Checklist]. + +=== Comments + +The {productname} {release-version} release includes an accompanying release of the **Comments** premium plugin. + +**Comments** includes the following fixes and improvements. + +==== The `commentAuthor` property is now included in reply events of the event log. +// #TINY-11489 + +In previous versions of the tinycomments plugin, the `commentAuthor` property was missing from 'reply' events within the event log, which led to incomplete tracking of user interactions when retrieving data through the `+getEventLog()+` API. + +{productname} {release-version} addresses this issue. Now, the `commentAuthor` property is included in 'reply' events in the event log. + +For more information on the `getEventLog`, see xref:comments-commands-events-apis.adoc#getEventLog[getEventLog]. + +==== Allow mentions in comments dropdown to flow freely outside of the editor container +// #TINY-11504 + +An issue was identified where the mentions in comments dropdown didn't freely expand to the available space alongside mentions in the editor. This was due to the dropdown being restricted within the sidebar area. + +In {productname} {release-version}, this issue has been resolved by allowing the mentions in comments dropdown to expand outside the sidebar area, making full use of the available space outside the editor and improving the overall user experience. + +==== Reduced the amount of scrolling when changing between conversations in the sidebar. +// #TINY-11401 + +Previously, the scrolling behavior for comment cards was inconsistent. When scrolling from top to bottom, the scrolling would stop at the top of a comment card, whereas scrolling from bottom to top would stop at the bottom of a comment card. This inconsistency could cause confusion when navigating through comments in the sidebar. + +In {productname} {release-version}, the sidebar scrolling behavior has been updated to ensure consistency. When a conversation is selected and is either partially or completely out of view, the sidebar now scrolls to position the top of the selected conversation just below the top of the sidebar. + +[NOTE] +An exception does apply if the selected conversation is already partially visible, with the top in view but the bottom out of view, and the comment card's height is smaller than the scrollable container. In this scenario, the sidebar will scroll to position the bottom of the selected card near the bottom of the container. + +==== Scroll to show action buttons when replying/editing a comment. +// #TINY-11402 + +Previously, if a selected conversation card was positioned near the bottom of the sidebar, the reply/edit input field would be below the bottom of the sidebar resulting in the comment input field not being visible to the user. + +{productname} {release-version} addresses this issue. Now, the sidebar scrolls to display the comment input field if the selected conversation card is positioned near the bottom of the sidebar. This ensures that the comment input field is always visible to the user. + +==== Pressing Shift+Enter in Mentions in Comments dropdown should accept the active menu item +// #TINY-11455 + +In previous versions of {productname}, the `Shift+Enter` key was not properly handled when used with mentions in comments. This led to a new line being inserted while the mentions dropdown remained open, resulting in inconsistent behavior compared to mentions within the editor. + +In {productname} {release-version}, mentions in comments now handle the `Shift+Enter` key by inserting the highlighted user into the comment text area and closing the dropdown, ensuring consistent functionality across the editor and comment areas. + +=== Adjust `tinycomments` UI font size to match the editor UI font size +// #TINY-11592 + +Previously, the **Comments** plugin used a `14px` font size for the comment body, which was inconsistent with the `16px` font size used in the rest of the Comments Sidebar and the editor UI. + +This issue has been resolved in {productname} {release-version} by setting the comment body font size to `16px`, ensuring font size consistency between the **Comments** plugin and the editor UI. + +==== Editor Focus after Deleting a Comment +// #TINY-11293 + +Previously, the focus behaviour in the comments sidebar was observed to be inconsistent. When a user deleted a comment, the focus exited the comments sidebar and returned to the editor instead of returning to the conversation card. This also occurred when a new comment was created inside an existing conversation, and when an entire new conversation was created. + +In {productname} {release-version}, the focus behaviour has now been improved in the following situations: + +* Deleting a comment now returns the focus to the conversation card that contained the deleted comment. +* Creating a new comment within an existing conversation now brings the focus to the corresponding conversation card. +* Starting a new conversation now brings the focus to the newly created conversation card. + +==== Added tooltips to conversation and comment kebab menus + +In previous versions of **Comments**, the kebab menu button in the comments sidebar was missing a tooltip for users relying on assistive technologies. + +{productname} {release-version} addresses this issue, by adding an `aria-label` with the description "Comment Actions" to the sidebar comment menu button, ensuring a tooltip is displayed on hover. This update improves accessibility and aligns the user experience across different menu buttons. + +==== The caret in comment textarea returned to its previous location before closing the mentions menu by selecting with the mouse. +// #TINY-11453 + +Previously, when closing the Mentions dropdown in a Comment textarea by clicking away, the caret would revert to its previous position, disregarding the user’s mouse-click location. This issue occurred because the logic for handling caret positioning did not account for mouse interactions, resulting in a disjointed and confusing user experience. + +In {productname} {release-version} this issue was addressed. Now, the caret now accurately reflects the user’s intended position when the Mentions dropdown is closed via a mouse-click. + +For information on the **Comments** plugin, see: xref:introduction-to-tiny-comments.adoc[Introduction to {companyname} Comments]. + +=== Enhanced Code Editor +// #TINY-11298 + +The {productname} {release-version} release includes an accompanying release of the **Enhanced Code Editor** premium plugin. + +**Enhanced Code Editor** Premium plugin includes the following fix. + +==== Spelling error in tooltip for `fullscreen` toggle button + +The tooltip for the `fullscreen` toggle button was incorrectly labeled as `Fullsceen`. {productname} {release-version} addresses this issue which has now been corrected to `Fullscreen`. + +For information on the **Enhanced Code Editor** plugin, see: xref:advcode.adoc[Enhanced Code Editor]. + +[[accompanying-enhanced-skins-and-icon-packs-changes]] +== Accompanying Enhanced Skins & Icon Packs changes + +The {productname} {release-version} release includes an accompanying release of the **Enhanced Skins & Icon Packs**. + +=== Enhanced Skins & Icon Packs + +The **Enhanced Skins & Icon Packs** release includes the following updates: + +The **Enhanced Skins & Icon Packs** were rebuilt to pull in the changes also incorporated into the default {productname} {release-version} skin, Oxide. + +For information on using Enhanced Skins & Icon Packs, see: xref:enhanced-skins-and-icon-packs.adoc[Enhanced Skins & Icon Packs]. + + +// [[improvements]] +// == Improvements + +// {productname} {release-version} also includes the following improvements: + +// === Base64 data was not properly decoded due to unhandled URL-encoded characters. +// #TINY-9548 + +// === The `latin` list style type is now recognized as an alias for the `alpha` list style type. +// #TINY-11515 + +[[additions]] +== Additions + +{productname} {release-version} also includes the following additions: + +=== Add Labels and Groups for Context Toolbar Buttons +// #TINY-11095 + +The release of {productname} {release-version} introduces the ability to organize context toolbar buttons into groups with optional labels or titles. This enhancement improves toolbar usability by enabling clearer categorization of buttons. + +The `items` object structure now supports defining groups with an optional `name` property for titles or a `label` property for identifying the group. This feature allows developers to create more intuitive and accessible toolbars by visually segmenting functionality. + +Example of a context toolbar configuration with groups and labels: + +.Example +[source,js] +---- +items: [ + { + name: 'Formatting', // Optional, used as the group's title + items: [ 'bold', 'italic' ] // Array of registered button names + }, + { + label: 'History', // Optional, used as a label for the group + items: [ 'undo', 'redo' ] // Array of registered button names + }, +] +---- + +For more details on configuring context toolbar groups and labels, see: xref:contexttoolbar.adoc#add-labels-and-groups-for-context-toolbar-buttons[Context Toolbar]. + +// === New `contextsliderform` and `contextsizeinput` context form types. +// #TINY-11342 + +=== New `back` function in `ContextFormApi` to go back to the previous toolbar. +// #TINY-11344 + +{productname} {release-version} introduces the `+back+` function in the `ContextFormApi`, enabling users to navigate back to the previous toolbar. This enhancement fulfills the need for a back button in context forms, providing a seamless way to return to the previous toolbar configuration when required. + +.Example: Using the `back` function in a context form +[source,js] +---- +tinymce.init({ + selector: "textarea", + setup: (ed) => { + ed.ui.registry.addContextToolbar('toolbar-with-back-example', { + items: 'form-with-back-example undo redo', + position: 'node', + scope: 'node', + predicate: (node) => node.nodeName.toLowerCase() === 'p' + }); + ed.ui.registry.addContextForm('form-with-back-example', { + type: 'contextsizeinputform', + launch: { + type: 'contextformtogglebutton', + icon: 'resize', + tooltip: 'ABC' + }, + initValue: () => ({ width: '100', height: '200' }), + onInput: (formApi) => console.log(`input.${JSON.stringify(formApi.getValue())}`), + commands: [ + { + type: 'contextformbutton', + icon: 'chevron-left', + tooltip: 'Back', + align: 'start', + onAction: (formApi) => formApi.back() + } + ] + }); + } +}); +---- + +=== New `QuickbarInsertImage` command that is executed by the `quickimage` button. +// #TINY-11399 + +The **Quickbars** Plugin now allows integrators to overwrite the `+QuickbarInsertImage+` command, enabling customization of the quickimage button's behavior. + +.Example of how to override the `+QuickbarInsertImage+` command: +[source,js] +---- +tinymce.init({ + selector: 'textarea', + plugins: 'quickbars', + toolbar: false, + setup: (editor) => { + editor.addCommand('QuickbarInsertImage', () => { // Add a custom command to the editor named "QuickbarInsertImage" + const input = document.createElement('input'); // Create a new element for file selection + input.type = 'file'; // Set the input type to "file" for uploading files + input.accept = 'image/*'; // Restrict the input to accept only image files + input.onchange = (e) => { // Add an event listener to handle the file selection event + const file = (e.target).files?.[0]; // Get the selected file from the input element + if (file) { + console.log(file); + } + }; + input.click(); + }); + } +}); +---- + +=== New `onSetup` function for context forms +// #TINY-11494 + +A new `+onSetup+` API has been introduced for context forms, enabling integrators to execute a function when the form is rendered and handle cleanup when it is closed. This enhancement addresses the previous limitation of not being able to detect or trigger actions during the lifecycle of context forms. The `+onSetup+` API streamlines lifecycle management by supporting initialization at form rendering and providing a return function for cleanup, enhancing integration with plugins and applications. + +For more details, refer to xref:contextform.adoc#form[Context Form]. + +=== Added placeholder support for context form input fields +// #TINY-11459 + +A new `placeholder` option has been introduced to the context form API, addressing the need for inline guidance within input fields. This feature enables developers to specify placeholder text that appears inside input fields until the field is focused or a value is entered. By providing contextual hints, this enhancement improves usability and enhances the user experience. + +.Example: Using a placeholder in a context form input field +[source,js] +---- +editor.ui.registry.addContextForm('upload-url', { + launch: { + type: 'contextformtogglebutton', + icon: 'link', + tooltip: 'Upload from URL' + }, + placeholder: 'Enter URL here...', .... +}); +---- + +=== New `+disabled+` option for disabling all user interactions + +A new `+disabled+` option has been introduced to {productname} in version {release-version}. This option allows integrators to disable all user interactions with the editor, including cursor placement, content modifications, and UI components. When set to `+true+`, the editor behaves similarly to the readonly mode changes introduced in {productname} 7.4.0 but ensures complete non-interactivity. + +.Example disabling all user interactions with the editor +[source,js] +---- +tinymce.init({ + selector: 'textarea', // Specify the target HTML element + disabled: true // Disables all interactions with the editor +}); +---- + +For more information on the `+disabled+` option, see xref:editor-important-options.adoc#disabled[Disabled] option. + +[[bug-fixes]] +== Bug fixes + +{productname} {release-version} also includes the following bug fixes: + +=== Image selection was removed when calling nodeChanged while having focus inside the editor UI. +// #TINY-11437 + +Previously, executing a `nodeChange` event while an image was selected caused the image to lose its resize handles. This issue disrupted the user experience, requiring users to re-select the image to resize it. + +{productname} {release-version} addresses this issue. Now, resize handles are only removed when focus moves out of the editor or its UI components. + +As a result, the resize handles remain visible during `nodeChange` events, improving usability. + +=== Tooltip would not show for group toolbar button. +// #TINY-11391 + +Previously, an issue was identified where tooltips were not displayed when hovering over toolbar group buttons. This was due to replacing the `title` attribute with an `aria-label` attribute in xref:7.0-release-notes.adoc#improved-accessibility-for-interactive-elements-with-custom-tooltips[{productname} 7.0.0] without implementing the custom tooltip behavior for the toolbar group buttons. + +In {productname} {release-version}, this issue has been resolved by applying the custom tooltip behavior to the toolbar group buttons, ensuring that tooltips are now displayed on hover. + +=== Numbered table context menu not properly applying changes +// #TINY-11383 + +Previously, there was an issue where changes to the row type in numbered tables were not properly applied. This occurred because the action of modifying the row type from a `+contentEditable="false"+` cell was being deliberately blocked. + +In {productname} {release-version}, this issue has been resolved by removing the restriction on changing the row type from a `+contentEditable="false"+` cell. As a result, changes to the row type are now correctly applied. + +// === The `samp` format was being applied as a `block` level format, instead of an `inline` format. +// #TINY-11390 + +=== Removed title attribute from dialog tree elements as they already have a tooltip. +// #TINY-11470 + +Previously, an issue was identified with tooltips for tree structures where multiple tooltip systems displayed the same text simultaneously: + +. The browser's native tooltip, triggered by the `title` attribute, displayed the text. +. {productname}'s custom tooltip functionality also displayed the text. + +As a consequence, this caused two tooltips with identical content to appear at the same time, leading to a confusing user experience, where the desired behavior was to show only the custom tooltip provided by {productname}. + +In {productname} {release-version}, this issue has been resolved. The `title` attribute is now automatically removed when the custom tooltip is applied, ensuring that only the custom tooltip is displayed. + +=== Fixed CSS Bundling for Skin UI Content CSS +// #TINY-11558 + +In self-hosted React setups, image resize handles were not displayed when using bundled {productname} editors. This issue impacted the usability of features such as image resizing. + +The root cause was a misconfiguration of resource keys for the CSS bundling JS files and CSS loading logic in {productname} core. As a result, bundled editors failed to load the necessary styles, causing the resize handles to remain hidden. + +This issue affected {productname} versions earlier than 7.1.0. + +{productname} {release-version} resolves this issue by updating the `stylesheetLoader` to correctly load the `ui/default/content.css` stylesheet, ensuring that image resize handles are displayed as expected. + +=== Incorrect translation of `Cut Column` and `Copy Column` in Hebrew +// #TINY-11583 + +An issue was identified where the Hebrew translations for `Cut Column` and `Copy Column` in the table plugin were incorrect. + +{productname} {release-version} addresses this issue by providing the correct Hebrew translations for these operations. + + +[[known-issues]] +== Known issues + +This section describes issues that users of {productname} {release-version} may encounter and possible workarounds for these issues. + +There is one known issue in {productname} {release-version}. + +=== Missing translations for "Solution" for all languages in the Accessibility Checker + +In {productname} {release-version}, the "Solution" translation is missing for all languages in the Accessibility Checker. This issue affects the "Solution" section of the Accessibility Checker, where the "Solution" text is not displayed in the user's selected language. + +**Status**: Currently under investigation. \ No newline at end of file diff --git a/modules/ROOT/pages/a11ychecker.adoc b/modules/ROOT/pages/a11ychecker.adoc index 219fa00904..cd9cc35d57 100644 --- a/modules/ROOT/pages/a11ychecker.adoc +++ b/modules/ROOT/pages/a11ychecker.adoc @@ -43,7 +43,6 @@ The following checks are available for the {pluginname} plugin. The rules checke Each rule has a severity level, which will be one of the following, listed in order of increasing severity: -* Information * Warning * Error @@ -264,7 +263,10 @@ WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/html/H39.html[ *Rule description:* this rule checks that all complex tables must have a `+summary+` attribute explaining to users of assistive technologies how to navigate through the data inside of the table. -NOTE: This rule only applies to HTML 4 content and is not checked when `+a11ychecker_html_version+` is set to `+html5+`. +[NOTE] +==== +This rule only applies to HTML 4 content and is not checked when `+a11ychecker_html_version+` is set to `+html5+`. +==== ==== {pluginname} rule details - T2 @@ -281,7 +283,10 @@ WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/html/H73.html[ *Rule description:* this rule checks that the table caption and summary does not have the same text content. The caption should explain *what* the table is about while the summary should explain *how* to navigate the data inside of the table. -NOTE: The table `+summary+` attribute was deprecated in HTML 5, both the *what* and *how* information should be moved to the table caption. +[NOTE] +==== +The table `+summary+` attribute was deprecated in HTML 5, both the *what* and *how* information should be moved to the table caption. +==== ==== {pluginname} rule details - T3 @@ -296,7 +301,7 @@ WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/html/H73.html[ [[T4A]] === T4A - Table markup -*Rule description:* this rule checks that all `+tables+` contain both `+td+` and `+th+` elements. +*Rule description:* this rule checks that all `+tables+` contain both `+tr+` and `+td+` elements. ==== {pluginname} rule details - T4A @@ -380,7 +385,7 @@ Opens and closes the accessibility checker dialog with the results of the audit [source,js] ---- -editor.plugins.a11ychecker.toggleaudit(); +tinymce.activeEditor.plugins.a11ychecker.toggleaudit(); ---- [[getreport]] @@ -396,21 +401,23 @@ const issues = tinymce.activeEditor.plugins.a11ychecker.getReport(); console.log(issues); -// example result +// Example result [ { + "contentID": "
    Text: \"H5\"
    ", + "description": "Headings must be applied in sequential order. For example: Heading 1 should be followed by Heading 2, not Heading 3.", + "element": h5, // reference to the DOM element where the issue was found "id": "D2", "severity": "error", - "url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html", - "description": "Headings must be applied in sequential order. For example: Heading 1 should be followed by Heading 2, not Heading 3.", - "element": {} // The element value contains the DOM element (such as

    ). + "url": "https://www.w3.org/WAI/WCAG21/Techniques/general/G141.html", }, { + "contentID": "
    Table: \"2x2\"
    ", + "description": "Tables must have captions", + "element": table, // reference to the DOM element where the issue was found "id": "T1", "severity": "error", - "url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html", - "description": "Tables must have captions", - "element": {} // The element value contains the DOM element (such as ). + "url": "https://www.w3.org/WAI/WCAG21/Techniques/html/H39.html", } ] ---- @@ -418,7 +425,7 @@ console.log(issues); [[issue]] === The `+issue+` object -In a11ychecker, when the content within the editor is `audited`, each element is checked to ensure that no xref:a11ychecker.adoc#accessibility-rules[Accessibility rules] are violated. Any element which doesn’t adhere to a rule will generate an `issue` within the audit; the details of which are to be displayed in the a11ychecker dialog. +In a11ychecker, when the content within the editor is `audited`, each element is checked to ensure that no xref:a11ychecker.adoc#accessibility-rules[Accessibility rules] are violated. Any element which doesn't adhere to a rule will generate an `issue` within the audit; the details of which are to be displayed in the a11ychecker dialog. The `+'issue'+` object provides relevant data pertaining to any issue generated by an element which violates an xref:a11ychecker.adoc#accessibility-rules[Accessibility rule]: @@ -426,8 +433,10 @@ The `+'issue'+` object provides relevant data pertaining to any issue generated * `+description+` : `+String+` description of the issue; as will be displayed in the dialog. -* `+severity+` : `+String+` severity level of the issue; either `+info+`, `+warning+` or `+error+`. +* `+severity+` : `+String+` severity level of the issue; either `+warning+` or `+error+`. * `+url+` : `+String+` URL reference for the issue. By default, this will be a link to the W3 website, containing the W3 WCAG technique that needs to be addressed to clear the issue. * `+element+` : `+Object+` DOM element where the issue was found. + +* `+contentID+` : `+String+` A short snippet of the content (such as text, link, image, or table) where the issue was found. diff --git a/modules/ROOT/pages/changelog.adoc b/modules/ROOT/pages/changelog.adoc index bf166c6170..14662a04b3 100644 --- a/modules/ROOT/pages/changelog.adoc +++ b/modules/ROOT/pages/changelog.adoc @@ -4,6 +4,46 @@ NOTE: This is the {productname} Community version changelog. For information about the latest {cloudname} or {enterpriseversion} Release, see: xref:release-notes.adoc[{productname} Release Notes]. +== xref:7.6.0-release-notes.adoc[7.6.0 - 2024-12-11] + +=== Added +* It is now possible to create labeled groups in context toolbars. +// #TINY-11095 +// * New `contextsliderform` and `contextsizeinput` context form types. +// #TINY-11342 +* New `back` function in `ContextFormApi` to go back to the previous toolbar. +// #TINY-11344 +* New `QuickbarInsertImage` command that is executed by the `quickimage` button. +// #TINY-11399 +* New `onSetup` function to the context form API. +// #TINY-11494 +* New `placeholder` to the context form input field API. +// #TINY-11459 +* New `disabled` option to restore the previous `readonly` mode behavior, allowing the editor to be displayed in a disabled state. +// #TINY-11488 + +// === Improved +// * Base64 data was not properly decoded due to unhandled URL-encoded characters. +// #TINY-9548 +// * The `latin` list style type is now recognized as an alias for the `alpha` list style type. +// #TINY-11515 + +=== Fixed +* Image selection was removed when calling `+editor.nodeChanged()+` while having focus inside the editor UI. +// #TINY-11437 +* Tooltip would not show for group toolbar button. +// #TINY-11391 +* Changing the table row type when a `+contenteditable=false+` cell was selected would not work as expected. +// #TINY-11383 +// * The `samp` format was being applied as a `block` level format, instead of an `inline` format. +// #TINY-11390 +* Removed title attribute from dialog tree elements as they already have a tooltip. +// #TINY-11470 +* Fixed CSS bundling for skin UI content CSS. +// #TINY-11558 +* Fixed incorrect resource keys for CSS bundling JS files. +// #TINY-11558 + == xref:7.5-release-notes.adoc[7.5.0 - 2024-11-06] === Added diff --git a/modules/ROOT/pages/contextform.adoc b/modules/ROOT/pages/contextform.adoc index e3ec4fb325..8d978cdfc5 100644 --- a/modules/ROOT/pages/contextform.adoc +++ b/modules/ROOT/pages/contextform.adoc @@ -46,6 +46,11 @@ This relates to the form itself. The form specifications are: |`+position+` |This controls where the context toolbar will appear with regards to the current cursor. |`+scope+` |This controls whether the predicate (condition) is a `+node+`-based predicate, or an `+editor+`-based predicate. See context toolbar priority for more details. |`+commands+` |This is a list of the items to show in the context form. They can be either `+contextformbutton+` or `+contextformtogglebutton+`. +|`+onSetup+` +a| +`+(ContextFormApi) => (ContextFormApi) => void+` + +Optional default: `+() => () => {}+` - Function that's executed when the form is rendered. Once rendered, it returns a function that is executed when the context form is closed. |=== include::partial$context/positioning.adoc[leveloffset=+1] @@ -100,12 +105,13 @@ Where the `+toggleButtonApi+` is the same as a regular toolbar toggle button. === formApi -Both `+contextformbutton+` and `+contextformtogglebutton+` are passed `+formApi+` in their `+onAction+` callback. The `+formApi+` has two functions: +Both `+contextformbutton+` and `+contextformtogglebutton+` are passed `+formApi+` in their `+onAction+` callback. The `+formApi+` has three functions: [cols="1,3",options="header"] |=== |Functions |Description |`+hide+` |This will hide the form. By default, no button hides the form. It is the responsibility of the developer to hide the form in the `+onAction+` handler of buttons that require that the context form close after the action. +|`+back+` |This will restore the previous toolbar. This is useful when you want to go back to the previous toolbar when you press back in the toolbar. |`+getValue+` |This will retrieve the value current typed in the input field. |=== diff --git a/modules/ROOT/pages/contexttoolbar.adoc b/modules/ROOT/pages/contexttoolbar.adoc index dc57291ff4..8fb96d06e2 100644 --- a/modules/ROOT/pages/contexttoolbar.adoc +++ b/modules/ROOT/pages/contexttoolbar.adoc @@ -27,6 +27,41 @@ This example shows how the quickbars plugin adds the standard selection context liveDemo::context-toolbar[height="600", tab="js"] +[[add-labels-and-groups-for-context-toolbar-buttons]] +== Add labels and groups for context toolbar buttons + +From {productname} 7.6.0 onward, registering a context toolbar allows specifying `items` as an object that supports grouping with optional names and labels. This improvement enhances toolbar usability by organizing buttons into titled or labeled groups. + +The object structure takes two optional properties: `name` and `label`. + +* `name`: property is used as the group's title for the group that contains the buttons. +* `label`: property is used as a label for each group of buttons. + +[NOTE] +If neither `name` nor `label` are specified, the behavior defaults to ungrouped buttons. + +The object structure for `items` is as follows: + +.Example of a context toolbar configuration with groups and labels +[source,js] +---- +items: [ + { + name: 'Formatting', // Optional, used as the group's title + items: [ 'bold', 'italic' ] // Array of registered button names + }, + { + label: 'History', // Optional, used as a label for the group + items: [ 'undo', 'redo' ] // Array of registered button names + }, + { + items: [ 'undo', 'italic' ] // No name or label specified, default behavior applies + } +] +---- + +liveDemo::context-toolbar-labels[height="600", tab="js"] + == Launching a context toolbar programmatically There is an `+editor+` event called `+contexttoolbar-show+` that can be fired to show a context toolbar at the current selection. The event takes a parameter `+toolbarKey+` which specifies the name of the registered context form or context toolbar to show. diff --git a/modules/ROOT/pages/editor-important-options.adoc b/modules/ROOT/pages/editor-important-options.adoc index 4bb655ea99..6266d36056 100644 --- a/modules/ROOT/pages/editor-important-options.adoc +++ b/modules/ROOT/pages/editor-important-options.adoc @@ -35,6 +35,10 @@ include::partial$configuration/external_plugins.adoc[leveloffset=+1] include::partial$configuration/readonly.adoc[leveloffset=+1] +== Setting the editor in a disabled state + +include::partial$configuration/disabled.adoc[leveloffset=+1] + == Executing custom functions while the editor starts (initializes) include::partial$configuration/setup.adoc[leveloffset=+1] diff --git a/modules/ROOT/pages/events.adoc b/modules/ROOT/pages/events.adoc index abe61a14af..912f25a988 100644 --- a/modules/ROOT/pages/events.adoc +++ b/modules/ROOT/pages/events.adoc @@ -160,6 +160,7 @@ The following events are provided by the {productname} editor. |ObjectResized |`+{ target: HTMLElement, width: number, height: number, origin: string }+` |Fired when an object (such as an image) has finished being resized. |ObjectResizeStart |`+{ target: HTMLElement, width: number, height: number, origin: string }+` |Fired when an object (such as an image) is about to be resized. |SwitchMode |`+{ mode: string }+` |Fired when the editor mode is changed. The available modes are "design" and "readonly". Additional modes can be registered using {productname} API xref:apis/tinymce.editormode.adoc#register['tinymce.activeEditor.mode.register()']. +|DisabledStateChange |+{ state: boolean }+ |Fired when the editor disabled mode state changes. |ScrollWindow |(Same data as the native https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event[scroll event]) |Fired when the window has scrolled. |ResizeWindow |(Same data as the native https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event[resize event]) |Fired when the window is resized. |BeforeExecCommand |`+{ command: string, ui?: boolean, value?: any }+` |Fired before a command is executed. diff --git a/modules/ROOT/pages/release-notes.adoc b/modules/ROOT/pages/release-notes.adoc index 584545b6f5..9b6f8be992 100644 --- a/modules/ROOT/pages/release-notes.adoc +++ b/modules/ROOT/pages/release-notes.adoc @@ -9,6 +9,12 @@ This section lists the releases for {productname} 7 and the changes made in each [cols="1,1"] |=== +a| +[.lead] +xref:7.6.0-release-notes.adoc#overview[{productname} 7.6.0] + +Release notes for {productname} 7.6.0 + a| [.lead] xref:7.5.1-release-notes.adoc#overview[{productname} 7.5.1] diff --git a/modules/ROOT/pages/uploadcare.adoc b/modules/ROOT/pages/uploadcare.adoc new file mode 100644 index 0000000000..323fd687fe --- /dev/null +++ b/modules/ROOT/pages/uploadcare.adoc @@ -0,0 +1,216 @@ += {pluginname} plugin +:navtitle: Image Optimizer Powered by Uploadcare +:description: The Image Optimizer Powered by Uploadcare plugin allows you to optimize images in your content. +:description_short: +:plugincode: uploadcare +:pluginname: Image Optimizer Powered by Uploadcare +:keywords: plugin, {plugincode}, image, align, transform, alt text, caption, adjust, filter +:plugincategory: premium + +include::partial$misc/admon-premium-plugin.adoc[] + +include::partial$misc/admon-requires-7.6v.adoc[] + +== Overview + +The **Image Optimizer** plugin offers a range of powerful features for image hosting, serving, and editing. These include responsive image delivery, automatic image format selection, automatic compression, and non-destructive image transformations and adjustments, all powered by link:https://uploadcare.com[Uploadcare]. + +== Key benefits + +* Improve page loading speed and save on bandwidth by serving images in the optimal size, format, and compression based on the visitor's browser and device. +* Ditch the image editor and adjust images right inside {productname} with non-destructive transformations and adjustments. Change your mind any time! +* Stay safe and compliant with secure uploads, built in malware protection, and unsafe content detection +* Enterprise-ready scalable cloud storage provided by Uploadcare, delivered through its lightning-fast global CDN, and compliant with SOC2 and GDPR standards. + +== Interactive example + +liveDemo::{plugincode}[] + +== Basic setup + +To add the {pluginname} plugin to the editor, add `{plugincode}` to the `plugins` option in the editor configuration. + +For example: + +[source,js] +---- +tinymce.init({ + selector: 'textarea', + plugins: 'uploadcare', + toolbar: 'uploadcare', + uploadcare_public_key: '', + // uploadcare_signed_upload_auth_provider: (_publicKey) => Promise.resolve({ + // signature: 'sig', + // expire: 123 + // }), // Recommended option for secure uploads +}); +---- + +[NOTE] +==== +The {pluginname} plugin overrides the xref:quickbars.adoc[Quickbar] quickimage toolbar item. To ensure a better user experience and to avoid having two image buttons configure `quickbars_insert_toolbar` to omit the `quickimage` toolbar item. +==== + +== Image Operations + +Below is an overview of the features of the {pluginname} plugin includes for image optimization: + +[cols="1,1,^1,3",options="header"] +|=== +| Feature | Operation | Icon | Description + +| Align +| +| image:icons/align-left.svg[align-left.svg] +| Provides alignment options for the image or element. + +| +| Align Left +| image:icons/align-left.svg[align-left.svg] +| Aligns the image to the left. + +| +| Align Centre +| image:icons/align-center.svg[align-center.svg] +| Centers the image. + +| +| Align Right +| image:icons/align-right.svg[align-right.svg] +| Aligns the image to the right. + +| Transform +| +| image:icons/transform-image.svg[transform-image.svg] +| Allows users to apply transformations to the image: + +| +| Rotate Left +| image:icons/rotate-left.svg[rotate-left.svg] +| Rotates the image counterclockwise (left). + +| +| Rotate Right +| image:icons/rotate-right.svg[rotate-right.svg] +| Rotates the image clockwise (right). + +| +| Flip Vertically +| image:icons/flip-vertically.svg[flip-vertically.svg] +| Flips the image vertically. + +| +| Flip Horizontally +| image:icons/flip-horizontally.svg[flip-horizontally.svg] +| Flips the image horizontally. + +| +| Resize +| image:icons/resize.svg[resize.svg] +| Changes the size of the image. + +| Alt Text +| +| image:icons/alt-text.svg[alt-text.svg] +| Adds alternative text to describe the image for accessibility purposes. + +| +| Decorative Image +| image:icons/image-decorative.svg[image-decorative.svg] +a| +Marks the image as decorative, indicating it doesn't require alternative text for accessibility. + +This icon will only appear when the `a11y_advanced_options` configuration option is enabled. + +| Caption +| +| image:icons/caption.svg[caption.svg] +| Adds a caption below the image for additional context. + +| Adjust +| +| image:icons/adjustments.svg[adjustments.svg] +| Provides tools for adjusting image properties: + +| +| Brightness +| image:icons/brightness.svg[brightness.svg] +| Adjusts the image brightness. + +| +| Contrast +| image:icons/contrast.svg[contrast.svg] +| Adjusts the image contrast. + +| +| Exposure +| image:icons/exposure.svg[exposure.svg] +| Adjusts the image exposure. + +| +| Gamma +| image:icons/gamma.svg[gamma.svg] +| Adjusts the image gamma. + +| +| Vibrance +| image:icons/vibrance.svg[vibrance.svg] +| Adjusts the image vibrance. + +| +| Saturation +| image:icons/saturation.svg[saturation.svg] +| Adjusts the image saturation. + +| +| Warmth +| image:icons/warmth.svg[warmth.svg] +| Adjusts the image warmth. + +| +| Grayscale +| image:icons/grayscale.svg[grayscale.svg] +| Converts the image to grayscale. + +| +| Invert Colors +| image:icons/invert.svg[invert.svg] +| Inverts the image colors. + +| +| Sharpen +| image:icons/sharpen.svg[sharpen.svg] +| Sharpens the image. + +| +| Blur +| image:icons/blur.svg[blur.svg] +| Blurs the image. + +| Revert +| +| image:icons/revert.svg[revert.svg] +| Restores the image to its original state by undoing all edits. +|=== + +== Options + +The following configuration options affect the behavior of the {pluginname} plugin. + +include::partial$configuration/uploadcare_public_key.adoc[leveloffset=+1] + +include::partial$configuration/uploadcare_signed_upload_auth_provider.adoc[leveloffset=+1] + +include::partial$configuration/uploadcare_cdn_base_url.adoc[leveloffset=+1] + +include::partial$configuration/uploadcare_srcset_steps.adoc[leveloffset=+1] + +include::partial$configuration/uploadcare_store_type.adoc[leveloffset=+1] + +:includedSection: uploadcarePlugin +include::partial$configuration/a11y_advanced_options.adoc[leveloffset=+1] +:!includedSection: + +include::partial$misc/plugin-toolbar-button-id-boilerplate.adoc[] + +include::partial$misc/plugin-menu-item-id-boilerplate.adoc[] diff --git a/modules/ROOT/partials/configuration/a11y_advanced_options.adoc b/modules/ROOT/partials/configuration/a11y_advanced_options.adoc index faa0684e1a..de6765c7f7 100644 --- a/modules/ROOT/partials/configuration/a11y_advanced_options.adoc +++ b/modules/ROOT/partials/configuration/a11y_advanced_options.adoc @@ -3,15 +3,20 @@ This option affects the functionality of: -* The Accessibility Checker plugin (`+a11ychecker+`). -* The Image plugin (`+image+`). +* The xref:a11ychecker.adoc[Accessibility Checker] plugin (`+a11ychecker+`). +* The xref:image.adoc[Image] plugin (`+image+`). +* The xref:uploadcare.adoc[Image Optimizer Powered by Uploadcare] plugin (`+uploadcare+`). Setting `+a11y_advanced_options+` to `+true+`: * Adds the *Image is decorative* option to the _Insert/Edit Image_ dialog, allowing users to specify that an image is decorative and does not require alternative text for accessibility purposes. +* Adds the *Decorative image* button to Image Optimizer's _Alt text_ context toolbar, allowing users to specify that an image is decorative and does not require alternative text for accessibility purposes. * Adds the *Image is decorative* option to the _Accessibility Checker error_ dialog for images without alternative text or the `+role="presentation"+` attribute. -IMPORTANT: When `+a11y_advanced_options+` is set to `+true+`, xref:a11ychecker.adoc#a11ychecker_allow_decorative_images[`+a11ychecker_allow_decorative_images+`] will default to `+true+`. +[IMPORTANT] +==== +If `xref:a11ychecker.adoc#a11ychecker_allow_decorative_images[a11ychecker_allow_decorative_images]` is not explicitly set, the value defined in `+a11y_advanced_options+` will be used. +==== *Type:* `+Boolean+` @@ -21,6 +26,20 @@ IMPORTANT: When `+a11y_advanced_options+` is set to `+true+`, xref:a11ychecker.a === Example: using `+a11y_advanced_options+` +ifeval::["{includedSection}" == "uploadcarePlugin"] + +[source,js] +---- +tinymce.init({ + selector: 'textarea', // change this value according to your HTML + plugins: 'uploadcare', + toolbar: 'uploadcare', + uploadcare_public_key: '', + a11y_advanced_options: true, +}); +---- + +endif::[] ifeval::["{includedSection}" == "imagePlugin"] [source,js] @@ -29,7 +48,7 @@ tinymce.init({ selector: 'textarea', // change this value according to your HTML plugins: 'image', toolbar: 'image', - a11y_advanced_options: true + a11y_advanced_options: true, }); ---- @@ -42,7 +61,7 @@ tinymce.init({ selector: 'textarea', // change this value according to your HTML plugins: 'a11ychecker', toolbar: 'a11ycheck', - a11y_advanced_options: true + a11y_advanced_options: true, }); ---- @@ -55,7 +74,7 @@ tinymce.init({ selector: 'textarea', // change this value according to your HTML plugins: 'a11ychecker image', toolbar: 'a11ycheck image', - a11y_advanced_options: true + a11y_advanced_options: true, }); ---- diff --git a/modules/ROOT/partials/configuration/a11ychecker_allow_decorative_images.adoc b/modules/ROOT/partials/configuration/a11ychecker_allow_decorative_images.adoc index 4562a11330..1273b98df0 100644 --- a/modules/ROOT/partials/configuration/a11ychecker_allow_decorative_images.adoc +++ b/modules/ROOT/partials/configuration/a11ychecker_allow_decorative_images.adoc @@ -25,7 +25,10 @@ If `+a11ychecker_allow_decorative_images+` is set to `+false+`, the Accessibilit * An image has an empty alternative text attribute. * An image has the `+role="presentation"+` attribute. -NOTE: If xref:a11ychecker.adoc#a11y_advanced_options[`+a11y_advanced_options+`] is set to `+true+`, `+a11ychecker_allow_decorative_images+` will default to `+true+`. +[NOTE] +==== +If `+a11ychecker_allow_decorative_images+` is not explicitly set, the value defined in `xref:a11ychecker.adoc#a11y_advanced_options[a11y_advanced_options]` will be used. +==== *Type:* `+Boolean+` diff --git a/modules/ROOT/partials/configuration/a11ychecker_issue_url_callback.adoc b/modules/ROOT/partials/configuration/a11ychecker_issue_url_callback.adoc index 600cd36b0d..2d8c53af01 100644 --- a/modules/ROOT/partials/configuration/a11ychecker_issue_url_callback.adoc +++ b/modules/ROOT/partials/configuration/a11ychecker_issue_url_callback.adoc @@ -1,7 +1,7 @@ [[a11ychecker_issue_url_callback]] == `+a11ychecker_issue_url_callback+` -The `+a11ychecker_issue_url_callback+` option is used to change the target URL for the "Click for more info" button (image:icons/help.svg[help icon - a question mark inside a circle]) in the Accessibility Checker dialog. By default, the "more info" links will point to `+https://www.tiny.cloud/docs/tinymce/6/a11ychecker/#+`, such as `+https://www.tiny.cloud/docs/tinymce/6/a11ychecker/#D1+`. This option can be used to set the target URL to a page or pages outside {site-url}/. +The `+a11ychecker_issue_url_callback+` option is used to change the target URL for the "Click for more info" button (image:icons/help.svg[help icon - a question mark inside a circle]) in the Accessibility Checker dialog. By default, the "more info" links will point to `+https://www.tiny.cloud/docs/tinymce/7/a11ychecker/#+`, such as `+https://www.tiny.cloud/docs/tinymce/7/a11ychecker/#D1+`. This option can be used to set the target URL to a page or pages outside {site-url}/. *Type:* `+Function+` diff --git a/modules/ROOT/partials/configuration/disabled.adoc b/modules/ROOT/partials/configuration/disabled.adoc new file mode 100644 index 0000000000..c54b4cf306 --- /dev/null +++ b/modules/ROOT/partials/configuration/disabled.adoc @@ -0,0 +1,23 @@ +[[disabled]] + +== `+disabled+` + +Disables all user interactions with the editor (including cursor placement, content modifications, UI components). This option provides behavior similar to the changes made to {productname} in 7.4.0 readonly mode. When enabled, the editor becomes completely non-interactive. + +To programmatically enable/disable the editor, use `+tinymce.activeEditor.options.set('disabled', false/true)+`. + +*Type:* `+Boolean+` + +*Default value:* `+false+` + +*Possible values:* `+true+`, `+false+` + +=== Example: using `+disabled+` + +[source,js] +---- +tinymce.init({ + selector: 'textarea', // change this value according to your HTML + disabled: true +}); +---- \ No newline at end of file diff --git a/modules/ROOT/partials/configuration/icon_list.adoc b/modules/ROOT/partials/configuration/icon_list.adoc index 772dab3b63..d656230b70 100644 --- a/modules/ROOT/partials/configuration/icon_list.adoc +++ b/modules/ROOT/partials/configuration/icon_list.adoc @@ -6,7 +6,9 @@ | `+accordion+` | image:icons/accordion.svg[accordion.svg] | `+accordion.svg+` | `+action-next+` | image:icons/action-next.svg[action-next.svg] | `+action-next.svg+` | `+action-prev+` | image:icons/action-prev.svg[action-prev.svg] | `+action-prev.svg+` +| `+add-file+` | image:icons/add-file.svg[add-file.svg] | `+add-file.svg+` | `+addtag+` | image:icons/addtag.svg[addtag.svg] | `+addtag.svg+` +| `+adjustments+` | image:icons/adjustments.svg[adjustments.svg] | `+adjustments.svg+` | `+ai-prompt+` | image:icons/ai-prompt.svg[ai-prompt.svg] | `+ai-prompt.svg+` | `+ai+` | image:icons/ai.svg[ai.svg] | `+ai.svg+` | `+align-center+` | image:icons/align-center.svg[align-center.svg] | `+align-center.svg+` @@ -14,15 +16,20 @@ | `+align-left+` | image:icons/align-left.svg[align-left.svg] | `+align-left.svg+` | `+align-none+` | image:icons/align-none.svg[align-none.svg] | `+align-none.svg+` | `+align-right+` | image:icons/align-right.svg[align-right.svg] | `+align-right.svg+` +| `+alt-text+` | image:icons/alt-text.svg[alt-text.svg] | `+alt-text.svg+` | `+arrow-left+` | image:icons/arrow-left.svg[arrow-left.svg] | `+arrow-left.svg+` | `+arrow-right+` | image:icons/arrow-right.svg[arrow-right.svg] | `+arrow-right.svg+` +| `+blur+` | image:icons/blur.svg[blur.svg] | `+blur.svg+` | `+bold+` | image:icons/bold.svg[bold.svg] | `+bold.svg+` | `+bookmark+` | image:icons/bookmark.svg[bookmark.svg] | `+bookmark.svg+` | `+border-style+` | image:icons/border-style.svg[border-style.svg] | `+border-style.svg+` | `+border-width+` | image:icons/border-width.svg[border-width.svg] | `+border-width.svg+` +| `+box+` | image:icons/box.svg[box.svg] | `+box.svg+` | `+brightness+` | image:icons/brightness.svg[brightness.svg] | `+brightness.svg+` | `+browse+` | image:icons/browse.svg[browse.svg] | `+browse.svg+` +| `+camera+` | image:icons/camera.svg[camera.svg] | `+camera.svg+` | `+cancel+` | image:icons/cancel.svg[cancel.svg] | `+cancel.svg+` +| `+caption+` | image:icons/caption.svg[caption.svg] | `+caption.svg+` | `+cell-background-color+` | image:icons/cell-background-color.svg[cell-background-color.svg] | `+cell-background-color.svg+` | `+cell-border-color+` | image:icons/cell-border-color.svg[cell-border-color.svg] | `+cell-border-color.svg+` | `+change-case+` | image:icons/change-case.svg[change-case.svg] | `+change-case.svg+` @@ -50,6 +57,7 @@ | `+cut+` | image:icons/cut.svg[cut.svg] | `+cut.svg+` | `+document-properties+` | image:icons/document-properties.svg[document-properties.svg] | `+document-properties.svg+` | `+drag+` | image:icons/drag.svg[drag.svg] | `+drag.svg+` +| `+dropbox+` | image:icons/dropbox.svg[dropbox.svg] | `+dropbox.svg+` | `+duplicate-column+` | image:icons/duplicate-column.svg[duplicate-column.svg] | `+duplicate-column.svg+` | `+duplicate-row+` | image:icons/duplicate-row.svg[duplicate-row.svg] | `+duplicate-row.svg+` | `+duplicate+` | image:icons/duplicate.svg[duplicate.svg] | `+duplicate.svg+` @@ -58,11 +66,16 @@ | `+embed-page+` | image:icons/embed-page.svg[embed-page.svg] | `+embed-page.svg+` | `+embed+` | image:icons/embed.svg[embed.svg] | `+embed.svg+` | `+emoji+` | image:icons/emoji.svg[emoji.svg] | `+emoji.svg+` +| `+evernote+` | image:icons/evernote.svg[evernote.svg] | `+evernote.svg+` | `+export-pdf+` | image:icons/export-pdf.svg[export-pdf.svg] | `+export-pdf.svg+` | `+export-word+` | image:icons/export-word.svg[export-word.svg] | `+export-word.svg+` +| `+exposure+` | image:icons/exposure.svg[exposure.svg] | `+exposure.svg+` +| `+fb+` | image:icons/fb.svg[fb.svg] | `+fb.svg+` | `+fill+` | image:icons/fill.svg[fill.svg] | `+fill.svg+` +| `+flickr+` | image:icons/flickr.svg[flickr.svg] | `+flickr.svg+` | `+flip-horizontally+` | image:icons/flip-horizontally.svg[flip-horizontally.svg] | `+flip-horizontally.svg+` | `+flip-vertically+` | image:icons/flip-vertically.svg[flip-vertically.svg] | `+flip-vertically.svg+` +| `+folder+` | image:icons/folder.svg[folder.svg] | `+folder.svg+` | `+footnote+` | image:icons/footnote.svg[footnote.svg] | `+footnote.svg+` | `+format-code+` | image:icons/format-code.svg[format-code.svg] | `+format-code.svg+` | `+format-painter+` | image:icons/format-painter.svg[format-painter.svg] | `+format-painter.svg+` @@ -70,10 +83,16 @@ | `+fullscreen+` | image:icons/fullscreen.svg[fullscreen.svg] | `+fullscreen.svg+` | `+gallery+` | image:icons/gallery.svg[gallery.svg] | `+gallery.svg+` | `+gamma+` | image:icons/gamma.svg[gamma.svg] | `+gamma.svg+` +| `+google-drive+` | image:icons/google-drive.svg[google-drive.svg] | `+google-drive.svg+` +| `+google-photos+` | image:icons/google-photos.svg[google-photos.svg] | `+google-photos.svg+` +| `+grayscale+` | image:icons/grayscale.svg[grayscale.svg] | `+grayscale.svg+` | `+help+` | image:icons/help.svg[help.svg] | `+help.svg+` | `+highlight-bg-color+` | image:icons/highlight-bg-color.svg[highlight-bg-color.svg] | `+highlight-bg-color.svg+` | `+home+` | image:icons/home.svg[home.svg] | `+home.svg+` | `+horizontal-rule+` | image:icons/horizontal-rule.svg[horizontal-rule.svg] | `+horizontal-rule.svg+` +| `+huddle+` | image:icons/huddle.svg[huddle.svg] | `+huddle.svg+` +| `+image-decorative+` | image:icons/image-decorative.svg[image-decorative.svg] | `+image-decorative.svg+` +| `+image-enhancements+` | image:icons/image-enhancements.svg[image-enhancements.svg] | `+image-enhancements.svg+` | `+image-options+` | image:icons/image-options.svg[image-options.svg] | `+image-options.svg+` | `+image+` | image:icons/image.svg[image.svg] | `+image.svg+` | `+import-word+` | image:icons/import-word.svg[import-word.svg] | `+import-word.svg+` @@ -81,6 +100,7 @@ | `+info+` | image:icons/info.svg[info.svg] | `+info.svg+` | `+insert-character+` | image:icons/insert-character.svg[insert-character.svg] | `+insert-character.svg+` | `+insert-time+` | image:icons/insert-time.svg[insert-time.svg] | `+insert-time.svg+` +| `+instagram+` | image:icons/instagram.svg[instagram.svg] | `+instagram.svg+` | `+invert+` | image:icons/invert.svg[invert.svg] | `+invert.svg+` | `+italic+` | image:icons/italic.svg[italic.svg] | `+italic.svg+` | `+language+` | image:icons/language.svg[language.svg] | `+language.svg+` @@ -111,6 +131,7 @@ | `+new-tab+` | image:icons/new-tab.svg[new-tab.svg] | `+new-tab.svg+` | `+non-breaking+` | image:icons/non-breaking.svg[non-breaking.svg] | `+non-breaking.svg+` | `+notice+` | image:icons/notice.svg[notice.svg] | `+notice.svg+` +| `+onedrive+` | image:icons/onedrive.svg[onedrive.svg] | `+onedrive.svg+` | `+ordered-list-rtl+` | image:icons/ordered-list-rtl.svg[ordered-list-rtl.svg] | `+ordered-list-rtl.svg+` | `+ordered-list+` | image:icons/ordered-list.svg[ordered-list.svg] | `+ordered-list.svg+` | `+orientation+` | image:icons/orientation.svg[orientation.svg] | `+orientation.svg+` @@ -133,13 +154,15 @@ | `+reload+` | image:icons/reload.svg[reload.svg] | `+reload.svg+` | `+remove-formatting+` | image:icons/remove-formatting.svg[remove-formatting.svg] | `+remove-formatting.svg+` | `+remove+` | image:icons/remove.svg[remove.svg] | `+remove.svg+` -| `+revision-history+` | image:icons/revision-history.svg[revision-history.svg] | `+revision-history.svg+` | `+resize-handle+` | image:icons/resize-handle.svg[resize-handle.svg] | `+resize-handle.svg+` | `+resize+` | image:icons/resize.svg[resize.svg] | `+resize.svg+` | `+restore-draft+` | image:icons/restore-draft.svg[restore-draft.svg] | `+restore-draft.svg+` +| `+revert+` | image:icons/revert.svg[revert.svg] | `+revert.svg+` +| `+revision-history+` | image:icons/revision-history.svg[revision-history.svg] | `+revision-history.svg+` | `+rotate-left+` | image:icons/rotate-left.svg[rotate-left.svg] | `+rotate-left.svg+` | `+rotate-right+` | image:icons/rotate-right.svg[rotate-right.svg] | `+rotate-right.svg+` | `+rtl+` | image:icons/rtl.svg[rtl.svg] | `+rtl.svg+` +| `+saturation+` | image:icons/saturation.svg[saturation.svg] | `+saturation.svg+` | `+save+` | image:icons/save.svg[save.svg] | `+save.svg+` | `+search+` | image:icons/search.svg[search.svg] | `+search.svg+` | `+select-all+` | image:icons/select-all.svg[select-all.svg] | `+select-all.svg+` @@ -180,6 +203,7 @@ | `+text-size-decrease+` | image:icons/text-size-decrease.svg[text-size-decrease.svg] | `+text-size-decrease.svg+` | `+text-size-increase+` | image:icons/text-size-increase.svg[text-size-increase.svg] | `+text-size-increase.svg+` | `+toc+` | image:icons/toc.svg[toc.svg] | `+toc.svg+` +| `+transform-image+` | image:icons/transform-image.svg[transform-image.svg] | `+transform-image.svg+` | `+translate+` | image:icons/translate.svg[translate.svg] | `+translate.svg+` | `+typography+` | image:icons/typography.svg[typography.svg] | `+typography.svg+` | `+underline+` | image:icons/underline.svg[underline.svg] | `+underline.svg+` @@ -191,9 +215,12 @@ | `+upload+` | image:icons/upload.svg[upload.svg] | `+upload.svg+` | `+user+` | image:icons/user.svg[user.svg] | `+user.svg+` | `+vertical-align+` | image:icons/vertical-align.svg[vertical-align.svg] | `+vertical-align.svg+` +| `+vibrance+` | image:icons/vibrance.svg[vibrance.svg] | `+vibrance.svg+` | `+visualblocks+` | image:icons/visualblocks.svg[visualblocks.svg] | `+visualblocks.svg+` | `+visualchars+` | image:icons/visualchars.svg[visualchars.svg] | `+visualchars.svg+` +| `+vk+` | image:icons/vk.svg[vk.svg] | `+vk.svg+` +| `+warmth+` | image:icons/warmth.svg[warmth.svg] | `+warmth.svg+` | `+warning+` | image:icons/warning.svg[warning.svg] | `+warning.svg+` | `+zoom-in+` | image:icons/zoom-in.svg[zoom-in.svg] | `+zoom-in.svg+` | `+zoom-out+` | image:icons/zoom-out.svg[zoom-out.svg] | `+zoom-out.svg+` -|=== +|=== \ No newline at end of file diff --git a/modules/ROOT/partials/configuration/tinycomments_reply.adoc b/modules/ROOT/partials/configuration/tinycomments_reply.adoc index 452d98c993..99d0283433 100644 --- a/modules/ROOT/partials/configuration/tinycomments_reply.adoc +++ b/modules/ROOT/partials/configuration/tinycomments_reply.adoc @@ -16,7 +16,9 @@ The `+done+` callback should accept the following object: [source,js] ---- { - commentUid: string // the value of the new comment uid + commentUid: string, // the new comment uid + author: string, // the id of the current author + authorName: string // the name of the current author } ---- @@ -42,7 +44,11 @@ const reply_comment = (ref, done, fail) => { }) .then((ref2) => { let commentUid = ref2.commentUid; - done({ commentUid: commentUid }); + done({ + commentUid: replyUid, + author: currentUser.id, + authorName: currentUser.fullName + }); }) .catch((e) => { fail(e); diff --git a/modules/ROOT/partials/configuration/uploadcare_cdn_base_url.adoc b/modules/ROOT/partials/configuration/uploadcare_cdn_base_url.adoc new file mode 100644 index 0000000000..e21808e46d --- /dev/null +++ b/modules/ROOT/partials/configuration/uploadcare_cdn_base_url.adoc @@ -0,0 +1,21 @@ +[[uploadcare-cdn-base-url]] +== `uploadcare_cdn_base_url` + +Specifies the domain used for the Uploadcare service. This domain determines where your files are uploaded and accessed. By default, the plugin uses the Uploadcare CDN `ucarecdn.com` to host and deliver your files. If you use a custom domain, update this option to match your configuration. + +*Type:* `+String+` + +*Default:* `+https://ucarecdn.com/+` + +=== Example: Customizing `uploadcare_cdn_base_url` + +[source,js] +---- +tinymce.init({ + selector: "textarea", + plugins: 'uploadcare', + toolbar: 'uploadcare', + uploadcare_public_key: '', + uploadcare_cdn_base_url: 'https://cdn.mydomain.com', +}); +---- \ No newline at end of file diff --git a/modules/ROOT/partials/configuration/uploadcare_public_key.adoc b/modules/ROOT/partials/configuration/uploadcare_public_key.adoc new file mode 100644 index 0000000000..97d032f693 --- /dev/null +++ b/modules/ROOT/partials/configuration/uploadcare_public_key.adoc @@ -0,0 +1,21 @@ +[[uploadcare-public-key]] +== `uploadcare_public_key` + +Defines the public API key required to authenticate and interact with the Uploadcare API. This key identifies your account and ensures that uploads and operations are associated with your project. Without setting this key, the Uploadcare integration will not function. + +[IMPORTANT] +This option is mandatory for using Uploadcare. + +*Type:* `+String+` + +=== Example: Setting `uploadcare_public_key` + +[source,js] +---- +tinymce.init({ + selector: 'textarea', + plugins: 'uploadcare', + toolbar: 'uploadcare', + uploadcare_public_key: '', +}); +---- \ No newline at end of file diff --git a/modules/ROOT/partials/configuration/uploadcare_signed_upload_auth_provider.adoc b/modules/ROOT/partials/configuration/uploadcare_signed_upload_auth_provider.adoc new file mode 100644 index 0000000000..7d760afd5f --- /dev/null +++ b/modules/ROOT/partials/configuration/uploadcare_signed_upload_auth_provider.adoc @@ -0,0 +1,37 @@ +[[uploadcare-signed-upload-auth-provider]] +== `uploadcare_signed_upload_auth_provider` + +Specifies a function used to generate secure signatures for authenticated requests to Uploadcare. This function is required when enabling Uploadcare's signed uploads feature, which ensures that only authorized users can upload files using your `uploadcare_public_key`. The function should return a `Promise` that resolves with an object containing the signature and expiration timestamp. + +Use this option to enforce secure uploads, preventing unauthorized users from uploading files via your application. + +*Type:* `+Function+` + +=== Example: Setting `uploadcare_signed_upload_auth_provider` + +[source,js] +---- +tinymce.init({ + selector: 'textarea', + plugins: 'uploadcare', + toolbar: 'uploadcare', + uploadcare_public_key: '', + uploadcare_signed_upload_auth_provider: (_publicKey) => Promise.resolve({ + signature: 'sig', + expire: 123 + }), +}); +---- + +[IMPORTANT] +==== +{companyname} recommends configuring the `uploadcare_signed_upload_auth_provider` option to secure uploads and prevent misuse of your Uploadcare `uploadcare_public_key`. This option is essential for applications requiring: + +* Prevention of unauthorized file uploads via your `uploadcare_public_key`. +* Enforcement of secure upload practices for application integrity. + +[NOTE] +This option **only** secures unauthorized access to upload files to the uploadcare storage by verifying signatures during uploads. + +For most integrations, enabling signed uploads by configuring this option ensures that only authorized uploads occur, reducing the risk of abuse and maintaining secure usage of your `uploadcare_public_key`. +==== diff --git a/modules/ROOT/partials/configuration/uploadcare_srcset_steps.adoc b/modules/ROOT/partials/configuration/uploadcare_srcset_steps.adoc new file mode 100644 index 0000000000..9def602a33 --- /dev/null +++ b/modules/ROOT/partials/configuration/uploadcare_srcset_steps.adoc @@ -0,0 +1,48 @@ +[[uploadcare-srcset-steps]] +== `uploadcare_srcset_steps` + +Specifies an array of numeric values representing the widths used to generate the `srcset` attribute for responsive images. This enables browsers to select the most suitable resolution based on the device’s display and network conditions. + +Customize this array to include **only** the widths required for your application. Reducing the number of resolutions can improve processing speed, while adding specific sizes can accommodate unique layout needs. + +*Type:* `+Array+` + +*Default:* `+[100, 200, 300, 500, 750, 1000, 1250, 1500, 2000, 2500, 3000]+` + +=== Example: Generated `srcset` Attribute with Custom Widths + +When an image is uploaded, its original width is used to create a `srcset` attribute with downscaled images for the defined widths. For instance, if the image width is 780 pixels and `uploadcare_srcset_steps` is set to `[100, 200, 300, 500, 750]`, the resulting `srcset` will look like this: + +.Example: Responsive 780px Image with Custom Widths in `srcset` +[source,html] +---- + +---- + +This ensures the browser selects the optimal image size based on the viewport and device characteristics, enhancing performance and user experience. On devices with narrower viewports, smaller images (e.g., 100w or 200w) will be prioritized, reducing bandwidth usage. + +=== Example: Customizing `uploadcare_srcset_steps` + +To customize the array, update the configuration as shown below: + +[source,js] +---- +tinymce.init({ + selector: 'textarea', + plugins: 'uploadcare', + toolbar: 'uploadcare', + uploadcare_public_key: '', + uploadcare_srcset_steps: [100, 200, 300, 500, 750], +}); +---- diff --git a/modules/ROOT/partials/configuration/uploadcare_store_type.adoc b/modules/ROOT/partials/configuration/uploadcare_store_type.adoc new file mode 100644 index 0000000000..eb42668f69 --- /dev/null +++ b/modules/ROOT/partials/configuration/uploadcare_store_type.adoc @@ -0,0 +1,29 @@ +[[uploadcare-store-type]] +== `uploadcare_store_type` + +Specifies the storage type for uploaded files. Use this option to control whether files are stored temporarily or permanently, or allow Uploadcare to decide automatically based on your account settings. + +* `auto`: Uploadcare decides the storage type. +* `temporary`: Files are stored temporarily and will expire after a certain period. +* `permanent`: Files are stored permanently in your Uploadcare account. + +Select the appropriate value based on your application's requirements, such as whether files should persist for long-term use or be available for a limited time. + +*Type:* `+String+` + +*Default:* `permanent` + +*Possible values:* `auto`, `temporary`, `permanent` + +=== Example: Using `uploadcare_store_type` + +[source,js] +---- +tinymce.init({ + selector: 'textarea', + plugins: 'uploadcare', + toolbar: 'uploadcare', + uploadcare_public_key: '', + uploadcare_store_type: 'permanent', +}); +---- \ No newline at end of file diff --git a/modules/ROOT/partials/index-pages/premium-plugins.adoc b/modules/ROOT/partials/index-pages/premium-plugins.adoc index e38f404eab..3d76fe8cc5 100644 --- a/modules/ROOT/partials/index-pages/premium-plugins.adoc +++ b/modules/ROOT/partials/index-pages/premium-plugins.adoc @@ -99,6 +99,12 @@ xref:editimage.adoc[Image Editing] Image Editing features for {productname}. +a| +[.lead] +xref:uploadcare.adoc[Image Optimizer Powered by Uploadcare] + +Image optimization features for {productname}. + a| [.lead] xref:linkchecker.adoc[Link Checker] diff --git a/modules/ROOT/partials/menu-item-ids/uploadcare-menu-items.adoc b/modules/ROOT/partials/menu-item-ids/uploadcare-menu-items.adoc new file mode 100644 index 0000000000..27b724ae32 --- /dev/null +++ b/modules/ROOT/partials/menu-item-ids/uploadcare-menu-items.adoc @@ -0,0 +1,5 @@ +[cols="1,3",options="header"] +|=== +|Identifier |Description +| `+uploadcare+` | Inserts an image placeholder element. This placeholder supports image uploads via drag-and-drop, file selection, or by providing a URL. +|=== \ No newline at end of file diff --git a/modules/ROOT/partials/misc/admon-accessibility-rule-i3-can-also-be-applied.adoc b/modules/ROOT/partials/misc/admon-accessibility-rule-i3-can-also-be-applied.adoc index 39650322f0..24afe58283 100644 --- a/modules/ROOT/partials/misc/admon-accessibility-rule-i3-can-also-be-applied.adoc +++ b/modules/ROOT/partials/misc/admon-accessibility-rule-i3-can-also-be-applied.adoc @@ -1 +1,4 @@ -NOTE: In {productname} 6.3 and later, rule xref:I3[I3] can also be applied. If applied, an _Image alternative text should be less than 100 characters_ warning dialog presents if the alternative (`+alt+`) text is longer than 100 characters. This dialog also presents the alternative text in an editable field, for immediate repair. +[NOTE] +==== +In {productname} 6.3 and later, rule xref:I3[I3] can also be applied. If applied, an _Image alternative text should be less than 100 characters_ warning dialog presents if the alternative (`+alt+`) text is longer than 100 characters. This dialog also presents the alternative text in an editable field, for immediate repair. +==== \ No newline at end of file diff --git a/modules/ROOT/partials/misc/admon-requires-7.6v.adoc b/modules/ROOT/partials/misc/admon-requires-7.6v.adoc new file mode 100644 index 0000000000..4983434a45 --- /dev/null +++ b/modules/ROOT/partials/misc/admon-requires-7.6v.adoc @@ -0,0 +1 @@ +NOTE: This feature is only available for {productname} 7.6.0 and later. diff --git a/modules/ROOT/partials/misc/premium-plugin-list.adoc b/modules/ROOT/partials/misc/premium-plugin-list.adoc index f3219df51d..f93f16cf84 100644 --- a/modules/ROOT/partials/misc/premium-plugin-list.adoc +++ b/modules/ROOT/partials/misc/premium-plugin-list.adoc @@ -13,6 +13,7 @@ * xref:importword.adoc[Import from Word] * xref:inline-css.adoc[Inline CSS] * xref:editimage.adoc[Image Editing] +* xref:uploadcare.adoc[Image Optimizer Powered by Uploadcare] * xref:linkchecker.adoc[Link Checker] * xref:math.adoc[Math] * xref:markdown.adoc[Markdown] diff --git a/modules/ROOT/partials/misc/supported-versions.adoc b/modules/ROOT/partials/misc/supported-versions.adoc index ed0795b63e..f8bb653f21 100644 --- a/modules/ROOT/partials/misc/supported-versions.adoc +++ b/modules/ROOT/partials/misc/supported-versions.adoc @@ -6,6 +6,7 @@ Supported versions of {productname}: [cols="^,^,^",options="header"] |=== |Version |Release Date |End of Premium Support +|7.6 |2025-12-04 |2027-06-04 |7.5 |2025-11-06 |2027-05-06 |7.4 |2024-10-09 |2026-04-09 |7.3 |2024-08-07 |2026-02-07 diff --git a/modules/ROOT/partials/plugin-apis/comments-apis.adoc b/modules/ROOT/partials/plugin-apis/comments-apis.adoc index 127d967288..43645de59b 100644 --- a/modules/ROOT/partials/plugin-apis/comments-apis.adoc +++ b/modules/ROOT/partials/plugin-apis/comments-apis.adoc @@ -63,6 +63,10 @@ The `getEventLog` returns a log that contains information and timestamps of all "conversationContent": "new comment (Edit comment)", "conversationCreatedAt": "2024-10-01T03:07:53.771Z", "commentContent": "reply to existing comment", + "commentAuthor": { + "author": "DEMO USER", + "authorName": "DEMO USER" + }, "conversationAuthor": { "author": "DEMO USER", "authorName": "DEMO USER" diff --git a/modules/ROOT/partials/toolbar-button-ids/uploadcare-toolbar-buttons.adoc b/modules/ROOT/partials/toolbar-button-ids/uploadcare-toolbar-buttons.adoc new file mode 100644 index 0000000000..27b724ae32 --- /dev/null +++ b/modules/ROOT/partials/toolbar-button-ids/uploadcare-toolbar-buttons.adoc @@ -0,0 +1,5 @@ +[cols="1,3",options="header"] +|=== +|Identifier |Description +| `+uploadcare+` | Inserts an image placeholder element. This placeholder supports image uploads via drag-and-drop, file selection, or by providing a URL. +|=== \ No newline at end of file