strapi-plugin-ckeditor5 - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

admin/src/components/CKEditor/index.js

@@ -6,4 +6,23 @@ import React from 'react';
 import styled from 'styled-components';
-import { auth } from 'strapi-helper-plugin';
+import 'ckeditor5-build-strapi-wysiwyg/build/translations/ar';
+import 'ckeditor5-build-strapi-wysiwyg/build/translations/cs';
+import 'ckeditor5-build-strapi-wysiwyg/build/translations/de';
+import 'ckeditor5-build-strapi-wysiwyg/build/translations/es';
+import 'ckeditor5-build-strapi-wysiwyg/build/translations/fr';
+import 'ckeditor5-build-strapi-wysiwyg/build/translations/id';
+import 'ckeditor5-build-strapi-wysiwyg/build/translations/it';
+import 'ckeditor5-build-strapi-wysiwyg/build/translations/ko';
+import 'ckeditor5-build-strapi-wysiwyg/build/translations/nl';
+import 'ckeditor5-build-strapi-wysiwyg/build/translations/pl';
+import 'ckeditor5-build-strapi-wysiwyg/build/translations/pt';
+import 'ckeditor5-build-strapi-wysiwyg/build/translations/pt-br';
+import 'ckeditor5-build-strapi-wysiwyg/build/translations/ru';
+import 'ckeditor5-build-strapi-wysiwyg/build/translations/sk';
+import 'ckeditor5-build-strapi-wysiwyg/build/translations/th';
+import 'ckeditor5-build-strapi-wysiwyg/build/translations/tr';
+import 'ckeditor5-build-strapi-wysiwyg/build/translations/uk';
+import 'ckeditor5-build-strapi-wysiwyg/build/translations/vi';
+import 'ckeditor5-build-strapi-wysiwyg/build/translations/zh';
 
+
 const Wrapper = styled.div`
@@ -20,7 +39,3 @@ .ck-editor__main {
 
-const Editor = ({ onChange, name, value }) => {
-  const uploadUrl = `${strapi.backendURL}/upload`
-  const headers = {
-    Authorization: 'Bearer ' + auth.getToken(),
-  }
+const Editor = ({ onChange, name, value, setEditor, config }) => {
   return (
@@ -32,2 +47,3 @@ <Wrapper>
         onReady={editor => {
+          setEditor(editor);
           if (value) {
@@ -41,8 +57,3 @@ editor.setData(value);
         }}
-        config={{
-          strapiUpload: {
-            uploadUrl,
-            headers,
-          },
-        }}
+        config={config}
       />
@@ -49,0 +60,0 @@ </Wrapper>

admin/src/components/MediaLib/index.js

 import React, { useEffect, useState } from 'react';
-import { useStrapi, prefixFileUrlWithBackendUrl } from 'strapi-helper-plugin';
+import { useStrapi } from 'strapi-helper-plugin';
 import PropTypes from 'prop-types';
@@ -11,2 +11,3 @@
   } = useStrapi();
+
   const [data, setData] = useState(null);
@@ -21,9 +22,7 @@ const [isDisplayed, setIsDisplayed] = useState(false);
 
-  const Component = getComponent('media-library').Component;
+  const MediaLibComponent = getComponent('media-library').Component;
 
   const handleInputChange = data => {
     if (data) {
-      const { url } = data;
-
-      setData({ ...data, url: prefixFileUrlWithBackendUrl(url) });
+      setData({ ...data });
     }
@@ -36,3 +35,2 @@ };
     }
-
     setData(null);
@@ -42,6 +40,6 @@ setIsDisplayed(false);
 
-  if (Component && isDisplayed) {
+  if (MediaLibComponent && isDisplayed) {
     return (
-      <Component
-        allowedTypes={['images', 'videos', 'files']}
+      <MediaLibComponent
+        allowedTypes={['images']}
         isOpen={isOpen}
@@ -62,4 +60,4 @@ multiple={false}
   isOpen: false,
-  onChange: () => {},
-  onToggle: () => {},
+  onChange: () => { },
+  onToggle: () => { },
 };
@@ -66,0 +64,0 @@

admin/src/components/Wysiwyg/index.js

 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { isEmpty } from 'lodash';
-import { Button } from '@buffetjs/core';
-import { Label, InputDescription, InputErrors } from 'strapi-helper-plugin';
+import { Label, InputDescription, InputErrors, useGlobalContext, prefixFileUrlWithBackendUrl, auth } from 'strapi-helper-plugin';
 import Editor from '../CKEditor';
@@ -18,22 +17,41 @@ import MediaLib from '../MediaLib';
 }) => {
+  const { formatMessage, currentLocale } = useGlobalContext();
   const [isOpen, setIsOpen] = useState(false);
+  const [editor, setEditor] = useState(null);
+  const mediaLibTitle = formatMessage({ id: 'Media Library' });
   let spacer = !isEmpty(inputDescription) ? <div style={{ height: '.4rem' }} /> : <div />;
 
-  if (!noErrorsDescription && !isEmpty(errors)) {
-    spacer = <div />;
-  }
 
-  const handleChange = data => {
-    if (data.mime.includes('image')) {
-      const imgTag = `<p><img src="${data.url}" caption="${data.caption}" alt="${data.alternativeText}"></img></p>`;
-      const newValue = value ? `${value}${imgTag}` : imgTag;
+  const toggleMediaLib = (data) => setIsOpen(prev => !prev);
 
-      onChange({ target: { name, value: newValue } });
+  const strapiMediaLib = {
+    onToggle: toggleMediaLib,
+    label: mediaLibTitle
+  };
+
+  const strapiUpload = {
+    uploadUrl: `${strapi.backendURL}/upload`,
+    headers: {
+      Authorization: 'Bearer ' + auth.getToken(),
     }
+  };
 
-    // Handle videos and other type of files by adding some code
+  const onImageSelected = (data) => {
+    if (data && data.mime.includes('image')) {
+      const url = prefixFileUrlWithBackendUrl(data.url);
+      editor.model.change(writer => {
+        const imageElement = writer.createElement('image', {
+          src: url
+        });
+        editor.model.insertContent(imageElement, editor.model.document.selection);
+      });
+      // Handle videos and other type of files by adding some code
+    }
   };
 
-  const handleToggle = () => setIsOpen(prev => !prev);
 
+  if (!noErrorsDescription && !isEmpty(errors)) {
+    spacer = <div />;
+  }
+
   return (
@@ -48,15 +66,12 @@ <div
       <Label htmlFor={name} message={label} style={{ marginBottom: 10 }} />
-      <div>
-        <Button color="primary" onClick={handleToggle}>
-          Media Library
-        </Button>
-      </div>
-      <Editor name={name} onChange={onChange} value={value} />
-      <InputDescription
-        message={inputDescription}
-        style={!isEmpty(inputDescription) ? { marginTop: '1.4rem' } : {}}
-      />
+      <Editor name={name} onChange={onChange} value={value} setEditor={setEditor} config={
+        {
+          language: currentLocale,
+          strapiUpload: strapiUpload,
+          strapiMediaLib: strapiMediaLib,
+        }
+      }/>
+      <InputDescription message={inputDescription} style={!isEmpty(inputDescription) ? { marginTop: '1.4rem' } : {}} />
       <InputErrors errors={(!noErrorsDescription && errors) || []} name={name} />
-      {spacer}
-      <MediaLib onToggle={handleToggle} isOpen={isOpen} onChange={handleChange} />
+      <MediaLib onToggle={toggleMediaLib} isOpen={isOpen} onChange={onImageSelected} />
     </div>
@@ -63,0 +78,0 @@ );

package.json

 {
   "name": "strapi-plugin-ckeditor5",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Replace Strapi default WYSIWYG editor with enhanced build of CKEditor 5",
@@ -35,3 +35,3 @@ "private": false,
     "@ckeditor/ckeditor5-react": "^3.0.0",
-    "ckeditor5-build-strapi-wysiwyg": "^1.1.0"
+    "ckeditor5-build-strapi-wysiwyg": "^1.2.0"
   },
@@ -38,0 +38,0 @@ "author": {

README.md

 # Strapi CKEditor5 plugin
 
-Replace Strapi default WYSIWYG editor with enhanced build of CKEditor 5
+Replace default Strapi markdown WYSIWYG editor with enhanced build of HTML CKEditor 5
 
@@ -13,5 +13,5 @@ ![strapi-plugin-ckeditor5](/sample/strapi-plugin-ckeditor5.png)
 - [Enhanced build of CKEditor 5](https://github.com/Roslovets-Inc/ckeditor5-build-strapi-wysiwyg) with more capabilities then Classic Editor build
-- Media Library button to insert stored images directly to editor (thanks to [official guide](https://strapi.io/documentation/developer-docs/latest/guides/registering-a-field-in-admin.html))
 - Automatically upload Inserted images to Media Library (thanks to [ckeditor5-strapi-upload-plugin](https://github.com/gtomato/ckeditor5-strapi-upload-plugin))
-- Works with Strapi 3.4.0+
+- Media Library button to insert stored images directly to the editor 🔥
+- Automatic translation of UI into selected in Strapi language 🔥
 
@@ -18,0 +18,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

106680

increased by1.23%

Lines of code

326

increased by7.24%

Dependency changes

• Updatedckeditor5-build-strapi-wysiwyg@^1.2.0