Merge pull request #230 from oarepo/stojanovic/fe-248-rich-editor-bug

fixed issue with rich editor

oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/I18nRichInputField.jsx

@@ -1,13 +1,12 @@
 import * as React from "react";
 import {
   LanguageSelectField,
-  useSanitizeInput,
   useFieldData,
+  OarepoRichEditor,
 } from "@js/oarepo_ui";
-import { RichInputField, GroupField, RichEditor } from "react-invenio-forms";
+import { RichInputField, GroupField } from "react-invenio-forms";
 import PropTypes from "prop-types";
 import { Form } from "semantic-ui-react";
-import { useFormikContext, getIn } from "formik";
 
 export const I18nRichInputField = ({
   fieldPath,
@@ -17,11 +16,8 @@ export const I18nRichInputField = ({
   usedLanguages,
   ...uiProps
 }) => {
-  const { values, setFieldValue, setFieldTouched } = useFormikContext();
-  const { sanitizeInput } = useSanitizeInput();
   const lngFieldPath = `${fieldPath}.lang`;
   const textFieldPath = `${fieldPath}.value`;
-  const fieldValue = getIn(values, textFieldPath);
   const { getFieldData } = useFieldData();
 
   return (
@@ -41,18 +37,7 @@ export const I18nRichInputField = ({
         <RichInputField
           fieldPath={textFieldPath}
           optimized={optimized}
-          editor={
-            <RichEditor
-              value={fieldValue}
-              optimized
-              editorConfig={editorConfig}
-              onBlur={(event, editor) => {
-                const cleanedContent = sanitizeInput(editor.getContent());
-                setFieldValue(textFieldPath, cleanedContent);
-                setFieldTouched(textFieldPath, true);
-              }}
-            />
-          }
+          editor={<OarepoRichEditor fieldPath={textFieldPath} />}
           {...uiProps}
           {...getFieldData({
             fieldPath: textFieldPath,
@@ -74,19 +59,5 @@ I18nRichInputField.propTypes = {
 
 I18nRichInputField.defaultProps = {
   optimized: true,
-  editorConfig: {
-    removePlugins: [
-      "Image",
-      "ImageCaption",
-      "ImageStyle",
-      "ImageToolbar",
-      "ImageUpload",
-      "MediaEmbed",
-      "Table",
-      "TableToolbar",
-      "TableProperties",
-      "TableCellProperties",
-    ],
-  },
   lngFieldWidth: 3,
 };

oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/OarepoRichEditor.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { RichEditor } from "react-invenio-forms";
+import { useFormikContext, getIn } from "formik";
+import { useSanitizeInput } from "@js/oarepo_ui";
+import PropTypes from "prop-types";
+
+export const toolBar =
+  "blocks | bold italic | bullist numlist | outdent indent | undo redo";
+
+export const OarepoRichEditor = ({ fieldPath, editorConfig }) => {
+  const { sanitizeInput, validEditorTags } = useSanitizeInput();
+
+  const { values, setFieldValue, setFieldTouched } = useFormikContext();
+  const fieldValue = getIn(values, fieldPath, "");
+  return (
+    <RichEditor
+      initialValue={fieldValue}
+      inputValue={() => fieldValue}
+      optimized
+      onBlur={(event, editor) => {
+        const cleanedContent = sanitizeInput(editor.getContent());
+        setFieldValue(fieldPath, cleanedContent);
+        setFieldTouched(fieldPath, true);
+      }}
+      editorConfig={{
+        valid_elements: validEditorTags,
+        toolbar: toolBar,
+        ...editorConfig,
+      }}
+    />
+  );
+};
+
+OarepoRichEditor.propTypes = {
+  fieldPath: PropTypes.string.isRequired,
+  editorConfig: PropTypes.object,
+};

oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/index.js

@@ -1 +1,2 @@
 export * from "./I18nRichInputField";
+export * from "./OarepoRichEditor";