Load tinymce and codemirror from CDN

app/assets/stylesheets/application.postcss.css

@@ -2,7 +2,6 @@
 
 @import "bootstrap/dist/css/bootstrap.css";
 @import "bootstrap-icons/font/bootstrap-icons.css";
-@import "codemirror/lib/codemirror.css";
 @import "tributejs/dist/tribute.css";
 @import "datatables.net-bs5/css/dataTables.bootstrap5.css";
 @import "tom-select/dist/css/tom-select.bootstrap5.css";

app/javascript/controllers/content_controller.js

@@ -1,13 +1,45 @@
 import { Controller } from '@hotwired/stimulus'
-import CodeMirror from 'codemirror/lib/codemirror.js'
-import 'codemirror/mode/htmlmixed/htmlmixed.js'
+
+const CODEMIRROR_VERSION = '5.65.16'
+const CODEMIRROR_CDN_BASE = `https://cdn.jsdelivr.net/npm/codemirror@${CODEMIRROR_VERSION}`
 
 export default class extends Controller {
   static targets = ['textArea']
 
+  initialize() {
+    this.codeMirrorLoaded = this.loadCodeMirror()
+  }
+
+  loadCodeMirror() {
+    if (window.CodeMirror) {
+      return Promise.resolve()
+    }
+
+    return new Promise((resolve, reject) => {
+      const script = document.createElement('script')
+      script.src = `${CODEMIRROR_CDN_BASE}/lib/codemirror.min.js`
+      script.onload = () => {
+        // Load css mode after core is loaded
+        const cssScript = document.createElement('script')
+        cssScript.src = `${CODEMIRROR_CDN_BASE}/mode/css/css.min.js`
+        cssScript.onload = resolve
+        cssScript.onerror = reject
+        document.head.appendChild(cssScript)
+      }
+      script.onerror = reject
+      document.head.appendChild(script)
+
+      // Load CSS
+      const link = document.createElement('link')
+      link.rel = 'stylesheet'
+      link.href = `${CODEMIRROR_CDN_BASE}/lib/codemirror.min.css`
+      document.head.appendChild(link)
+    })
+  }
+
   initializeCodeMirror() {
     var editor = CodeMirror.fromTextArea(this.textAreaTarget, {
-      mode: "htmlmixed",
+      mode: 'css',
       lineWrapping: true,
     });
     editor.on('drop', (e, event) => {
@@ -39,7 +71,8 @@ export default class extends Controller {
       })
   }
 
-  connect () {
+  async connect () {
+    await this.codeMirrorLoaded
     this.initializeCodeMirror();
   }
 }

app/javascript/controllers/editor_controller.js

@@ -1,12 +1,17 @@
 import { Controller } from '@hotwired/stimulus'
-import CodeMirror from 'codemirror/lib/codemirror.js'
-import 'codemirror/mode/htmlmixed/htmlmixed.js'
+
+const TINYMCE_VERSION = '6.8.0'
+const TINYMCE_CDN_URL = `https://cdn.jsdelivr.net/npm/tinymce@${TINYMCE_VERSION}/tinymce.min.js`
+const CODEMIRROR_VERSION = '5.65.16'
+const CODEMIRROR_CDN_BASE = `https://cdn.jsdelivr.net/npm/codemirror@${CODEMIRROR_VERSION}`
 
 export default class extends Controller {
   static targets = ['htmlContent', 'wysiwygContent', 'wysiwyg', 'html']
   static values = { changed: { type: Boolean, default: false } }
 
   initialize () {
+    this.tinyMCELoaded = this.loadTinyMCE()
+    this.codeMirrorLoaded = this.loadCodeMirror()
     this.tinyMCEDefaults = {
       height: 500,
       menubar: false,
@@ -132,7 +137,73 @@ export default class extends Controller {
     this.changedValue = false;
   }
 
-  connect () {
+  loadTinyMCE() {
+    if (window.tinyMCE) {
+      return Promise.resolve()
+    }
+
+    return new Promise((resolve, reject) => {
+      const script = document.createElement('script')
+      script.src = TINYMCE_CDN_URL
+      script.onload = resolve
+      script.onerror = reject
+      document.head.appendChild(script)
+    })
+  }
+
+  loadCodeMirror() {
+    if (window.CodeMirror) {
+      return Promise.resolve()
+    }
+
+    return new Promise((resolve, reject) => {
+      const script = document.createElement('script')
+      script.src = `${CODEMIRROR_CDN_BASE}/lib/codemirror.min.js`
+      script.onload = () => {
+        // Load htmlmixed mode after core is loaded
+        const modeScript = document.createElement('script')
+        modeScript.src = `${CODEMIRROR_CDN_BASE}/mode/htmlmixed/htmlmixed.min.js`
+        modeScript.onload = () => {
+          // htmlmixed depends on xml, javascript, and css modes
+          const xmlScript = document.createElement('script')
+          xmlScript.src = `${CODEMIRROR_CDN_BASE}/mode/xml/xml.min.js`
+          const jsScript = document.createElement('script')
+          jsScript.src = `${CODEMIRROR_CDN_BASE}/mode/javascript/javascript.min.js`
+          const cssScript = document.createElement('script')
+          cssScript.src = `${CODEMIRROR_CDN_BASE}/mode/css/css.min.js`
+
+          let loaded = 0
+          const onLoad = () => {
+            loaded++
+            if (loaded === 3) resolve()
+          }
+          xmlScript.onload = onLoad
+          jsScript.onload = onLoad
+          cssScript.onload = onLoad
+          xmlScript.onerror = reject
+          jsScript.onerror = reject
+          cssScript.onerror = reject
+
+          document.head.appendChild(xmlScript)
+          document.head.appendChild(jsScript)
+          document.head.appendChild(cssScript)
+        }
+        modeScript.onerror = reject
+        document.head.appendChild(modeScript)
+      }
+      script.onerror = reject
+      document.head.appendChild(script)
+
+      // Load CSS
+      const link = document.createElement('link')
+      link.rel = 'stylesheet'
+      link.href = `${CODEMIRROR_CDN_BASE}/lib/codemirror.min.css`
+      document.head.appendChild(link)
+    })
+  }
+
+  async connect () {
+    await Promise.all([this.tinyMCELoaded, this.codeMirrorLoaded])
     let config = Object.assign({ target: this.wysiwygContentTarget }, this.tinyMCEDefaults)
     tinyMCE.init(config)
     this.initializeCodeMirror();

package.json

@@ -18,7 +18,6 @@
     "bootstrap-icons": "^1.11.3",
     "chart.js": "^4.5.1",
     "chartkick": "^5.0.1",
-    "codemirror": "^5.65.3",
     "datatables.net": "^2",
     "datatables.net-bs5": "^2",
     "google-palette": "^1.1.1",
@@ -28,7 +27,6 @@
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.1",
     "postcss-nesting": "^13.0.2",
-    "tinymce": "^6.8.0",
     "tom-select": "^2.4.3",
     "tributejs": "^5.1.3"
   },

yarn.lock

@@ -498,11 +498,6 @@ cliui@^8.0.1:
     strip-ansi "^6.0.1"
     wrap-ansi "^7.0.0"
 
-codemirror@^5.65.3:
-  version "5.65.3"
-  resolved "https://registry.npmjs.org/codemirror/-/codemirror-5.65.3.tgz"
-  integrity sha512-kCC0iwGZOVZXHEKW3NDTObvM7pTIyowjty4BUqeREROc/3I6bWbgZDA3fGDwlA+rbgRjvnRnfqs9SfXynel1AQ==
-
 color-convert@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz"
@@ -1057,11 +1052,6 @@ tinyglobby@^0.2.12:
     fdir "^6.5.0"
     picomatch "^4.0.3"
 
-tinymce@^6.8.0:
-  version "6.8.6"
-  resolved "https://registry.npmjs.org/tinymce/-/tinymce-6.8.6.tgz"
-  integrity sha512-++XYEs8lKWvZxDCjrr8Baiw7KiikraZ5JkLMg6EdnUVNKJui0IsrAADj5MsyUeFkcEryfn2jd3p09H7REvewyg==
-
 to-regex-range@^5.0.1:
   version "5.0.1"
   resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz"