Separate react code into reusable bundle (#2686)

* feat: optimize React bundle by adding vendor chunking and including react.vendor.min.js

* feat: update script inclusion for scheduler and add vendor script for React

Co-authored-by: Copilot <copilot@github.com>

* chore: regen js

* chore: fix flaky unrelated test 😬

* fix failing link test

* Fix broken tests

Co-authored-by: Copilot <copilot@github.com>

* chore: formatting

---------

Co-authored-by: Copilot <copilot@github.com>

Author: andrewleith

app/assets/javascripts/react.vendor.min.js

@@ -198,6 +198,7 @@
 {% include 'partials/google-analytics.html' %}
 
 {% block page_script %}
+<script nonce="{{ request_nonce }}" type="text/javascript" src="{{ asset_url('javascripts/react.vendor.min.js') }}"></script>
 <script nonce="{{ request_nonce }}" type="text/javascript" src="{{ asset_url('javascripts/index.min.js') }}"></script>
 <script nonce="{{ request_nonce }}" type="text/javascript" src="{{ asset_url('javascripts/all.min.js') }}"></script>
 

app/assets/javascripts/scheduler.min.js

@@ -130,6 +130,9 @@ <h2 class="heading-medium">{{ _('Preview of one message out of {}').format(count
     </form>
   </div>
 
-  <script nonce="{{ request_nonce }}" type="text/javascript" src="{{ asset_url('javascripts/scheduler.min.js') }}"></script>
+{% endblock %}
 
+{% block page_script %}
+  {{ super() }}
+  <script nonce="{{ request_nonce }}" type="text/javascript" src="{{ asset_url('javascripts/scheduler.min.js') }}"></script>
 {% endblock %}

app/assets/javascripts/tiptap.min.js

@@ -27,3 +27,11 @@ <h1 class="text-lg font-bold mb-4">Components</h1>
   </div>
 
   {% endblock %}
+
+{% block page_script %}
+  {{ super() }}
+  
+  {% if component == 'scheduler' %}
+    <script nonce="{{ request_nonce }}" type="text/javascript" src="{{ asset_url('javascripts/scheduler.min.js') }}"></script>
+  {% endif %}
+{% endblock %}

app/templates/main_template.html

@@ -17,6 +17,5 @@
             </button>
         </form>
     </div>
-    <script nonce="{{ request_nonce }}" type="text/javascript" src="{{ asset_url('javascripts/scheduler.min.js') }}"></script>
 
     {% endblock %}

app/templates/views/check/ok.html

@@ -94,6 +94,7 @@ const javascripts = () => {
     .pipe(plugins.concat("all.min.js"))
     .pipe(
       plugins.addSrc.prepend([
+        paths.src + "javascripts/react.vendor.min.js",
         paths.src + "javascripts/index.min.js",
         paths.src + "javascripts/scheduler.min.js",
         paths.src + "javascripts/tiptap.min.js",

app/templates/views/storybook.html

@@ -496,7 +496,7 @@ describe("Link tests", () => {
     cy.scrollTo("top");
     RichTextEditor.Components.Editor()
       .find('a[href="https://example.com"]')
-      .click();
+      .realClick();
 
     // Open the link modal again (cursor is now inside the existing link)
     RichTextEditor.Components.LinkButton().click();

app/templates/views/storybook/scheduler.html

@@ -101,7 +101,8 @@ describe("Live region announces context as user navigates the editor", () => {
   });
 
   it("announces Blockquote when arrowing into a blockquote", () => {
-    RichTextEditor.Components.Editor().find("blockquote").prev().click();
+    RichTextEditor.Components.Editor().find("ol li").last().click();
+    cy.realPress("End");
     cy.realPress("ArrowDown");
     RichTextEditor.Components.EditorAnnouncer().should(
       "contain.text",
@@ -174,13 +175,9 @@ describe("Live region announces context as user navigates the editor", () => {
   });
 
   // TODO: put this back in when we fix #3111
-  it.skip("announces Link when cursor is in a link", () => {
-    RichTextEditor.Components.Editor()
-      .find("a")
-      .first()
-      .closest("p")
-      .click("left");
-    cy.realPress("End");
+  it("announces Link when cursor is in a link", () => {
+    RichTextEditor.Components.Editor().find("a").first().click();
+    RichTextEditor.Components.Editor().realPress("ArrowLeft");
     RichTextEditor.Components.EditorAnnouncer().should("contain.text", "Link");
   });