DOC-3314: Update navbar for Media Optimizer to be in alphabetical order for premium plugins and improve demos.

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: '<your-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: {
@@ -23,25 +20,24 @@ tinymce.init({
     loop: false,
     muted: true,
     preload: 'metadata',
-    poster: 'https://placehold.co/600x400',
-    width: 640,
-    height: 360,
-    showLogo: false
+    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 uploadcare-video | 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; }
+  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%; }
   `
 });

modules/ROOT/examples/live-demos/uploadcare-full-feature/index.html

@@ -1,36 +1,33 @@
 <textarea id="uploadcare-full-feature">
-    <h1>Discover Your Dream Home on Mallorca: Where Paradise Meets Investment</h1>
-    <p><span style="color: #4e5c73;">Mallorca, the jewel of the Mediterranean, is not just a place of beauty&mdash;it&rsquo;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.&nbsp;</span></p>
-
-    <figure class="image"><img style="width: min(2048px, 100%); aspect-ratio: 2048 / 718;" src="https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/preview/" sizes="(min-width: 2048px) 2048px, 100vw" srcset="https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/100x/ 100w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/200x/ 200w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/300x/ 300w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/500x/ 500w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/750x/ 750w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/1000x/ 1000w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/1250x/ 1250w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/1500x/ 1500w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/2000x/ 2000w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/preview/ 2048w" alt="Mallorca">
-    <figcaption>Michael Heuser on <a href="https://unsplash.com/@gum_meee">Unsplash</a></figcaption>
-    </figure>
-
-    <p>Let us show you why Mallorca should be your next home&mdash;and introduce you to an exquisite villa that could soon be yours.</p>
-
-    <h2>Experience Mallorca in Motion</h2>
-    <p>Watch this stunning video showcasing the beauty and lifestyle that awaits you on this Mediterranean paradise:</p>
-    <p><uc-video uuid="83fd9f98-1939-4d99-b5e3-85563f89f5fb" class="tox-uc-video" contenteditable="false" controls="true" /></p>
-    <p><em>Feel the warmth of the Mediterranean sun, hear the gentle waves, and imagine yourself surrounded by the peaceful ambiance of this island paradise as you relax in your dream home.</em></p>
-    <blockquote><em>"The Mallorca real estate market has grown by an impressive 8% annually over the past five years,"</em> &mdash; Elena Alvarez, Market Analyst at Mediterranean Realty Insights.</blockquote>
-    <p>According to recent market data, Mallorca&rsquo;s property values have experienced steady growth, with an average&nbsp;<a href="tiny.cloud">increase of 8% annually over the past five years</a>. This consistent appreciation, coupled with a thriving rental market, makes it an ideal destination for investors seeking both luxury and financial returns.&nbsp;</p>
-    <h2>Explore Our Featured Villa: The Epitome of Luxury&nbsp;</h2>
-    <p>Located in one of Mallorca&rsquo;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.</p>
-    <figure class="image"><img style="width: min(2048px, 100%); aspect-ratio: 2048 / 1148;" src="https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/preview/" sizes="(min-width: 2048px) 2048px, 100vw" srcset="https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/100x/ 100w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/200x/ 200w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/300x/ 300w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/500x/ 500w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/750x/ 750w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/1000x/ 1000w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/1250x/ 1250w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/1500x/ 1500w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/2000x/ 2000w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/preview/ 2048w" alt="luxury wooden house interior">
-    <figcaption>Designed by <a href="https://www.freepik.com/">Freepik</a></figcaption>
-    </figure>
-    <ul>
+  <h1>Discover Your Dream Home on Mallorca: Where Paradise Meets Investment</h1>
+  <p><span style="color: #4e5c73;">Mallorca, the jewel of the Mediterranean, is not just a place of beauty&mdash;it&rsquo;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.&nbsp;</span></p>
+  <figure class="image"><img style="width: min(2048px, 100%); aspect-ratio: 2048 / 718;" src="https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/preview/" sizes="(min-width: 2048px) 2048px, 100vw" srcset="https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/100x/ 100w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/200x/ 200w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/300x/ 300w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/500x/ 500w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/750x/ 750w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/1000x/ 1000w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/1250x/ 1250w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/1500x/ 1500w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/resize/2000x/ 2000w,https://tiny.ucarecdn.com/ab5fa504-67d7-4905-ac98-537ef63006f4/-/preview/ 2048w" alt="Mallorca">
+  <figcaption>Michael Heuser on <a href="https://unsplash.com/@gum_meee">Unsplash</a></figcaption>
+  </figure>
+  <p>Let us show you why Mallorca should be your next home&mdash;and introduce you to an exquisite villa that could soon be yours.</p>
+  <blockquote><em>"The Mallorca real estate market has grown by an impressive 8% annually over the past five years,"</em> &mdash; Elena Alvarez, Market Analyst at Mediterranean Realty Insights.</blockquote>
+  <p>According to recent market data, Mallorca&rsquo;s property values have experienced steady growth, with an average&nbsp;<a href="tiny.cloud">increase of 8% annually over the past five years</a>. This consistent appreciation, coupled with a thriving rental market, makes it an ideal destination for investors seeking both luxury and financial returns.&nbsp;</p>
+  <h2>Experience Mallorca in Motion</h2>
+  <p class="p1">Before we explore the island&rsquo;s most exclusive properties, take a moment to experience the allure of Mallorca itself.</p>
+  <p class="p1">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&rsquo;s lifestyle and charm to life:</p>
+  <uc-video uuid="be94d5d8-330e-4503-b886-ef096ee8751c" class="tox-uc-video" autoplay="false" controls="true" height="368" loop="false" muted="true" preload="metadata" width="653" posteroffset="0:10" showlogo="false"></uc-video>
+  <h2 class="p1">Explore Our Featured Villa: The Epitome of Luxury&nbsp;</h2>
+  <p>Located in one of Mallorca&rsquo;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.</p>
+  <figure class="image"><img style="width: min(2048px, 100%); aspect-ratio: 2048 / 1148;" src="https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/preview/" sizes="(min-width: 2048px) 2048px, 100vw" srcset="https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/100x/ 100w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/200x/ 200w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/300x/ 300w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/500x/ 500w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/750x/ 750w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/1000x/ 1000w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/1250x/ 1250w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/1500x/ 1500w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/2000x/ 2000w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/preview/ 2048w" alt="luxury wooden house interior">
+  <figcaption>Designed by <a href="https://www.freepik.com/">Freepik</a></figcaption>
+  </figure>
+  <ul>
     <li><strong>5 luxurious bedrooms</strong> with private en-suite bathrooms</li>
     <li><strong>Infinity pool</strong> with panoramic Mediterranean views</li>
     <li><strong>Spacious terrace</strong> for outdoor dining and entertainment</li>
     <li><strong>Private garden</strong> with lush landscaping</li>
     <li><strong>Cutting-edge smart home system&nbsp;</strong><strong>&nbsp;</strong></li>
-    </ul>
-    <figure class="image"><img style="width: min(2000px, 100%); aspect-ratio: 2000 / 1121;" src="https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/preview/" sizes="(min-width: 2000px) 2000px, 100vw" srcset="https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/100x/ 100w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/200x/ 200w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/300x/ 300w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/500x/ 500w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/750x/ 750w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/1000x/ 1000w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/1250x/ 1250w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/1500x/ 1500w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/preview/ 2000w" alt="beautiful kitchen interior design">
-    <figcaption>Designed by <a href="https://www.freepik.com/">Freepik</a></figcaption>
-    </figure>
-    <p>Step inside, and you&rsquo;ll find bright, open living spaces that blend seamlessly with the outdoors, creating a harmonious living environment that&rsquo;s both relaxing and inspiring.</p>
-    <p>Owning a villa in Mallorca means more than just having a home&mdash;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.</p>
-    <h2>Make This Dream a Reality</h2>
-    <p>Don&rsquo;t miss the opportunity to own a piece of paradise. <a href="tiny.cloud">Contact us today</a> to schedule a private tour of this exceptional villa and explore other exclusive properties on the island.</p> 
-    </textarea>
+  </ul>
+  <figure class="image"><img style="width: min(2000px, 100%); aspect-ratio: 2000 / 1121;" src="https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/preview/" sizes="(min-width: 2000px) 2000px, 100vw" srcset="https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/100x/ 100w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/200x/ 200w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/300x/ 300w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/500x/ 500w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/750x/ 750w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/1000x/ 1000w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/1250x/ 1250w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/1500x/ 1500w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/preview/ 2000w" alt="beautiful kitchen interior design">
+  <figcaption>Designed by <a href="https://www.freepik.com/">Freepik</a></figcaption>
+  </figure>
+  <p>Step inside, and you&rsquo;ll find bright, open living spaces that blend seamlessly with the outdoors, creating a harmonious living environment that&rsquo;s both relaxing and inspiring.</p>
+  <p>Owning a villa in Mallorca means more than just having a home&mdash;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.</p>
+  <h2>Make This Dream a Reality</h2>
+  <p>Don&rsquo;t miss the opportunity to own a piece of paradise. <a href="tiny.cloud">Contact us today</a> to schedule a private tour of this exceptional villa and explore other exclusive properties on the island.</p>
+</textarea>

modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js

@@ -15,32 +15,30 @@ 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,
     loop: false,
     muted: true,
     preload: 'metadata',
-    // poster: 'https://placehold.co/600x400', // Optional poster image URL
-    width: 640,
-    height: 360,
-    showLogo: false
+    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 uploadcare-video | 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; }
+  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%; }
   `
 });