editor: replaced ckeditor

inveniosoftware · Nov 10, 2023 · bf395d7 · bf395d7
1 parent 31b4d5d
commit bf395d7
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 131 deletions.
diff --git a/invenio_requests/assets/semantic-ui/js/invenio_requests/components/FormattedInputEditor.js b/invenio_requests/assets/semantic-ui/js/invenio_requests/components/FormattedInputEditor.js
diff --git a/invenio_requests/assets/semantic-ui/js/invenio_requests/components/RequestsFeed.js b/invenio_requests/assets/semantic-ui/js/invenio_requests/components/RequestsFeed.js
@@ -12,7 +12,7 @@ import { Container, Feed, Icon } from "semantic-ui-react";
 // Wrapper component for the custom styles being used inside the request events timeline
 // Enables centralizing the styles and abstracts it away from the template
 export const RequestsFeed = ({ children }) => (
-  <Container className="requests-feed-container ml-0-mobile mr-0-mobile">
+  <Container className="requests-feed-container mce-content ml-0-mobile mr-0-mobile">
     <Feed>{children}</Feed>
   </Container>
 );
@@ -32,7 +32,7 @@ export const RequestEventInnerContainer = ({ children, isEvent }) => (
 export const RequestEventAvatarContainer = ({ src, ...uiProps }) => (
   <div className="requests-avatar-container">
     {src && <Image src={src} rounded avatar {...uiProps} />}
-    {!src && <Icon size="large" name="user circle outline"/>}
+    {!src && <Icon size="large" name="user circle outline" />}
   </div>
 );
 

diff --git a/invenio_requests/assets/semantic-ui/js/invenio_requests/contrib/Icons.js b/invenio_requests/assets/semantic-ui/js/invenio_requests/contrib/Icons.js
@@ -15,9 +15,7 @@ import { Icon } from "semantic-ui-react";
 export const AccessRequestIcon = () => (
   <Icon name="unlock alternate" className="neutral" />
 );
-export const CommunityInclusionIcon = () => (
-  <Icon name="plus" className="neutral" />
-);
+export const CommunityInclusionIcon = () => <Icon name="plus" className="neutral" />;
 export const CommunityInvitationIcon = () => (
   <Icon name="user plus" className="neutral" />
 );
diff --git a/invenio_requests/assets/semantic-ui/js/invenio_requests/contrib/labels/TypeLabel.js b/invenio_requests/assets/semantic-ui/js/invenio_requests/contrib/labels/TypeLabel.js
@@ -39,7 +39,7 @@ export const LabelTypeUserAccess = (props) => (
 );
 
 export const LabelTypeCommunityManageRecord = (props) => (
-   <Label horizontal className="primary" size="small">
-     {i18next.t("Community manage record")}
-   </Label>
- );
+  <Label horizontal className="primary" size="small">
+    {i18next.t("Community manage record")}
+  </Label>
+);
diff --git a/invenio_requests/assets/semantic-ui/js/invenio_requests/request/actions/RequestAction.js b/invenio_requests/assets/semantic-ui/js/invenio_requests/request/actions/RequestAction.js
@@ -5,7 +5,7 @@
 // under the terms of the MIT License; see LICENSE file for more details.
 
 import { RequestActionContext } from "@js/invenio_requests/request/actions/context";
-import FormattedInputEditor from "../../components/FormattedInputEditor";
+import { RichInputField } from "react-invenio-forms";
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import Overridable from "react-overridable";
@@ -23,7 +23,7 @@ export class RequestAction extends Component {
   }
 
   onCommentChange = (event, editor) => {
-    this.setState({ actionComment: editor.getData() });
+    this.setState({ actionComment: editor.getContent() });
   };
 
   handleActionClick = () => {
@@ -69,7 +69,7 @@ export class RequestAction extends Component {
               <Modal.Description>
                 {i18next.t("Add comment (optional)")}
                 <Divider hidden />
-                <FormattedInputEditor onChange={this.onCommentChange} />
+                <RichInputField onChange={this.onCommentChange} />
               </Modal.Description>
             </Modal.Content>
           </RequestActionModal>

diff --git a/...sts/assets/semantic-ui/js/invenio_requests/timelineCommentEditor/TimelineCommentEditor.js b/...sts/assets/semantic-ui/js/invenio_requests/timelineCommentEditor/TimelineCommentEditor.js
@@ -4,7 +4,7 @@
 // Invenio RDM Records 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 FormattedInputEditor from "../components/FormattedInputEditor";
+import { RichInputField } from "react-invenio-forms";
 import React from "react";
 import { SaveButton } from "../components/Buttons";
 import { Container, Message } from "semantic-ui-react";
@@ -29,10 +29,12 @@ const TimelineCommentEditor = ({
           className="tablet computer only rel-mr-1"
         />
         <Container fluid className="ml-0-mobile mr-0-mobile fluid-mobile">
-          <FormattedInputEditor
-            data={commentContent}
-            onChange={(event, editor) => setCommentContent(editor.getData())}
-            minHeight="7rem"
+          <RichInputField
+            value={commentContent}
+            onChange={(event, editor) => {
+              setCommentContent(editor.getContent());
+            }}
+            minHeight={150}
           />
         </Container>
       </div>

diff --git a/...io_requests/assets/semantic-ui/js/invenio_requests/timelineEvents/TimelineCommentEvent.js b/...io_requests/assets/semantic-ui/js/invenio_requests/timelineEvents/TimelineCommentEvent.js
@@ -12,7 +12,7 @@ import Overridable from "react-overridable";
 import { Container, Dropdown, Feed, Icon } from "semantic-ui-react";
 import { CancelButton, SaveButton } from "../components/Buttons";
 import Error from "../components/Error";
-import FormattedInputEditor from "../components/FormattedInputEditor";
+import { RichInputField } from "react-invenio-forms";
 import RequestsFeed from "../components/RequestsFeed";
 import { TimelineEventBody } from "../components/TimelineEventBody";
 import { toRelativeTime } from "react-invenio-forms";
@@ -108,16 +108,16 @@ class TimelineCommentEvent extends Component {
                   </Feed.Date>
                 </Feed.Summary>
 
-                <Feed.Extra className="ck-content" text={!isEditing}>
+                <Feed.Extra text={!isEditing}>
                   {error && <Error error={error} />}
 
                   {isEditing ? (
-                    <FormattedInputEditor
-                      data={event?.payload?.content}
-                      onChange={(event, editor) =>
-                        this.setState({ commentContent: editor.getData() })
-                      }
-                      minHeight="100%"
+                    <RichInputField
+                      value={event?.payload?.content}
+                      onChange={(event, editor) => {
+                        this.setState({ commentContent: editor.getContent() });
+                      }}
+                      minHeight={150}
                     />
                   ) : (
                     <TimelineEventBody

diff --git a/invenio_requests/webpack.py b/invenio_requests/webpack.py
@@ -31,8 +31,8 @@
             dependencies={
                 "semantic-ui-css": "^2.4.1",
                 "semantic-ui-react": "^2.1.1",
-                "@ckeditor/ckeditor5-build-classic": "^16.0.0",
-                "@ckeditor/ckeditor5-react": "^2.1.0",
+                "@tinymce/tinymce-react": "^4.3.0",
+                "tinymce": "^6.7.2",
                 "axios": "^0.19.0",
                 "lodash": "^4.17.15",
                 "luxon": "^1.21.1",