From 779416da24c937581e7ebb67f42fe9936feaeb96 Mon Sep 17 00:00:00 2001
From: mahmoud adel <58145645+mahmoudadel54@users.noreply.github.com>
Date: Tue, 14 Jan 2025 12:09:13 +0200
Subject: [PATCH] #10719: enable upload images within Text widgets (#10735)

* #10719: enable upload images within Text widgets
Description:
- add 'prop' called 'enableUploadImg' passing it to 'CompactRichTextEditor' component to enable upload image
- add unit test

* #10719: revert naming enableUploadImg to be uploadEnabled
---
 .../__tests__/CompactRichTextEditor-test.jsx  | 50 +++++++++++++++++++
 .../builder/wizard/text/TextOptions.jsx       |  1 +
 2 files changed, 51 insertions(+)
 create mode 100644 web/client/components/mapviews/settings/__tests__/CompactRichTextEditor-test.jsx

diff --git a/web/client/components/mapviews/settings/__tests__/CompactRichTextEditor-test.jsx b/web/client/components/mapviews/settings/__tests__/CompactRichTextEditor-test.jsx
new file mode 100644
index 0000000000..440824b58f
--- /dev/null
+++ b/web/client/components/mapviews/settings/__tests__/CompactRichTextEditor-test.jsx
@@ -0,0 +1,50 @@
+/*
+ * Copyright 2025, 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 React from 'react';
+import ReactDOM from 'react-dom';
+import CompactRichTextEditor from '../CompactRichTextEditor';
+import expect from 'expect';
+import TestUtils from 'react-dom/test-utils';
+
+describe('CompactRichTextEditor component', () => {
+    beforeEach((done) => {
+        document.body.innerHTML = '<div id="container"></div>';
+        setTimeout(done);
+    });
+
+    afterEach((done) => {
+        ReactDOM.unmountComponentAtNode(document.getElementById("container"));
+        document.body.innerHTML = '';
+        setTimeout(done);
+    });
+
+    it('should render with default which does not include image upload', () => {
+        ReactDOM.render(<CompactRichTextEditor />, document.getElementById("container"));
+        const textEditorContainer = document.querySelector(".ms-compact-text-editor.rdw-editor-wrapper");
+        expect(textEditorContainer).toBeTruthy();
+        // check img upload btn
+        const imageWidget = document.querySelector(".rdw-image-wrapper .rdw-option-wrapper");
+        TestUtils.act(() => {
+            TestUtils.Simulate.click(imageWidget);
+        });
+        const uploadImgInput = document.querySelector(".rdw-image-modal-upload-option");
+        expect(uploadImgInput).toBeFalsy();
+    });
+    it('test rendering TextEditor with enabling image upload [uploadEnabled]', () => {
+        ReactDOM.render(<CompactRichTextEditor uploadEnabled />, document.getElementById("container"));
+        const textEditorContainer = document.querySelector(".ms-compact-text-editor.rdw-editor-wrapper");
+        expect(textEditorContainer).toBeTruthy();
+        const imageWidget = document.querySelector(".rdw-image-wrapper .rdw-option-wrapper");
+        TestUtils.act(() => {
+            TestUtils.Simulate.click(imageWidget);
+        });
+        const uploadImgInput = document.querySelector(".rdw-image-modal-upload-option");
+        expect(uploadImgInput).toBeTruthy();
+    });
+});
diff --git a/web/client/components/widgets/builder/wizard/text/TextOptions.jsx b/web/client/components/widgets/builder/wizard/text/TextOptions.jsx
index fca9d10700..9e3cbe0c4b 100644
--- a/web/client/components/widgets/builder/wizard/text/TextOptions.jsx
+++ b/web/client/components/widgets/builder/wizard/text/TextOptions.jsx
@@ -48,6 +48,7 @@ function TextOptions({ data = {}, onChange = () => {} }) {
                 </Form>
             </Col>
             <DescriptorEditor
+                uploadEnabled
                 editorState={editorState}
                 onEditorStateChange={(newEditorState) => {
                     const previousHTML = draftJSEditorStateToHtml(editorState);