diff --git a/package.json b/package.json
index 00d7e3f4..3e82db7c 100644
--- 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"
]
}
-}
\ No newline at end of file
+}
diff --git a/src/lib/forms/RichInputField.js b/src/lib/forms/RichInputField.js
index e2f875a5..a1435466 100644
--- 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 {
) : (
)}
- {
- formikBag.form.setFieldValue(fieldPath, editor.getData());
+ const content = editor.getContent();
+ const modifiedContent = `${content}
`;
+ formikBag.form.setFieldValue(fieldPath, modifiedContent);
formikBag.form.setFieldTouched(fieldPath, true);
}}
/>
@@ -71,7 +86,6 @@ 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,
};
@@ -79,7 +93,6 @@ RichInputField.propTypes = {
RichInputField.defaultProps = {
className: "invenio-rich-input-field",
optimized: false,
- editorConfig: {},
required: false,
label: "",
};