Support non-JSON config properties (such as callbacks and regexes) through config/ckeditor.js

admin/src/components/CKEditor/index.js

@@ -1,10 +1,10 @@
-import React, { useEffect, useState, useRef } from "react";
-import { auth, prefixFileUrlWithBackendUrl, request } from "@strapi/helper-plugin";
-import styled, { createGlobalStyle } from "styled-components";
+import React, {useEffect, useRef, useState} from "react";
+import {auth, prefixFileUrlWithBackendUrl, request} from "@strapi/helper-plugin";
+import styled, {createGlobalStyle} from "styled-components";
 
-import { Box } from "@strapi/design-system/Box";
-import { CKEditor } from "@ckeditor/ckeditor5-react";
-import { Editor as CustomClassicEditor } from "./build/ckeditor";
+import {Box} from "@strapi/design-system/Box";
+import {CKEditor} from "@ckeditor/ckeditor5-react";
+import {Editor as CustomClassicEditor} from "./build/ckeditor";
 import MediaLib from "../MediaLib";
 import PropTypes from "prop-types";
 import pluginId from "../../pluginId";
@@ -66,6 +66,48 @@ const Editor = ({ onChange, name, value, disabled }) => {
     toggleMediaLib();
   };
 
+  const requestConfig = (key) =>
+      request(`/${pluginId}/config/${key}`, { method: "GET" });
+
+  const insertConfigScript = () => {
+    const url = strapi.backendURL !== '/'
+        ? `${strapi.backendURL}/${pluginId}/editor-config-script.js`
+        : `/${pluginId}/editor-config-script.js`
+
+    var script = document.createElement('script');
+    script.id = 'editor-config'
+    script.src = url;
+    document.body.appendChild(script);
+  }
+
+  const waitForConfigToInitialize = async () => {
+    return new Promise((resolve) => {
+      (function checkConfigLoaded() {
+        if (typeof globalThis.ckEditorConfig !== "undefined") {
+          resolve(globalThis.ckEditorConfig)
+        } else
+          setTimeout(checkConfigLoaded, 5)
+      })();
+    });
+  }
+
+  const getEditorConfig = async () => {
+    // raw config/ckeditor.[js|ts] file
+    // Can be used with non-JSON serializable properties
+    insertConfigScript();
+    const configFromScript = await waitForConfigToInitialize();
+    if(configFromScript) {
+      return configFromScript;
+    }
+
+    // ckeditor snippet of config/plugins.[js|ts] serialized as JSON
+    // Can't be used with non-JSON serializable properties
+    else {
+      return requestConfig('editor');
+    }
+  }
+
+
   //####### config #############################################################################################
   const [config, setConfig] = useState();
   const [pluginCfg, setPluginCfg] = useState({});
@@ -75,9 +117,10 @@ const Editor = ({ onChange, name, value, disabled }) => {
   useEffect(() => {
     // load the editor config
     (async () => {
-      const editor = await request(`/${pluginId}/config/editor`, { method: "GET" });
-      const plugin = await request(`/${pluginId}/config/plugin`, { method: "GET" });
-      const upload = await request(`/${pluginId}/config/uploadcfg`, { method: "GET" });
+      const editor = await getEditorConfig();
+      const plugin = await requestConfig('plugin');
+      const upload = await requestConfig('uploadcfg');
+
 
       //read i18n locale
       const urlSearchParams = new URLSearchParams(window.location.search);

server/controllers/config.js

@@ -10,6 +10,12 @@ module.exports = {
       const config = await strapi.plugin('ckeditor').service('config').getConfig(configKey);
       ctx.send(config);
     }
-    
+
   },
+
+  getEditorConfigScript: async (ctx) => {
+    const config = await strapi.plugin('ckeditor').service('config').getEditorConfigScript();
+    ctx.type = 'application/javascript';
+    ctx.send(config);
+  }
 };

server/routes/index.js

@@ -1,8 +1,16 @@
 module.exports = [
-  {
-    method: 'GET',
-    path: '/config/:configKey',
-    handler: 'config.getConfig',
-    config: { policies: [] },
-  }
+    {
+        method: 'GET',
+        path: '/config/:configKey',
+        handler: 'config.getConfig',
+        config: {policies: []},
+    },
+    {
+        method: 'GET',
+        path: '/editor-config-script.js',
+        handler: 'config.getEditorConfigScript',
+        config: {
+            auth: false // Assume CKEditor config is not sensitive. We can't send a JWT token in a static script tag.
+        },
+    }
 ];

server/services/config.js

@@ -1,5 +1,7 @@
 'use strict';
 
+const fs = require("fs");
+
 /**
  * config.js configuration service
  */
@@ -9,6 +11,16 @@ module.exports = ({ strapi }) => {
     getConfig(key = 'editor') {
       return strapi.plugin('ckeditor').config(key) ?? {};
     },
+    getEditorConfigScript() {
+      const appDir = process.cwd();
+      const isTSProject = fs.existsSync(`${appDir}/dist`);
+      const jsDir = isTSProject ? `${appDir}/dist` : appDir;
+
+      const filename = `${jsDir}/config/ckeditor.js`;
+      return fs.existsSync(filename)
+        ? fs.readFileSync(filename)
+        : 'globalThis.ckEditorConfig = null' // empty script tag causes no problems
+    },
     getUploadConfig(name) {
       return strapi.plugin('upload').service(name) ?? {};
     },

yarn.lock

@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@ckeditor/[email protected].0":
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-react/-/ckeditor5-react-5.0.0.tgz#b9ad16bb84415beff0b555ddc92d5e184d41f5a1"
-  integrity sha512-5E/Npua1goikPdbx6GpeFNwOem+lslgYs2r3CycXcbxa3/d9C6ZBVpWppLk3rlRcUKTOXvGNkjfqRoGk9QhATA==
+"@ckeditor/[email protected].2":
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-react/-/ckeditor5-react-5.0.2.tgz#446518e1d7ce842c63fc6ac24e818cc78a753903"
+  integrity sha512-pN4acvCAIsuXaZDMttqy4dNBKXiJ6AS6P8NM3ggMc/rQkMIPp3YPhDWWf+pyQLUiewj1Bfr5EFeBfcXPQTOn+Q==
   dependencies:
     prop-types "^15.7.2"