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: "", };