editor: replaced ckeditor with tinymce

inveniosoftware · Nov 8, 2023 · 55ee91b · 55ee91b
1 parent a3adc26
commit 55ee91b
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 24 deletions.
diff --git a/package.json b/package.json
@@ -24,24 +24,22 @@
   },
   "peerDependencies": {
     "@babel/runtime": "^7.9.0",
-    "@ckeditor/ckeditor5-build-classic": "^16.0.0",
-    "@ckeditor/ckeditor5-react": "^2.1.0",
     "@semantic-ui-react/css-patch": "^1.0.0",
+    "@tinymce/tinymce-react": "^4.3.0",
     "axios": "^0.21.0",
     "formik": "^2.1.0",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
     "lodash": "^4.17.0",
     "luxon": "^1.23.0",
     "query-string": "^7.0.0",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
     "semantic-ui-css": "^2.4.0",
     "semantic-ui-react": "^2.1.0",
+    "tinymce": "^6.7.2",
     "yup": "^0.32.11"
   },
   "devDependencies": {
     "@babel/cli": "^7.5.0",
-    "@ckeditor/ckeditor5-build-classic": "^16.0.0",
-    "@ckeditor/ckeditor5-react": "^2.1.0",
     "@inveniosoftware/eslint-config-invenio": "^2.0.0",
     "@rollup/plugin-babel": "^5.0.0",
     "@rollup/plugin-commonjs": "^11.1.0",
@@ -50,9 +48,9 @@
     "@testing-library/jest-dom": "^4.2.0",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.0",
+    "@tinymce/tinymce-react": "^4.3.0",
     "ajv": "^8.0.0",
     "ajv-keywords": "^5.0.0",
-    "json-schema-traverse": "^0.4.0",
     "axios": "^0.21.0",
     "coveralls": "^3.0.0",
     "enzyme": "^3.10.0",
@@ -75,6 +73,7 @@
     "rollup-plugin-url": "^3.0.0",
     "semantic-ui-css": "^2.4.0",
     "semantic-ui-react": "^2.1.0",
+    "tinymce": "^6.7.2",
     "typescript": "^4.9.5",
     "yup": "^0.32.11"
   },
@@ -119,4 +118,4 @@
       "enzyme-to-json/serializer"
     ]
   }
-}
+}
diff --git a/src/lib/forms/RichInputField.js b/src/lib/forms/RichInputField.js
@@ -5,10 +5,17 @@
 // React-Invenio-Deposit is free software; you can redistribute it and/or modify it
 // under the terms of the MIT License; see LICENSE file for more details.
 
-import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
-import CKEditor from "@ckeditor/ckeditor5-react";
-import { Bold, Code, Italic, Strikethrough,Underline } from '@ckeditor/ckeditor5-basic-styles';
 import { FastField, Field, getIn } from "formik";
+import { Editor } from "@tinymce/tinymce-react";
+import "tinymce/tinymce";
+import "tinymce/models/dom/model";
+import "tinymce/themes/silver";
+import "tinymce/icons/default";
+import "tinymce/plugins/table";
+import "tinymce/plugins/autoresize";
+import "tinymce/plugins/codesample";
+import "tinymce/plugins/link";
+import "tinymce/plugins/lists";
 import PropTypes from "prop-types";
 import React, { Component } from "react";
 import { Form } from "semantic-ui-react";
@@ -17,12 +24,6 @@ import { ErrorLabel } from "./ErrorLabel";
 export class RichInputField extends Component {
   renderFormField = (formikBag) => {
     const { fieldPath, label, required, className } = this.props;
-    const editorConfig = {
-      plugins: [ Bold, Italic, Underline, Strikethrough, Code ],
-      toolbar: {
-          items: [ 'bold', 'italic', 'underline', 'strikethrough', 'code' ]
-      }
-    };
     const value = getIn(formikBag.form.values, fieldPath, "");
     const initialValue = getIn(formikBag.form.initialValues, fieldPath, "");
     const error =
@@ -42,12 +43,26 @@ export class RichInputField extends Component {
         ) : (
           <label htmlFor={fieldPath}>{label}</label>
         )}
-        <CKEditor
-          editor={ClassicEditor}
-          config={editorConfig}
-          data={value}
+
+        <Editor
+          initialValue={value}
+          init={{
+            branding: false,
+            menubar: false,
+            statusbar: false,
+            min_height: 250,
+            content_style: "body { font-size: 14px; }",
+            plugins: ["codesample", "link", "lists", "table", "autoresize"],
+            toolbar:
+              "blocks | bold italic codesample blockquote table | \
+              bullist numlist | outdent indent | undo redo",
+            autoresize_bottom_margin: 20,
+            block_formats: "Paragraph=p; Header 1=h1; Header 2=h2; Header 3=h3",
+          }}
           onBlur={(event, editor) => {
-            formikBag.form.setFieldValue(fieldPath, editor.getData());
+            const content = editor.getContent();
+            const modifiedContent = `<div class="mce-content">${content}</div>`;
+            formikBag.form.setFieldValue(fieldPath, modifiedContent);
             formikBag.form.setFieldTouched(fieldPath, true);
           }}
         />
@@ -71,15 +86,13 @@ RichInputField.propTypes = {
   className: PropTypes.string,
   fieldPath: PropTypes.string.isRequired,
   optimized: PropTypes.bool,
-  editorConfig: PropTypes.object,
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   required: PropTypes.bool,
 };
 
 RichInputField.defaultProps = {
   className: "invenio-rich-input-field",
   optimized: false,
-  editorConfig: {},
   required: false,
   label: "",
 };