@_sh/strapi-plugin-ckeditor 1.1.0 → 1.1.1

package/README.md

@@ -328,6 +328,7 @@ module.exports = () => {
             ]
           },
           // https://ckeditor.com/docs/ckeditor5/latest/features/general-html-support.html
+          // Regular expressions (/.*/  /^(p|h[2-4])$/' etc) for htmlSupport does not allowed in this config
           htmlSupport: {
             allow: [
                 {
@@ -422,7 +423,7 @@ module.exports = styles;
 ## <a id="requirements"></a>⚠️ Requirements
 Strapi **v4**
 
-Tested on **v4.18 - 4.1.11**
+Tested on **v4.18 - 4.2.3**
 
 ## <a id="thanks"></a>👍 This build includes some useful plugins based on these repos so thanks to them:
 https://github.com/Roslovets-Inc/strapi-plugin-ckeditor5

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

@@ -1,16 +1,18 @@
 import React, { useEffect, useState } from "react";
-import PropTypes from "prop-types";
+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 { prefixFileUrlWithBackendUrl, request, auth } from "@strapi/helper-plugin";
 import MediaLib from "../MediaLib";
+import PropTypes from "prop-types";
 import pluginId from "../../pluginId";
 import styles from "./styles";
 import theme from "./theme";
 
 const EditorStyle = createGlobalStyle`
+#fullscreeneditor {z-index: 4!important;}
 ${styles}
 ${({ strapiTheme }) => strapiTheme}
 ${({ custom }) => custom}
@@ -33,18 +35,19 @@ const Editor = ({ onChange, name, value, disabled }) => {
     }
     setMediaLibVisible((prev) => !prev);
   };
+
   const handleChangeAssets = (assets) => {
-    let newValue = value ? value : "";
+    let newValue = "";
+
     assets.map((asset) => {
       if (asset.mime.includes("image")) {
-        if (uploadCfg?.responsiveDimensions) {
+        if (asset.formats && uploadCfg?.responsiveDimensions) {
           let set = "";
           let keys = Object.keys(asset.formats).sort((a, b) => {
             return asset.formats[a].width - asset.formats[b].width;
           });
-          keys?.map((k) => {
-            let str =
-              prefixFileUrlWithBackendUrl(asset.formats[k].url) + ` ${asset.formats[k].width}w,`;
+          keys.map((k) => {
+            let str = prefixFileUrlWithBackendUrl(asset.formats[k].url) + ` ${asset.formats[k].width}w,`;
             set = set + str;
           });
           const imgTag = `<img src="${asset.url}" alt="${asset.alt}" srcset="${set}"></img>`;
@@ -56,7 +59,11 @@ const Editor = ({ onChange, name, value, disabled }) => {
       }
       // Handle videos and other type of files by adding some code
     });
-    onChange({ target: { name, value: newValue } });
+
+    const viewFragment = editor.data.processor.toView(newValue);
+    const modelFragment = editor.data.toModel(viewFragment);
+    editor.model.insertContent(modelFragment);
+
     toggleMediaLib();
   };
 
@@ -73,12 +80,28 @@ const Editor = ({ onChange, name, value, disabled }) => {
       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]"];
+
       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
+            }
+        }
         setConfig({
           ...config,
           editor: {
             ...editor,
-            language: editor.language ? editor.language : auth.getUserInfo().preferedLanguage,
+            language: language ? language : auth.getUserInfo().preferedLanguage,
             strapiMediaLib: {
               onToggle: toggleMediaLib,
               label: "Media library",
@@ -92,27 +115,17 @@ const Editor = ({ onChange, name, value, disabled }) => {
 
         if (editor.language) {
           if (editor.language.ui) {
-            import(
-              /* webpackMode: "eager" */ `./build/translations/${editor.language.ui}.js`
-            ).catch(() => null);
+            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);
+            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
-            );
+            import(/* webpackMode: "eager" */ `./build/translations/${editor.language}.js`).catch(() => null);
           }
         }
         if (!editor.language) {
-          import(
-            /* webpackMode: "eager" */ `./build/translations/${
-              auth.getUserInfo().preferedLanguage
-            }.js`
-          ).catch(() => null);
+          import(/* webpackMode: "eager" */ `./build/translations/${auth.getUserInfo().preferedLanguage}.js`).catch(() => null);
         }
       }
       if (plugin) {
@@ -132,16 +145,14 @@ const Editor = ({ onChange, name, value, disabled }) => {
       }
     })();
 
-    return () => {};
+    return () => { };
   }, []);
 
   //###########################################################################################################
+
   return (
     <Wrapper className="ck-editor__styled__container">
-      <EditorStyle
-        custom={pluginCfg.styles}
-        strapiTheme={pluginCfg.strapiTheme !== false ? theme : ""}
-      />
+      <EditorStyle custom={pluginCfg.styles} strapiTheme={pluginCfg.strapiTheme !== false ? theme : ""} />
       {config && (
         <CKEditor
           editor={CustomClassicEditor}
@@ -155,7 +166,9 @@ const Editor = ({ onChange, name, value, disabled }) => {
           config={config?.editor}
         />
       )}
-      <MediaLib isOpen={mediaLibVisible} onChange={handleChangeAssets} onToggle={toggleMediaLib} />
+      <div style={{zIndex:5}}>
+        <MediaLib isOpen={mediaLibVisible} onChange={handleChangeAssets} onToggle={toggleMediaLib} />
+      </div>
     </Wrapper>
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@_sh/strapi-plugin-ckeditor",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Replaces the default Strapi WYSIWYG editor with a customized buil of CKEditor 5 packed with useful plugins.",
   "private": false,
   "keywords": [