From b28d5de3c2d480af46f72c80870def5d57ffdafd Mon Sep 17 00:00:00 2001 From: Muhammad Umair Date: Fri, 3 Nov 2023 00:10:43 +0500 Subject: [PATCH 1/2] Fixed Issue #9627 and associated PR comments --- .../settings/CompactRichTextEditor.jsx | 8 +- .../builder/wizard/text/TextOptions.jsx | 82 +++++++++++++------ .../text/__tests__/TextOptions-test.jsx | 35 ++++++++ 3 files changed, 95 insertions(+), 30 deletions(-) create mode 100644 web/client/components/widgets/builder/wizard/text/__tests__/TextOptions-test.jsx diff --git a/web/client/components/mapviews/settings/CompactRichTextEditor.jsx b/web/client/components/mapviews/settings/CompactRichTextEditor.jsx index 3901828cfc..5f3acd59bd 100644 --- a/web/client/components/mapviews/settings/CompactRichTextEditor.jsx +++ b/web/client/components/mapviews/settings/CompactRichTextEditor.jsx @@ -56,9 +56,8 @@ function CompactRichTextEditor({ options: toolbarOptions || ['fontFamily', 'blockType', 'inline', 'textAlign', 'list', 'link', 'colorPicker', 'remove', 'image', 'embedded'], image: { urlEnabled: true, - // disable the upload at the moment - // it will increase the size of the map too much - uploadEnabled: false, + // upload controlled via props, disabled by default + uploadEnabled: props.uploadEnabled || false, alignmentEnabled: false, uploadCallback: (file) => new Promise((resolve, reject) => { const reader = new FileReader(); @@ -86,7 +85,8 @@ function CompactRichTextEditor({ } }, fontFamily: { - options: DEFAULT_FONT_FAMILIES + // Setup fonts via props or use default from GeoStories + options: props.fonts || DEFAULT_FONT_FAMILIES }, link: { inDropdown: false, diff --git a/web/client/components/widgets/builder/wizard/text/TextOptions.jsx b/web/client/components/widgets/builder/wizard/text/TextOptions.jsx index 3300abe79a..cc1dc722fe 100644 --- a/web/client/components/widgets/builder/wizard/text/TextOptions.jsx +++ b/web/client/components/widgets/builder/wizard/text/TextOptions.jsx @@ -6,34 +6,64 @@ * LICENSE file in the root directory of this source tree. */ -import React from 'react'; -import { Col, Form, FormControl, FormGroup } from 'react-bootstrap'; -import ReactQuill from '../../../../../libs/quill/react-quill-suspense'; +import React, { useState } from "react"; +import { Col, Form, FormControl, FormGroup } from "react-bootstrap"; +import localizedProps from "../../../../misc/enhancers/localizedProps"; +import { + htmlToDraftJSEditorState, + draftJSEditorStateToHtml, +} from "../../../../../utils/EditorUtils"; -import localizedProps from '../../../../misc/enhancers/localizedProps'; +import withDebounceOnCallback from "../../../../misc/enhancers/withDebounceOnCallback"; +import CompactRichTextEditor from "../../../../mapviews/settings/CompactRichTextEditor"; const TitleInput = localizedProps("placeholder")(FormControl); +const DescriptorEditor = withDebounceOnCallback( + "onEditorStateChange", + "editorState" +)(CompactRichTextEditor); -const Editor = localizedProps("placeholder")(ReactQuill); - -export default ({ data = {}, onChange = () => { }}) => ( -
- -
- - - onChange("title", e.target.value)} /> - - -
- - onChange("text", val)} /> -
-); +function TextOptions({ data = {}, onChange = () => {} }) { + const [editorState, setEditorState] = useState( + htmlToDraftJSEditorState(data.text || "") + ); + return ( +
+ +
+ + + + onChange("title", e.target.value) + } + /> + + +
+ + { + const previousHTML = draftJSEditorStateToHtml(editorState); + const newHTML = draftJSEditorStateToHtml(newEditorState); + if (newHTML !== previousHTML) { + onChange( + "text", + draftJSEditorStateToHtml(newEditorState) + ); + setEditorState(newEditorState); + } + }} + // Array of custom or built in fonts can be set via props + // fonts={["Arial", "Impact", "Roman"]} + /> +
+ ); +} +export default TextOptions; diff --git a/web/client/components/widgets/builder/wizard/text/__tests__/TextOptions-test.jsx b/web/client/components/widgets/builder/wizard/text/__tests__/TextOptions-test.jsx new file mode 100644 index 0000000000..ea6a676e35 --- /dev/null +++ b/web/client/components/widgets/builder/wizard/text/__tests__/TextOptions-test.jsx @@ -0,0 +1,35 @@ +/* + * Copyright 2018, GeoSolutions Sas. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. + */ + +import expect from 'expect'; +import React from 'react'; +import {DragDropContext as dragDropContext} from 'react-dnd'; +import testBackend from 'react-dnd-test-backend'; +import ReactDOM from 'react-dom'; + +import TextOptionsComp from '../TextOptions'; + +const TextOptions = dragDropContext(testBackend)(TextOptionsComp); +describe('TextOptions component', () => { + beforeEach((done) => { + document.body.innerHTML = '
'; + setTimeout(done); + }); + afterEach((done) => { + ReactDOM.unmountComponentAtNode(document.getElementById("container")); + document.body.innerHTML = ''; + setTimeout(done); + }); + it('TextOptions rendering', () => { + // mock data for Text Editor + const data = { title: "Test Title", text: "Test Description / Text" }; + ReactDOM.render(, document.getElementById("container")); + const container = document.getElementById('container'); + expect(container).toExist(); + }); +}); From 8962cba0a11aac983d917cd9b3389496d4e81104 Mon Sep 17 00:00:00 2001 From: Muhammad Umair Date: Fri, 3 Nov 2023 00:12:28 +0500 Subject: [PATCH 2/2] eslint fixed --- .../components/widgets/builder/wizard/text/TextOptions.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/client/components/widgets/builder/wizard/text/TextOptions.jsx b/web/client/components/widgets/builder/wizard/text/TextOptions.jsx index cc1dc722fe..fca9d10700 100644 --- a/web/client/components/widgets/builder/wizard/text/TextOptions.jsx +++ b/web/client/components/widgets/builder/wizard/text/TextOptions.jsx @@ -11,7 +11,7 @@ import { Col, Form, FormControl, FormGroup } from "react-bootstrap"; import localizedProps from "../../../../misc/enhancers/localizedProps"; import { htmlToDraftJSEditorState, - draftJSEditorStateToHtml, + draftJSEditorStateToHtml } from "../../../../../utils/EditorUtils"; import withDebounceOnCallback from "../../../../misc/enhancers/withDebounceOnCallback";