Merge pull request #240 from aesirxio/develop

Deploy to master
aesirxio · Sep 12, 2024 · 3025d65 · 3025d65
2 parents 242391d + fd30c49
commit 3025d65
Show file tree

Hide file tree

Showing 4 changed files with 2,753 additions and 1,957 deletions.
diff --git a/package.json b/package.json
@@ -50,10 +50,11 @@
     "dist"
   ],
   "dependencies": {
-    "@ckeditor/ckeditor5-build-classic": "^38.0.1",
-    "@ckeditor/ckeditor5-core": "^38.0.1",
-    "@ckeditor/ckeditor5-engine": "^38.0.1",
-    "@ckeditor/ckeditor5-react": "^6.0.0",
+    "@ckeditor/ckeditor5-build-classic": "^43.0.0",
+    "@ckeditor/ckeditor5-core": "^43.0.0",
+    "@ckeditor/ckeditor5-engine": "^43.0.0",
+    "@ckeditor/ckeditor5-html-support": "^43.0.0",
+    "@ckeditor/ckeditor5-react": "^9.0.0",
     "@concordium/browser-wallet-api-helpers": "^3.0.0",
     "@concordium/react-components": "^0.4.0-rc.7",
     "@concordium/web-sdk": "^7.0.4-rc.3",
@@ -66,6 +67,7 @@
     "aesirx-lib": "^2.0.14",
     "aesirx-sso": "^1.4.17",
     "bootstrap": "^5.3.1",
+    "ckeditor5": "^43.0.0",
     "dayjs": "^1.11.10",
     "i18next": "^22.4.15",
     "i18next-browser-languagedetector": "^7.1.0",

diff --git a/src/components/Form/FormEditor/index.tsx b/src/components/Form/FormEditor/index.tsx
@@ -1,10 +1,29 @@
 import { CKEditor } from '@ckeditor/ckeditor5-react';
-import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
-
+import {
+  ClassicEditor,
+  Bold,
+  Essentials,
+  Italic,
+  Mention,
+  Paragraph,
+  Undo,
+  GeneralHtmlSupport,
+  Image,
+  ImageCaption,
+  ImageResize,
+  ImageStyle,
+  ImageToolbar,
+  LinkImage,
+  SourceEditing,
+  AutoLink,
+  Link,
+} from 'ckeditor5';
 import React, { useState } from 'react';
 
 import styles from 'styles.module.scss';
 import './index.scss';
+import 'ckeditor5/ckeditor5.css';
+
 import { ModalDAMComponent } from 'components/ModalDam';
 import { SVGComponent } from 'components/SVGComponent';
 
@@ -45,17 +64,64 @@ const FormEditor = ({ field }: any) => {
         <CKEditor
           editor={ClassicEditor}
           config={{
-            removePlugins: [
-              'CKFinderUploadAdapter',
-              'CKFinder',
-              'EasyImage',
-              'Image',
-              'ImageCaption',
-              'ImageStyle',
-              'ImageToolbar',
-              'ImageUpload',
-              'MediaEmbed',
+            toolbar: {
+              items: [
+                'sourceEditing',
+                'undo',
+                'redo',
+                '|',
+                'bold',
+                'italic',
+                'link',
+                'insertImage',
+              ],
+            },
+            plugins: [
+              Bold,
+              Essentials,
+              Italic,
+              Mention,
+              Paragraph,
+              Undo,
+              GeneralHtmlSupport,
+              Image,
+              ImageToolbar,
+              ImageCaption,
+              ImageStyle,
+              ImageResize,
+              LinkImage,
+              SourceEditing,
+              Link,
+              AutoLink,
             ],
+            htmlSupport: {
+              allow: [
+                {
+                  name: 'div',
+                  attributes: true,
+                  classes: true,
+                  styles: true,
+                },
+                {
+                  name: 'p',
+                  attributes: true,
+                  classes: true,
+                  styles: true,
+                },
+                {
+                  name: 'span',
+                  attributes: true,
+                  classes: true,
+                  styles: true,
+                },
+                {
+                  name: 'a',
+                  attributes: true,
+                  classes: true,
+                  styles: true,
+                },
+              ],
+            },
           }}
           data={field?.getValueSelected ?? ''}
           onReady={async (editor) => {

diff --git a/src/components/Form/FormImage/index.tsx b/src/components/Form/FormImage/index.tsx
@@ -14,7 +14,7 @@ import { Image } from 'components/Image';
 const FormImage = ({ field, ...props }: any) => {
   const { t } = props;
   const [file, setFile] = useState(
-    field.isMulti ? field.getValueSelected ?? [] : field.getValueSelected ?? null
+    field.isMulti ? (field.getValueSelected ?? []) : (field.getValueSelected ?? null)
   );
 
   const [show, setShow] = useState(false);