@_sh/strapi-plugin-ckeditor 1.1.2 → 1.1.3

package/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";
@@ -55,6 +55,9 @@ const Editor = ({ onChange, name, value, disabled }) => {
           const imgTag = `<img src="${asset.url}" alt="${asset.alt}"></img>`;
           newValue = `${newValue}${imgTag}`;
         }
+      } else if (asset.mime.includes("application/pdf")) {
+        const downloadTag = `<a href="${prefixFileUrlWithBackendUrl(asset.url)}" download="${asset.alt}">${asset.alt || 'Download PDF'}</a>`
+        newValue = `${newValue}${downloadTag}`
       }
       // Handle videos and other type of files by adding some code
     });
@@ -66,6 +69,84 @@ 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');
+    }
+  }
+
+  const setLanguage = (config) => {
+
+    const {
+      ui,
+      content,
+      textPartLanguage,
+      ignorei18n
+    } = config.language || {};
+
+    const preferedLanguage = auth.getUserInfo().preferedLanguage;
+
+     //read i18n locale
+     const urlSearchParams = new URLSearchParams(window.location.search);
+     const params = Object.fromEntries(urlSearchParams.entries());
+     const languageContent = params["plugins[i18n][locale]"];
+
+    //  let language = config.language;
+    if (languageContent) {
+      const locale = languageContent.split("-")[0]
+
+      config.language = {
+        ui: typeof config.language === "string" ? config.language : ui || preferedLanguage,
+        content: ignorei18n ? content : locale,
+        textPartLanguage: textPartLanguage
+      }
+
+      import(/* webpackMode: "eager" */ `./build/translations/${config.language.ui}.js`).catch(() => null);
+      import(/* webpackMode: "eager" */ `./build/translations/${config.language.content}.js`).catch(() => null);
+      
+    } else {
+      config.language = preferedLanguage
+      import(/* webpackMode: "eager" */ `./build/translations/${preferedLanguage}.js`).catch(() => null);
+    };
+
+  }
+
+
   //####### config #############################################################################################
   const [config, setConfig] = useState();
   const [pluginCfg, setPluginCfg] = useState({});
@@ -75,32 +156,18 @@ 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" });
-
-      //read i18n locale
-      const urlSearchParams = new URLSearchParams(window.location.search);
-      const params = Object.fromEntries(urlSearchParams.entries());
-      const languageContent = params["plugins[i18n][locale]"];
+      const editor = await getEditorConfig();
+      const plugin = await requestConfig('plugin');
+      const upload = await requestConfig('uploadcfg');
 
       if (editor) {
-        //set locale language code to content
-        let language = editor.language;
-        if (languageContent) {
-          const countryCode = languageContent.split("-")[0]
-          if (countryCode && language)
-            language = {
-              content: language.content || countryCode,
-              ui: typeof language === "string" && language || language.ui || auth.getUserInfo().preferedLanguage,
-              textPartLanguage: language.textPartLanguage
-            }
-        }
+
+        setLanguage(editor);
+       
         setConfig({
           ...config,
           editor: {
             ...editor,
-            language: language ? language : auth.getUserInfo().preferedLanguage,
             strapiMediaLib: {
               onToggle: toggleMediaLib,
               label: "Media library",
@@ -112,20 +179,6 @@ const Editor = ({ onChange, name, value, disabled }) => {
           },
         });
 
-        if (editor.language) {
-          if (editor.language.ui) {
-            import(/* webpackMode: "eager" */ `./build/translations/${editor.language.ui}.js`).catch(() => null);
-          }
-          if (editor.language.content) {
-            import(/* webpackMode: "eager" */ `./build/translations/${editor.language.content}.js`).catch(() => null);
-          }
-          if (typeof editor.language !== "object") {
-            import(/* webpackMode: "eager" */ `./build/translations/${editor.language}.js`).catch(() => null);
-          }
-        }
-        if (!editor.language) {
-          import(/* webpackMode: "eager" */ `./build/translations/${auth.getUserInfo().preferedLanguage}.js`).catch(() => null);
-        }
       }
       if (plugin) {
         setPluginCfg({

package/admin/src/components/Initializer/index.js

@@ -1,26 +1,26 @@
-/**
- *
- * Initializer
- *
- */
-
-import { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import pluginId from '../../pluginId';
-
-const Initializer = ({ setPlugin }) => {
-  const ref = useRef();
-  ref.current = setPlugin;
-
-  useEffect(() => {
-    ref.current(pluginId);
-  }, []);
-
-  return null;
-};
-
-Initializer.propTypes = {
-  setPlugin: PropTypes.func.isRequired,
-};
-
-export default Initializer;
+/**
+ *
+ * Initializer
+ *
+ */
+
+import { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import pluginId from '../../pluginId';
+
+const Initializer = ({ setPlugin }) => {
+  const ref = useRef();
+  ref.current = setPlugin;
+
+  useEffect(() => {
+    ref.current(pluginId);
+  }, []);
+
+  return null;
+};
+
+Initializer.propTypes = {
+  setPlugin: PropTypes.func.isRequired,
+};
+
+export default Initializer;

package/admin/src/index.js

@@ -1,18 +1,18 @@
-import pluginPkg from "../../package.json";
-import Wysiwyg from "./components/Wysiwyg";
-import pluginId from "./pluginId";
-
-const name = pluginPkg.strapi.name;
-
-export default {
-  register(app) {
-    app.addFields({ type: "wysiwyg", Component: Wysiwyg });
-    app.registerPlugin({
-      id: pluginId,
-      isReady: true,
-      name,
-    });
-  },
-  bootstrap(app) {
-  },
+import pluginPkg from "../../package.json";
+import Wysiwyg from "./components/Wysiwyg";
+import pluginId from "./pluginId";
+
+const name = pluginPkg.strapi.name;
+
+export default {
+  register(app) {
+    app.addFields({ type: "wysiwyg", Component: Wysiwyg });
+    app.registerPlugin({
+      id: pluginId,
+      isReady: true,
+      name,
+    });
+  },
+  bootstrap(app) {
+  },
 };

package/admin/src/pages/App/index.js

@@ -1,25 +1,25 @@
-/**
- *
- * This component is the skeleton around the actual pages, and should only
- * contain code that should be seen on all pages. (e.g. navigation bar)
- *
- */
-
-import React from 'react';
-import { Switch, Route } from 'react-router-dom';
-import { NotFound } from '@strapi/helper-plugin';
-import pluginId from '../../pluginId';
-import HomePage from '../HomePage';
-
-const App = () => {
-  return (
-    <div>
-      <Switch>
-        <Route path={`/plugins/${pluginId}`} component={HomePage} exact />
-        <Route component={NotFound} />
-      </Switch>
-    </div>
-  );
-};
-
-export default App;
+/**
+ *
+ * This component is the skeleton around the actual pages, and should only
+ * contain code that should be seen on all pages. (e.g. navigation bar)
+ *
+ */
+
+import React from 'react';
+import { Switch, Route } from 'react-router-dom';
+import { NotFound } from '@strapi/helper-plugin';
+import pluginId from '../../pluginId';
+import HomePage from '../HomePage';
+
+const App = () => {
+  return (
+    <div>
+      <Switch>
+        <Route path={`/plugins/${pluginId}`} component={HomePage} exact />
+        <Route component={NotFound} />
+      </Switch>
+    </div>
+  );
+};
+
+export default App;

package/admin/src/pages/HomePage/index.js

@@ -1,20 +1,20 @@
-/*
- *
- * HomePage
- *
- */
-
-import React, { memo } from 'react';
-// import PropTypes from 'prop-types';
-import pluginId from '../../pluginId';
-
-const HomePage = () => {
-  return (
-    <div>
-      <h1>{pluginId}&apos;s HomePage</h1>
-      <p>Happy coding</p>
-    </div>
-  );
-};
-
-export default memo(HomePage);
+/*
+ *
+ * HomePage
+ *
+ */
+
+import React, { memo } from 'react';
+// import PropTypes from 'prop-types';
+import pluginId from '../../pluginId';
+
+const HomePage = () => {
+  return (
+    <div>
+      <h1>{pluginId}&apos;s HomePage</h1>
+      <p>Happy coding</p>
+    </div>
+  );
+};
+
+export default memo(HomePage);

package/admin/src/pluginId.js

@@ -1,6 +1,6 @@
-const pluginPkg = require('../../package.json');
-
-const pluginId = pluginPkg.name.replace(/^(@_sh\/strapi-)plugin-/i, '');
-// const pluginId = pluginPkg.name.replace(/^(@[^-,.][\w,-]+\/|strapi-)plugin-/i, '');
-
-module.exports = pluginId;
+const pluginPkg = require('../../package.json');
+
+const pluginId = pluginPkg.name.replace(/^(@_sh\/strapi-)plugin-/i, '');
+// const pluginId = pluginPkg.name.replace(/^(@[^-,.][\w,-]+\/|strapi-)plugin-/i, '');
+
+module.exports = pluginId;

package/admin/src/utils/axiosInstance.js

@@ -1,40 +1,40 @@
-/**
- * axios with a custom config.
- */
-
-import axios from 'axios';
-import { auth } from '@strapi/helper-plugin';
-
-const instance = axios.create({
-  baseURL: process.env.STRAPI_ADMIN_BACKEND_URL,
-});
-
-instance.interceptors.request.use(
-  async config => {
-    config.headers = {
-      Authorization: `Bearer ${auth.getToken()}`,
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
-    };
-
-    return config;
-  },
-  error => {
-    Promise.reject(error);
-  }
-);
-
-instance.interceptors.response.use(
-  response => response,
-  error => {
-    // whatever you want to do with the error
-    if (error.response?.status === 401) {
-      auth.clearAppStorage();
-      window.location.reload();
-    }
-
-    throw error;
-  }
-);
-
-export default instance;
+/**
+ * axios with a custom config.
+ */
+
+import axios from 'axios';
+import { auth } from '@strapi/helper-plugin';
+
+const instance = axios.create({
+  baseURL: process.env.STRAPI_ADMIN_BACKEND_URL,
+});
+
+instance.interceptors.request.use(
+  async config => {
+    config.headers = {
+      Authorization: `Bearer ${auth.getToken()}`,
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    };
+
+    return config;
+  },
+  error => {
+    Promise.reject(error);
+  }
+);
+
+instance.interceptors.response.use(
+  response => response,
+  error => {
+    // whatever you want to do with the error
+    if (error.response?.status === 401) {
+      auth.clearAppStorage();
+      window.location.reload();
+    }
+
+    throw error;
+  }
+);
+
+export default instance;

package/admin/src/utils/getTrad.js

@@ -1,5 +1,5 @@
-import pluginId from '../pluginId';
-
-const getTrad = id => `${pluginId}.${id}`;
-
-export default getTrad;
+import pluginId from '../pluginId';
+
+const getTrad = id => `${pluginId}.${id}`;
+
+export default getTrad;

package/package.json

@@ -1,50 +1,50 @@
-{
-  "name": "@_sh/strapi-plugin-ckeditor",
-  "version": "1.1.2",
-  "description": "Replaces the default Strapi WYSIWYG editor with a customized buil of CKEditor 5 packed with useful plugins.",
-  "private": false,
-  "keywords": [
-    "strapi",
-    "ckeditor",
-    "ckeditor5",
-    "ckeditor 5",
-    "wysiwyg",
-    "rich text",
-    "editor"
-  ],
-  "strapi": {
-    "icon": "edit",
-    "name": "ckeditor",
-    "displayName": "CKEditor 5",
-    "description": "Replaces the default Strapi WYSIWYG editor with a customized buil of CKEditor 5 packed with useful plugins.",
-    "kind": "plugin"
-  },
-  "files": [
-    "admin",
-    "server",
-    "strapi-admin.js",
-    "strapi-server.js"
-  ],
-  "dependencies": {
-    "@ckeditor/ckeditor5-react": "5.0.2"
-  },
-  "peerDependencies": {
-    "@strapi/strapi": "^4.0.0"
-  },
-  "author": {
-    "name": "nshenderov"
-  },
-  "homepage": "https://market.strapi.io/plugins/@_sh-strapi-plugin-ckeditor",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/nshenderov/strapi-plugin-ckeditor.git"
-  },
-  "scripts": {
-    "test": "echo \"Error: no tests specified\" && exit 1"
-  },
-  "engines": {
-    "node": ">=14.x.x <=16.x.x",
-    "npm": ">=6.0.0"
-  },
-  "license": "MIT"
-}
+{
+  "name": "@_sh/strapi-plugin-ckeditor",
+  "version": "1.1.3",
+  "description": "Replaces the default Strapi WYSIWYG editor with a customized buil of CKEditor 5 packed with useful plugins.",
+  "private": false,
+  "keywords": [
+    "strapi",
+    "ckeditor",
+    "ckeditor5",
+    "ckeditor 5",
+    "wysiwyg",
+    "rich text",
+    "editor"
+  ],
+  "strapi": {
+    "icon": "edit",
+    "name": "ckeditor",
+    "displayName": "CKEditor 5",
+    "description": "Replaces the default Strapi WYSIWYG editor with a customized buil of CKEditor 5 packed with useful plugins.",
+    "kind": "plugin"
+  },
+  "files": [
+    "admin",
+    "server",
+    "strapi-admin.js",
+    "strapi-server.js"
+  ],
+  "dependencies": {
+    "@ckeditor/ckeditor5-react": "^5.0.2"
+  },
+  "peerDependencies": {
+    "@strapi/strapi": "^4.0.0"
+  },
+  "author": {
+    "name": "nshenderov"
+  },
+  "homepage": "https://market.strapi.io/plugins/@_sh-strapi-plugin-ckeditor",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nshenderov/strapi-plugin-ckeditor.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: no tests specified\" && exit 1"
+  },
+  "engines": {
+    "node": ">=14.19.1 <=18.x.x",
+    "npm": ">=6.0.0"
+  },
+  "license": "MIT"
+}

package/server/controllers/config.js

@@ -1,15 +1,21 @@
-'use strict';
-
-module.exports = {
-  getConfig: async (ctx) => {
-    const { configKey } = ctx.params;
-    if(configKey === 'uploadcfg'){
-      const uploadConfig = await strapi.plugin('ckeditor').service('config').getUploadConfig('upload').getSettings();
-      ctx.send(uploadConfig);
-    }else{
-      const config = await strapi.plugin('ckeditor').service('config').getConfig(configKey);
-      ctx.send(config);
-    }
-    
-  },
+'use strict';
+
+module.exports = {
+  getConfig: async (ctx) => {
+    const { configKey } = ctx.params;
+    if(configKey === 'uploadcfg'){
+      const uploadConfig = await strapi.plugin('ckeditor').service('config').getUploadConfig('upload').getSettings();
+      ctx.send(uploadConfig);
+    }else{
+      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);
+  }
 };

package/server/controllers/index.js

@@ -1,7 +1,7 @@
-'use strict';
-
-const config = require('./config');
-
-module.exports = {
-  config
-};
+'use strict';
+
+const config = require('./config');
+
+module.exports = {
+  config
+};

package/server/index.js

@@ -1,25 +1,13 @@
-'use strict';
-
-const register = require('./register');
-const bootstrap = require('./bootstrap');
-const destroy = require('./destroy');
-const config = require('./config');
-const contentTypes = require('./content-types');
-const controllers = require('./controllers');
-const routes = require('./routes');
-const middlewares = require('./middlewares');
-const policies = require('./policies');
-const services = require('./services');
-
-module.exports = {
-  register,
-  bootstrap,
-  destroy,
-  config,
-  controllers,
-  routes,
-  services,
-  contentTypes,
-  policies,
-  middlewares,
-};
+'use strict';
+
+const register = require('./register');
+const controllers = require('./controllers');
+const routes = require('./routes');
+const services = require('./services');
+
+module.exports = {
+  register,
+  controllers,
+  routes,
+  services,
+};

package/server/register.js

@@ -1,5 +1,5 @@
-'use strict';
-
-module.exports = ({ strapi }) => {
-  // registeration phase
-};
+'use strict';
+
+module.exports = ({ strapi }) => {
+  // registeration phase
+};