Fix #9627 Replace Quill editor with Draftjs editor in Dashboard's Tex…

…t widget (#9680)

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,

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 = () => { }}) => (
-    <div>
-        <Col key="form" xs={12}>
-            <Form>
-                <FormGroup controlId="title">
-                    <Col sm={12}>
-                        <TitleInput style={{ marginBottom: 10 }} placeholder="widgets.builder.wizard.titlePlaceholder" value={data.title} type="text" onChange={e => onChange("title", e.target.value)} />
-                    </Col>
-                </FormGroup>
-            </Form>
-        </Col>
-        <Editor modules={{
-            toolbar: [
-                [{'size': ['small', false, 'large', 'huge'] }, 'bold', 'italic', 'underline', 'blockquote'],
-                [{'list': 'bullet' }, {'align': [] }],
-                [{'color': [] }, {'background': [] }, 'clean'], ['image', 'link']
-            ]
-        }} placeholder="widgets.builder.wizard.textPlaceholder" value={data && data.text || ''} onChange={(val) => onChange("text", val)} />
-    </div>
-);
+function TextOptions({ data = {}, onChange = () => {} }) {
+    const [editorState, setEditorState] = useState(
+        htmlToDraftJSEditorState(data.text || "")
+    );
 
+    return (
+        <div>
+            <Col key="form" xs={12}>
+                <Form>
+                    <FormGroup controlId="title">
+                        <Col sm={12}>
+                            <TitleInput
+                                style={{ marginBottom: 10 }}
+                                placeholder="widgets.builder.wizard.titlePlaceholder"
+                                value={data.title}
+                                type="text"
+                                onChange={(e) =>
+                                    onChange("title", e.target.value)
+                                }
+                            />
+                        </Col>
+                    </FormGroup>
+                </Form>
+            </Col>
+            <DescriptorEditor
+                editorState={editorState}
+                onEditorStateChange={(newEditorState) => {
+                    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"]}
+            />
+        </div>
+    );
+}
+export default TextOptions;

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 = '<div id="container"></div>';
+        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(<TextOptions data={{ data }} />, document.getElementById("container"));
+        const container = document.getElementById('container');
+        expect(container).toExist();
+    });
+});