From 608787aaeb84a1e6591f3469bb5126a4b29f2eeb Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Thu, 30 Oct 2025 09:13:20 +1000 Subject: [PATCH 1/6] DOC-3314: Update navbar for Media Optimizer to be in alphabetical order for premium plugins and improve demos. --- .../uploadcare-full-feature/example.js | 4 +- .../uploadcare-full-feature/index.html | 67 +++++++++---------- .../uploadcare-full-feature/index.js | 4 +- .../live-demos/uploadcare-video/example.js | 4 +- .../live-demos/uploadcare-video/index.js | 4 +- modules/ROOT/nav.adoc | 6 +- 6 files changed, 39 insertions(+), 50 deletions(-) diff --git a/modules/ROOT/examples/live-demos/uploadcare-full-feature/example.js b/modules/ROOT/examples/live-demos/uploadcare-full-feature/example.js index 7f34993e1c..37d114d241 100644 --- a/modules/ROOT/examples/live-demos/uploadcare-full-feature/example.js +++ b/modules/ROOT/examples/live-demos/uploadcare-full-feature/example.js @@ -23,9 +23,7 @@ tinymce.init({ loop: false, muted: true, preload: 'metadata', - poster: 'https://placehold.co/600x400', - width: 640, - height: 360, + posterOffset: "0:10", showLogo: false }, a11y_advanced_options: true, diff --git a/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.html b/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.html index 49975197ab..a6fc0c46da 100644 --- a/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.html +++ b/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.html @@ -1,36 +1,33 @@ \ No newline at end of file +

Discover Your Dream Home on Mallorca: Where Paradise Meets Investment

+

Mallorca, the jewel of the Mediterranean, is not just a place of beauty—it’s a smart investment. With property values consistently on the rise, now is the perfect time to secure your piece of this sun-soaked paradise. 

+
Mallorca +
Michael Heuser on Unsplash
+
+

Let us show you why Mallorca should be your next home—and introduce you to an exquisite villa that could soon be yours.

+
"The Mallorca real estate market has grown by an impressive 8% annually over the past five years," — Elena Alvarez, Market Analyst at Mediterranean Realty Insights.
+

According to recent market data, Mallorca’s property values have experienced steady growth, with an average increase of 8% annually over the past five years. This consistent appreciation, coupled with a thriving rental market, makes it an ideal destination for investors seeking both luxury and financial returns. 

+

Experience Mallorca in Motion

+

Before we explore the island’s most exclusive properties, take a moment to experience the allure of Mallorca itself.

+

Feel the warmth of the Mediterranean sun, hear the gentle rhythm of the waves, and imagine life surrounded by timeless beauty and tranquility. Watch this captivating video that brings the island’s lifestyle and charm to life:

+ +

Explore Our Featured Villa: The Epitome of Luxury 

+

Located in one of Mallorca’s most exclusive areas, this exquisite villa offers breathtaking views and modern design. Every detail has been meticulously crafted to provide the ultimate in comfort and elegance.

+
luxury wooden house interior +
Designed by Freepik
+
+ +
beautiful kitchen interior design +
Designed by Freepik
+
+

Step inside, and you’ll find bright, open living spaces that blend seamlessly with the outdoors, creating a harmonious living environment that’s both relaxing and inspiring.

+

Owning a villa in Mallorca means more than just having a home—it means living a life of luxury and adventure. From exploring charming villages to dining at world-class restaurants and sailing the turquoise waters, every day is a new experience.

+

Make This Dream a Reality

+

Don’t miss the opportunity to own a piece of paradise. Contact us today to schedule a private tour of this exceptional villa and explore other exclusive properties on the island.

+ \ No newline at end of file diff --git a/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js b/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js index 90d9ce8549..da915047a7 100644 --- a/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js +++ b/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js @@ -22,9 +22,7 @@ tinymce.init({ loop: false, muted: true, preload: 'metadata', - // poster: 'https://placehold.co/600x400', // Optional poster image URL - width: 640, - height: 360, + posterOffset: "0:10", showLogo: false }, a11y_advanced_options: true, diff --git a/modules/ROOT/examples/live-demos/uploadcare-video/example.js b/modules/ROOT/examples/live-demos/uploadcare-video/example.js index 2a9bad1c1f..8a886189a8 100644 --- a/modules/ROOT/examples/live-demos/uploadcare-video/example.js +++ b/modules/ROOT/examples/live-demos/uploadcare-video/example.js @@ -9,9 +9,7 @@ tinymce.init({ loop: false, muted: true, preload: 'metadata', - // poster: 'https://placehold.co/600x400', // Optional poster image URL - width: 640, - height: 360, + posterOffset: "0:10", showLogo: false }, a11y_advanced_options: true, diff --git a/modules/ROOT/examples/live-demos/uploadcare-video/index.js b/modules/ROOT/examples/live-demos/uploadcare-video/index.js index ee7d6aea71..d86c6ffa53 100644 --- a/modules/ROOT/examples/live-demos/uploadcare-video/index.js +++ b/modules/ROOT/examples/live-demos/uploadcare-video/index.js @@ -11,9 +11,7 @@ tinymce.init({ loop: false, muted: true, preload: 'metadata', - // poster: 'https://placehold.co/600x400', // Optional poster image URL - width: 640, - height: 360, + posterOffset: "0:10", showLogo: false }, a11y_advanced_options: true, diff --git a/modules/ROOT/nav.adoc b/modules/ROOT/nav.adoc index 1e899f2647..9c52fb07ed 100644 --- a/modules/ROOT/nav.adoc +++ b/modules/ROOT/nav.adoc @@ -328,13 +328,13 @@ ***** xref:import-from-word-with-jwt-authentication-nodejs.adoc[Node.js] ***** xref:import-from-word-with-jwt-authentication-php.adoc[PHP] *** xref:editimage.adoc[Image Editing] -*** xref:uploadcare.adoc[Media Optimizer] -**** xref:uploadcare-image.adoc[Image] -**** xref:uploadcare-video.adoc[Video] *** xref:inline-css.adoc[Inline CSS] *** xref:linkchecker.adoc[Link Checker] *** xref:math.adoc[Math] *** xref:markdown.adoc[Markdown] +*** xref:uploadcare.adoc[Media Optimizer] +**** xref:uploadcare-image.adoc[Image] +**** xref:uploadcare-video.adoc[Video] *** xref:mentions.adoc[Mentions] *** xref:mergetags.adoc[Merge Tags] *** xref:moxiemanager.adoc[MoxieManager] From 9be9edbfed23e2e74b63080bb4d8e5636f2690d2 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Thu, 30 Oct 2025 09:19:58 +1000 Subject: [PATCH 2/6] DOC-3314: Fix order in premium plugins list to match navigation order. --- .../ROOT/partials/index-pages/premium-plugins.adoc | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/modules/ROOT/partials/index-pages/premium-plugins.adoc b/modules/ROOT/partials/index-pages/premium-plugins.adoc index bc19c11484..8f1777535e 100644 --- a/modules/ROOT/partials/index-pages/premium-plugins.adoc +++ b/modules/ROOT/partials/index-pages/premium-plugins.adoc @@ -104,13 +104,6 @@ a| xref:editimage.adoc[Image Editing] Image Editing features for {productname}. - -a| -[.lead] -xref:uploadcare.adoc[Media Optimizer Powered by Uploadcare] - -Image and video optimization features for {productname}. - a| [.lead] xref:linkchecker.adoc[Link Checker] @@ -129,6 +122,12 @@ xref:markdown.adoc[Markdown] Enable conversion of pure markdown on paste. +a| +[.lead] +xref:uploadcare.adoc[Media Optimizer Powered by Uploadcare] + +Image and video optimization features for {productname}. + a| [.lead] xref:mentions.adoc[Mentions] From 4416dc222e1d8231f58c766e6f439823bb06692b Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Tue, 4 Nov 2025 11:17:54 +1000 Subject: [PATCH 3/6] DOC-3314: Update demo and add missing options from table. --- .../uploadcare-full-feature/example.js | 40 ++++++----- .../uploadcare-full-feature/index.html | 12 ++-- .../uploadcare-full-feature/index.js | 30 ++++----- .../live-demos/uploadcare-video/example.js | 66 +++++++++---------- .../live-demos/uploadcare-video/index.js | 55 +++++++--------- modules/ROOT/pages/uploadcare.adoc | 2 +- .../uploadcare_video_properties.adoc | 7 +- 7 files changed, 102 insertions(+), 110 deletions(-) diff --git a/modules/ROOT/examples/live-demos/uploadcare-full-feature/example.js b/modules/ROOT/examples/live-demos/uploadcare-full-feature/example.js index 37d114d241..0870af9504 100644 --- a/modules/ROOT/examples/live-demos/uploadcare-full-feature/example.js +++ b/modules/ROOT/examples/live-demos/uploadcare-full-feature/example.js @@ -3,18 +3,15 @@ tinymce.init({ plugins: [ "uploadcare", "code", "link", "preview", "lists" ], uploadcare_public_key: '', uploadcare_filters: [ - { name: 'none' }, // No filter applied { name: 'adaris', amount: -100 }, // Adaris with inverted effect (amount -100), label defaults to 'adaris' - { name: 'adaris', amount: -100, label: 'Vintage Fade' }, // Adaris with inverted effect (amount -100), label reads 'Vintage Fade' + { name: 'adaris', amount: -100, label: 'Vintage' }, // Adaris with inverted effect (amount -100), label reads 'Vintage' { name: 'adaris', amount: 0, label: 'Base' }, // Adaris with neutral effect (amount 0), label reads 'Base' { name: 'adaris', amount: 50, label: 'Light' }, // Adaris with light effect (amount 50), label reads 'Light' - { name: 'adaris', amount: 100, label: 'Standard' }, // Adaris with standard effect (amount 100), label reads 'Standard' { name: 'adaris', amount: 200, label: 'Intense' }, // Adaris with intense effect (amount 200), label reads 'Intense' - { name: 'zevcen', amount: 200, label: 'Glow Boost' }, // Zevcen with intense effect (amount 200), label reads 'Glow Boost' - { name: 'galen', amount: 80, label: 'Soft Focus' }, // Galen with softening effect (amount 80), label reads 'Soft Focus' - { name: 'carris', amount: 120, label: 'Sharp Contrast' }, // Carris with high contrast (amount 120), label reads 'Sharp Contrast' - { name: 'ferand', amount: 60, label: 'Light Touch' }, // Ferand with light enhancement (amount 60), label reads 'Light Touch' - { name: 'sorahel', amount: -50, label: 'Night Mood' } // Sorahel with darkened effect (amount -50), label reads 'Night Mood' + { name: 'galen', amount: 80, label: 'Soft' }, // Galen with softening effect (amount 80), label reads 'Soft' + { name: 'carris', amount: 120, label: 'Sharp' }, // Carris with high contrast (amount 120), label reads 'Sharp' + { name: 'sorahel', amount: -50, label: 'Night' }, // Sorahel with darkened effect (amount -50), label reads 'Night' + { name: 'none' }, // No filter applied ], // Video configuration uploadcare_video_properties: { @@ -24,22 +21,23 @@ tinymce.init({ muted: true, preload: 'metadata', posterOffset: "0:10", - showLogo: false + showLogo: false, + fluid: true, }, a11y_advanced_options: true, - toolbar: "undo redo | uploadcare uploadcare-video | styles | bold italic underline | forecolor | bullist numlist| link | code preview", + 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;} - uc-video { display: block; margin: 1rem 0; } + body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; }https://fiddle.tiny.cloud/5HPetOu0b2/38# + 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;} + uc-video { display: block; margin: 1rem 0; width: 100%;} ` }); \ No newline at end of file diff --git a/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.html b/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.html index a6fc0c46da..fc96288c3b 100644 --- a/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.html +++ b/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.html @@ -10,18 +10,18 @@

Discover Your Dream Home on Mallorca: Where Paradise Meets Investment

Experience Mallorca in Motion

Before we explore the island’s most exclusive properties, take a moment to experience the allure of Mallorca itself.

Feel the warmth of the Mediterranean sun, hear the gentle rhythm of the waves, and imagine life surrounded by timeless beauty and tranquility. Watch this captivating video that brings the island’s lifestyle and charm to life:

- +

Explore Our Featured Villa: The Epitome of Luxury 

Located in one of Mallorca’s most exclusive areas, this exquisite villa offers breathtaking views and modern design. Every detail has been meticulously crafted to provide the ultimate in comfort and elegance.

luxury wooden house interior
Designed by Freepik
    -
  • 5 luxurious bedrooms with private en-suite bathrooms
    • -
  • Infinity pool with panoramic Mediterranean views
    • -
  • Spacious terrace for outdoor dining and entertainment
    • -
  • Private garden with lush landscaping
    • -
  • Cutting-edge smart home system  
    • +
  • 5 luxurious bedrooms with private en-suite bathrooms
    • +
  • Infinity pool with panoramic Mediterranean views
    • +
  • Spacious terrace for outdoor dining and entertainment
    • +
  • Private garden with lush landscaping
    • +
  • Cutting-edge smart home system  
beautiful kitchen interior design
Designed by Freepik
diff --git a/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js b/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js index da915047a7..ef59219cfc 100644 --- a/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js +++ b/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js @@ -15,7 +15,6 @@ tinymce.init({ { name: 'sorahel', amount: -50, label: 'Night' }, // Sorahel with darkened effect (amount -50), label reads 'Night' { name: 'none' }, // No filter applied ], - // Video configuration uploadcare_video_properties: { autoplay: false, controls: true, @@ -23,22 +22,23 @@ tinymce.init({ muted: true, preload: 'metadata', posterOffset: "0:10", - showLogo: false + showLogo: false, + fluid: true, }, a11y_advanced_options: true, - toolbar: "undo redo | uploadcare uploadcare-video | styles | bold italic underline | forecolor | bullist numlist| link | code preview", + 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;} - uc-video { display: block; margin: 1rem 0; } - ` + body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; }https://fiddle.tiny.cloud/5HPetOu0b2/38# + 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;} + uc-video { display: block; margin: 1rem 0; width: 100%;} +` }); diff --git a/modules/ROOT/examples/live-demos/uploadcare-video/example.js b/modules/ROOT/examples/live-demos/uploadcare-video/example.js index 8a886189a8..1b33f6eba0 100644 --- a/modules/ROOT/examples/live-demos/uploadcare-video/example.js +++ b/modules/ROOT/examples/live-demos/uploadcare-video/example.js @@ -1,36 +1,32 @@ tinymce.init({ - selector: "textarea#uploadcare-video", - plugins: [ "uploadcare", "code", "link", "preview", "lists" ], - uploadcare_public_key: '', - // Video configuration - uploadcare_video_properties: { - autoplay: false, - controls: true, - loop: false, - muted: true, - preload: 'metadata', - posterOffset: "0:10", - showLogo: false - }, - a11y_advanced_options: true, - toolbar: "undo redo | uploadcare uploadcare-video | styles | bold italic underline | forecolor | bullist numlist| link | 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;} - uc-video { - display: block; - margin: 1rem 0; - border-radius: 8px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - } - ` - }); + selector: "textarea#uploadcare-video", + plugins: [ "uploadcare", "code", "link", "preview", "lists" ], + uploadcare_public_key: '', + // Video configuration + uploadcare_video_properties: { + autoplay: false, + controls: true, + loop: false, + muted: true, + preload: 'metadata', + posterOffset: "0:10", + showLogo: false, + fluid: true, +}, + a11y_advanced_options: true, + 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; }https://fiddle.tiny.cloud/5HPetOu0b2/38# + 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;} + uc-video { display: block; margin: 1rem 0; width: 100%;} + ` +}); diff --git a/modules/ROOT/examples/live-demos/uploadcare-video/index.js b/modules/ROOT/examples/live-demos/uploadcare-video/index.js index d86c6ffa53..8179330df2 100644 --- a/modules/ROOT/examples/live-demos/uploadcare-video/index.js +++ b/modules/ROOT/examples/live-demos/uploadcare-video/index.js @@ -1,38 +1,33 @@ tinymce.init({ - selector: "textarea#uploadcare-video", + selector: "textarea", plugins: [ "uploadcare", "code", "link", "preview", "lists" ], uploadcare_public_key: '630992ad50fe2291c406', - uploadcare_cdn_base_url: 'https://tiny.ucarecdn.com', - uploadcare_store_type: 'temporary', - // Video configuration + uploadcare_cdn_base_url: 'https://tiny.ucarecdn.com', + uploadcare_store_type: 'temporary', uploadcare_video_properties: { - autoplay: false, - controls: true, - loop: false, - muted: true, - preload: 'metadata', - posterOffset: "0:10", - showLogo: false - }, + autoplay: false, + controls: true, + loop: false, + muted: true, + preload: 'metadata', + posterOffset: "0:10", + showLogo: false, + fluid: true, +}, a11y_advanced_options: true, - toolbar: "undo redo | uploadcare uploadcare-video | styles | bold italic underline | forecolor | bullist numlist| link | code preview", + 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;} - uc-video { - display: block; - margin: 1rem 0; - border-radius: 8px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - } - ` + body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; }https://fiddle.tiny.cloud/5HPetOu0b2/38# + 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;} + uc-video { display: block; margin: 1rem 0; width: 100%;} +` }); diff --git a/modules/ROOT/pages/uploadcare.adoc b/modules/ROOT/pages/uploadcare.adoc index a722cae1fd..5dae0c0290 100644 --- a/modules/ROOT/pages/uploadcare.adoc +++ b/modules/ROOT/pages/uploadcare.adoc @@ -24,7 +24,7 @@ The {pluginname} plugin extends {productname} with powerful media handling featu * Enterprise-ready cloud storage with global CDN delivery * Built-in security with malware protection and content detection -== Interactive example +== Full featured interactive example liveDemo::uploadcare-full-feature[] diff --git a/modules/ROOT/partials/configuration/uploadcare_video_properties.adoc b/modules/ROOT/partials/configuration/uploadcare_video_properties.adoc index 040b4c3dca..e87d349321 100644 --- a/modules/ROOT/partials/configuration/uploadcare_video_properties.adoc +++ b/modules/ROOT/partials/configuration/uploadcare_video_properties.adoc @@ -12,15 +12,17 @@ Configures the video player properties and behavior for video elements. [cols="1,1,2,1,2"] |=== |Property | Type | Valid Values | Default | Description -|`autoplay` | Boolean | `true`, `false`, `undefined` | `undefined` | Automatically starts video playback when the page loads. +|`autoplay` | Boolean | `true`, `false`, `undefined` | `undefined` | Automatically starts video playback when the page loads. NOTE: Even if autoplay is enabled, modern browsers may delay or block playback until the user interacts with the page, depending on their autoplay policies. |`controls` | Boolean | `true`, `false` | `true` | Displays the video player controls (play/pause, volume, timeline, fullscreen, etc.). When disabled, users can still control playback through keyboard shortcuts or programmatic methods. +|`disablePictureInPicture` | Boolean | `true`, `false`, `undefined` | `undefined` | Disables the Picture-in-Picture feature for the video player. When enabled, users cannot use Picture-in-Picture mode. |`height` | Number or String | Pixels or CSS value | `undefined` | Sets the video player height. Accepts numeric values (interpreted as pixels) or CSS values like `"100%"`, `"50vh"`, or `"auto"`. |`loop` | Boolean | `true`, `false`, `undefined` | `undefined` | Automatically restarts video playback from the beginning when it reaches the end. Useful for background videos or continuous content loops. |`muted` | Boolean | `true`, `false`, `undefined` | `undefined` | Mutes the video audio by default. Often used in combination with autoplay since most browsers require muted videos for autoplay to function. |`poster` | String | Valid URL | `undefined` | Sets a poster image (thumbnail) that displays before video playback begins. The image should match the video's aspect ratio for best results. +|`posterOffset` | String | Time format `"MM:SS"` or `"H:MM:SS"` | `undefined` | Sets the time offset for generating a poster image from the video. When `poster` is not specified, this value determines the frame to use as the poster. Format: `"0:10"` for 10 seconds, `"1:30"` for 1 minute 30 seconds. |`preload` | String | `auto`, `metadata`, `none` | `undefined` | Controls how much video data to preload: `auto` loads the entire video, `metadata` loads only basic information, `none` loads nothing until playback starts. Performance considerations: use `metadata` for better page load times and bandwidth conservation, `auto` for immediate playback without buffering delays, and `none` for maximum bandwidth savings when videos may not be played. +|`showLogo` | Boolean | `true`, `false` | `false` | Displays the Uploadcare logo overlay on the video player. |`width` | Number or String | Pixels or CSS value | `undefined` | Sets the video player width. Accepts numeric values (interpreted as pixels) or CSS values like `"100%"`, `"50vw"`, or `"auto"`. -|`showLogo` | Boolean | `true`, `false` | `true` | Displays the Uploadcare logo overlay on the video player. |=== @@ -40,6 +42,7 @@ tinymce.init({ muted: true, preload: 'metadata', poster: 'https://placehold.co/600x400', // Optional poster image URL + posterOffset: '0:10', // Time offset for poster generation width: 640, height: 360, showLogo: false From 61749e8c11c9ffda0e2ed7e37dedf620ffbeec04 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Tue, 4 Nov 2025 11:27:02 +1000 Subject: [PATCH 4/6] DOC-3314: Add known issue to 8.2.0 release notes for audio duplication issue. --- modules/ROOT/nav.adoc | 1 + modules/ROOT/pages/8.2.0-release-notes.adoc | 16 +++++++++++++++- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/modules/ROOT/nav.adoc b/modules/ROOT/nav.adoc index 9c52fb07ed..46505854a0 100644 --- a/modules/ROOT/nav.adoc +++ b/modules/ROOT/nav.adoc @@ -426,6 +426,7 @@ **** xref:8.2.0-release-notes.adoc#accompanying-premium-plugin-changes[Accompanying Premium Plugin changes] **** xref:8.2.0-release-notes.adoc#improvements[Improvements] **** xref:8.2.0-release-notes.adoc#bug-fixes[Bug fixes] +**** xref:8.2.0-release-notes.adoc#known-issues[Known issues] *** {productname} 8.1.2 **** xref:8.1.2-release-notes.adoc#overview[Overview] **** xref:8.1.2-release-notes.adoc#bug-fix[Bug fix] diff --git a/modules/ROOT/pages/8.2.0-release-notes.adoc b/modules/ROOT/pages/8.2.0-release-notes.adoc index 85c6133f33..02b7cc28c0 100644 --- a/modules/ROOT/pages/8.2.0-release-notes.adoc +++ b/modules/ROOT/pages/8.2.0-release-notes.adoc @@ -16,6 +16,7 @@ include::partial$misc/admon-releasenotes-for-stable.adoc[] * xref:accompanying-premium-plugin-changes[Accompanying Premium plugin changes] * xref:improvements[Improvements] * xref:bug-fixes[Bug fixes] +* xref:known-issues[Known issues] [[accompanying-premium-plugin-changes]] @@ -210,4 +211,17 @@ For an example of using custom elements with block-level and inline-level compon In {productname} {release-version}, an issue was resolved where split buttons rendered narrower than in {productname} 7 and other toolbar buttons. This occurred because the main portion of the split button used a CSS rule that caused it to collapse to the icon size during initialization, resulting in an incorrect fixed width. This made split buttons appear visually inconsistent, reduced their clickability, and could cause text labels to be truncated. -{productname} {release-version} addresses this issue by adjusting the width behavior to inherit the correct `34px` for icons and auto for text—ensuring consistent sizing across the toolbar. \ No newline at end of file +{productname} {release-version} addresses this issue by adjusting the width behavior to inherit the correct `34px` for icons and auto for text—ensuring consistent sizing across the toolbar. + +== Known issues + +{productname} {release-version} also includes the following known issues: + +=== Uploadcare video audio continues playing after copying paused and muted video +// #TINY-13198 + +In certain edge cases, when a video is inserted, played, paused, and muted, then copied using **Ctrl+C** (or **Cmd+C** on Mac), the paused and muted video may begin playing audio. Once this occurs, the audio continues to play even after deleting the video from the editor. + +**Workaround:** None, the user must refresh the page to stop the unwanted audio which can result in the loss of any unsaved content. + +**Status:** Currently under investigation. \ No newline at end of file From a4acfb002248fe78526f5d10c49a39f6003e998e Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Tue, 4 Nov 2025 11:30:13 +1000 Subject: [PATCH 5/6] DOC-3314: Syntax correction. --- .../ROOT/examples/live-demos/uploadcare-full-feature/index.js | 4 ++-- modules/ROOT/examples/live-demos/uploadcare-video/index.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js b/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js index ef59219cfc..9fdc8fe47c 100644 --- a/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js +++ b/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js @@ -39,6 +39,6 @@ tinymce.init({ 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;} - uc-video { display: block; margin: 1rem 0; width: 100%;} -` + uc-video { display: block; margin: 1rem 0; width: 100%;} + ` }); diff --git a/modules/ROOT/examples/live-demos/uploadcare-video/index.js b/modules/ROOT/examples/live-demos/uploadcare-video/index.js index 8179330df2..b5f52059d4 100644 --- a/modules/ROOT/examples/live-demos/uploadcare-video/index.js +++ b/modules/ROOT/examples/live-demos/uploadcare-video/index.js @@ -28,6 +28,6 @@ tinymce.init({ 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;} - uc-video { display: block; margin: 1rem 0; width: 100%;} -` + uc-video { display: block; margin: 1rem 0; width: 100%;} + ` }); From fa06684bb735ab9c10c6cddbade945d1a2aa9808 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Wed, 5 Nov 2025 11:36:46 +1000 Subject: [PATCH 6/6] DOC-3314: update demo config. --- .../live-demos/uploadcare-full-feature/example.js | 10 +++++----- .../live-demos/uploadcare-full-feature/index.js | 10 +++++----- .../examples/live-demos/uploadcare-video/example.js | 10 +++++----- .../ROOT/examples/live-demos/uploadcare-video/index.js | 8 ++++---- 4 files changed, 19 insertions(+), 19 deletions(-) diff --git a/modules/ROOT/examples/live-demos/uploadcare-full-feature/example.js b/modules/ROOT/examples/live-demos/uploadcare-full-feature/example.js index 0870af9504..61e2f25b13 100644 --- a/modules/ROOT/examples/live-demos/uploadcare-full-feature/example.js +++ b/modules/ROOT/examples/live-demos/uploadcare-full-feature/example.js @@ -25,19 +25,19 @@ tinymce.init({ fluid: true, }, a11y_advanced_options: true, - toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist| link uploadcare | code preview", + toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist| link uploadcare uploadcare-video | code preview", height: 700, content_style: ` - body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; }https://fiddle.tiny.cloud/5HPetOu0b2/38# + body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } h1 { font-size: 1.5em; } - h2 { font-size: 1.17em; } + 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;} - uc-video { display: block; margin: 1rem 0; width: 100%;} + figcaption { font-size: 0.875em; } + uc-video { display: block; margin: 1rem 0; width: 100%; } ` }); \ No newline at end of file diff --git a/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js b/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js index 9fdc8fe47c..60a464ee53 100644 --- a/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js +++ b/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js @@ -26,19 +26,19 @@ tinymce.init({ fluid: true, }, a11y_advanced_options: true, - toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist| link uploadcare | code preview", + toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist | link uploadcare uploadcare-video | code preview", height: 700, content_style: ` - body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; }https://fiddle.tiny.cloud/5HPetOu0b2/38# + body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } h1 { font-size: 1.5em; } - h2 { font-size: 1.17em; } + 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;} - uc-video { display: block; margin: 1rem 0; width: 100%;} + figcaption { font-size: 0.875em; } + uc-video { display: block; margin: 1rem 0; width: 100%; } ` }); diff --git a/modules/ROOT/examples/live-demos/uploadcare-video/example.js b/modules/ROOT/examples/live-demos/uploadcare-video/example.js index 1b33f6eba0..55767f4ca5 100644 --- a/modules/ROOT/examples/live-demos/uploadcare-video/example.js +++ b/modules/ROOT/examples/live-demos/uploadcare-video/example.js @@ -14,19 +14,19 @@ tinymce.init({ fluid: true, }, a11y_advanced_options: true, - toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist| link uploadcare | code preview", + toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist | link uploadcare uploadcare-video | code preview", height: 700, content_style: ` - body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; }https://fiddle.tiny.cloud/5HPetOu0b2/38# + body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } h1 { font-size: 1.5em; } - h2 { font-size: 1.17em; } + 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;} - uc-video { display: block; margin: 1rem 0; width: 100%;} + figcaption { font-size: 0.875em; } + uc-video { display: block; margin: 1rem 0; width: 100%; } ` }); diff --git a/modules/ROOT/examples/live-demos/uploadcare-video/index.js b/modules/ROOT/examples/live-demos/uploadcare-video/index.js index b5f52059d4..f38b7544e1 100644 --- a/modules/ROOT/examples/live-demos/uploadcare-video/index.js +++ b/modules/ROOT/examples/live-demos/uploadcare-video/index.js @@ -1,5 +1,5 @@ tinymce.init({ - selector: "textarea", + selector: "textarea#uploadcare-video", plugins: [ "uploadcare", "code", "link", "preview", "lists" ], uploadcare_public_key: '630992ad50fe2291c406', uploadcare_cdn_base_url: 'https://tiny.ucarecdn.com', @@ -15,12 +15,12 @@ tinymce.init({ fluid: true, }, a11y_advanced_options: true, - toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist| link uploadcare | code preview", + toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist | link uploadcare uploadcare-video | code preview", height: 700, content_style: ` - body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; }https://fiddle.tiny.cloud/5HPetOu0b2/38# + body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } h1 { font-size: 1.5em; } - h2 { font-size: 1.17em; } + 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; }