From e9ac5e9cfac933400eb8414c1e533f3d2274b80e Mon Sep 17 00:00:00 2001 From: ducica Date: Mon, 9 Sep 2024 21:02:36 +0200 Subject: [PATCH 1/3] fixed issue with rich editor --- .../I18nRichInputField/I18nRichInputField.jsx | 31 +++-------------- .../I18nRichInputField/OarepoRichEditor.jsx | 34 +++++++++++++++++++ .../components/I18nRichInputField/index.js | 1 + 3 files changed, 39 insertions(+), 27 deletions(-) create mode 100644 oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/OarepoRichEditor.jsx diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/I18nRichInputField.jsx b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/I18nRichInputField.jsx index f8d9ce71..70dc221b 100644 --- a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/I18nRichInputField.jsx +++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/I18nRichInputField.jsx @@ -3,8 +3,9 @@ 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"; @@ -41,18 +42,8 @@ export const I18nRichInputField = ({ { - const cleanedContent = sanitizeInput(editor.getContent()); - setFieldValue(textFieldPath, cleanedContent); - setFieldTouched(textFieldPath, true); - }} - /> - } + editorConfig={editorConfig} + editor={} {...uiProps} {...getFieldData({ fieldPath: textFieldPath, @@ -74,19 +65,5 @@ I18nRichInputField.propTypes = { I18nRichInputField.defaultProps = { optimized: true, - editorConfig: { - removePlugins: [ - "Image", - "ImageCaption", - "ImageStyle", - "ImageToolbar", - "ImageUpload", - "MediaEmbed", - "Table", - "TableToolbar", - "TableProperties", - "TableCellProperties", - ], - }, lngFieldWidth: 3, }; diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/OarepoRichEditor.jsx b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/OarepoRichEditor.jsx new file mode 100644 index 00000000..13820cab --- /dev/null +++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/OarepoRichEditor.jsx @@ -0,0 +1,34 @@ +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 OarepoRichEditor = ({ fieldPath, editorConfig }) => { + const { sanitizeInput, validEditorTags } = useSanitizeInput(); + + const { values, setFieldValue, setFieldTouched } = useFormikContext(); + const fieldValue = getIn(values, fieldPath, ""); + return ( + fieldValue} + optimized + onBlur={(event, editor) => { + const cleanedContent = sanitizeInput(editor.getContent()); + setFieldValue(fieldPath, cleanedContent); + setFieldTouched(fieldPath, true); + }} + editorConfig={{ + valid_elements: validEditorTags, + toolbar: "bold italic | bullist numlist | outdent indent | undo redo", + ...editorConfig, + }} + /> + ); +}; + +OarepoRichEditor.propTypes = { + fieldPath: PropTypes.string.isRequired, + editorConfig: PropTypes.object, +}; diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/index.js b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/index.js index 26924c8c..cdc32993 100644 --- a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/index.js +++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/index.js @@ -1 +1,2 @@ export * from "./I18nRichInputField"; +export * from "./OarepoRichEditor"; From 7456d1b0cb3e0b938f34a23dd5f7d06b78dd1f70 Mon Sep 17 00:00:00 2001 From: ducica Date: Mon, 9 Sep 2024 21:30:09 +0200 Subject: [PATCH 2/3] removed unused imports --- .../components/I18nRichInputField/I18nRichInputField.jsx | 6 ------ .../components/I18nRichInputField/OarepoRichEditor.jsx | 4 +++- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/I18nRichInputField.jsx b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/I18nRichInputField.jsx index 70dc221b..d0789d96 100644 --- a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/I18nRichInputField.jsx +++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/I18nRichInputField.jsx @@ -1,14 +1,12 @@ import * as React from "react"; import { LanguageSelectField, - useSanitizeInput, useFieldData, OarepoRichEditor, } from "@js/oarepo_ui"; 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, @@ -18,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 ( @@ -42,7 +37,6 @@ export const I18nRichInputField = ({ } {...uiProps} {...getFieldData({ diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/OarepoRichEditor.jsx b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/OarepoRichEditor.jsx index 13820cab..5114cf54 100644 --- a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/OarepoRichEditor.jsx +++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/OarepoRichEditor.jsx @@ -21,7 +21,9 @@ export const OarepoRichEditor = ({ fieldPath, editorConfig }) => { }} editorConfig={{ valid_elements: validEditorTags, - toolbar: "bold italic | bullist numlist | outdent indent | undo redo", + toolbar: + "blocks | bold italic | bullist numlist | outdent indent | undo redo", + block_formats: "Paragraph=p; Header 1=h1; Header 2=h2; Header 3=h3", ...editorConfig, }} /> From 1b3569fec18d1324149b1f61816451d66bdeb0b5 Mon Sep 17 00:00:00 2001 From: ducica Date: Tue, 10 Sep 2024 08:20:51 +0200 Subject: [PATCH 3/3] extracted toolBar variable --- .../components/I18nRichInputField/OarepoRichEditor.jsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/OarepoRichEditor.jsx b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/OarepoRichEditor.jsx index 5114cf54..d05815fe 100644 --- a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/OarepoRichEditor.jsx +++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/OarepoRichEditor.jsx @@ -4,6 +4,9 @@ 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(); @@ -21,9 +24,7 @@ export const OarepoRichEditor = ({ fieldPath, editorConfig }) => { }} editorConfig={{ valid_elements: validEditorTags, - toolbar: - "blocks | bold italic | bullist numlist | outdent indent | undo redo", - block_formats: "Paragraph=p; Header 1=h1; Header 2=h2; Header 3=h3", + toolbar: toolBar, ...editorConfig, }} />