Use QuillJS as rich text editor

Gruntfile.js

@@ -1,5 +1,5 @@
 /* globals module, process, require */
 'use strict';
 module.exports = function (grunt) {
     var headless = require('mocha-headless-chrome'),
         _ = require('lodash'),
@@ -38,6 +38,7 @@
         'cloudcare/form_entry',
         'hqwebapp/bootstrap3',
         'hqwebapp/bootstrap5',
+        'hqwebapp/components',
         'case_importer',
     ];
 
@@ -91,7 +92,7 @@
                         error && grunt.log.write(error));
                 }
                 fs.writeFile(filePath, JSON.stringify(data.coverage), { flag: 'w+' }, error =>
                     error && grunt.log.write(error)
                 );
             }
             finishedTests.push(currentApp);
@@ -99,7 +100,7 @@
                 _.without(queuedTests, currentApp),
                 taskPromise,
                 finishedTests,
                 failures
             );
         });
     };
@@ -134,7 +135,7 @@
             var testStatement = "Running tests: " + paths.join(', ');
             grunt.log.writeln(testStatement.bold.green);
             runTest(paths, this.async());
         }
     );
 
     grunt.registerTask('list', 'Lists all available apps to test', function () {

corehq/apps/hqwebapp/static/hqwebapp/js/components/quill.css

@@ -0,0 +1,50 @@
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value]::before {
+  content: attr(data-value) !important;
+}
+
+.ql-editor {
+  height: 250px;
+}
+
+.ql-toolbar {
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+}
+
+.ql-container {
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+
+.ql-picker-label {
+  overflow: hidden;
+}
+
+.ql-picker-item[data-value="Ariel"] {
+  font-family: "Arial", sans-serif;
+}
+
+.ql-picker-item[data-value="Courier New"] {
+  font-family: "Courier New", sans-serif;
+}
+
+.ql-picker-item[data-value="Georgia"] {
+  font-family: "Georgia", serif;
+}
+
+.ql-picker-item[data-value="Lucida Sans Unicode"] {
+  font-family: "Lucida Sans Unicode", sans-serif;
+}
+
+.ql-picker-item[data-value="Tahoma"] {
+  font-family: "Tahoma", sans-serif;
+}
+
+.ql-picker-item[data-value="Times New Roman"] {
+  font-family: "Times New Roman", serif;
+}
+
+.ql-picker-item[data-value="Verdana"] {
+  font-family: "Verdana", sans-serif;
+}

corehq/apps/hqwebapp/static/hqwebapp/js/components/rich_text_knockout_bindings.js

@@ -0,0 +1,147 @@
+import ko from "knockout";
+
+import "quill/dist/quill.snow.css";
+import "hqwebapp/js/components/quill.css";
+import Quill from 'quill';
+import Toolbar from "quill/modules/toolbar";
+import Snow from "quill/themes/snow";
+import Bold from "quill/formats/bold";
+import Italic from "quill/formats/italic";
+import Header from "quill/formats/header";
+import {QuillDeltaToHtmlConverter} from 'quill-delta-to-html';
+
+import initialPageData from "hqwebapp/js/initial_page_data";
+
+Quill.register({
+    "modules/toolbar": Toolbar,
+    "themes/snow": Snow,
+    "formats/bold": Bold,
+    "formats/italic": Italic,
+    "formats/header": Header,
+});
+
+function imageHandler() {
+    const self = this;
+    const input = document.createElement("input");
+    input.accept = "image/png, image/jpeg";
+    input.type = "file";
+    input.onchange = function (onChangeEvent) {
+        const file = onChangeEvent.target.files[0];
+        const uploadUrl = initialPageData.reverse("upload_messaging_image");
+        let formData = new FormData();
+
+        formData.append("upload", file, file.name);
+        fetch(uploadUrl, {
+            method: "POST",
+            body: formData,
+            headers: {
+                "X-CSRFTOKEN": $("#csrfTokenContainer").val(),
+            },
+        })
+            .then(function (response) {
+                if (!response.ok) {
+                    if (response.status === 400) {
+                        return response.json().then(function (errorJson) {
+                            throw Error(errorJson.error.message);
+                        });
+                    }
+
+                    throw Error("Error uploading image");
+                }
+                return response.json();
+            })
+            .then(function (data) {
+                const Delta =  Quill.import("delta");
+                const selectionRange = self.quill.getSelection(true);
+                self.quill.updateContents(
+                    new Delta()
+                        .retain(selectionRange.index)
+                        .delete(selectionRange.length)
+                        .insert({
+                            image: data.url,
+                        }, {
+                            alt: file.name,
+                        }),
+                );
+            })
+            .catch(function (error) {
+                alert(error);
+            });
+    };
+    input.click();
+}
+
+const converterOptions = {
+    inlineStyles: true,
+};
+
+function deltaToHtml(delta) {
+    // nice for adding more test data
+    // console.log(JSON.stringify(delta, null, 4));
+    const converter = new QuillDeltaToHtmlConverter(delta.ops, converterOptions);
+    const body = converter.convert();
+    const html = `<html><body>${body}</body></html>`;
+    return html;
+}
+
+ko.bindingHandlers.richEditor = {
+    init: function (element, valueAccessor) {
+        const fontFamilyArr = [
+            "Arial",
+            "Courier New",
+            "Georgia",
+            "Lucida Sans Unicode",
+            "Tahoma",
+            "Times New Roman",
+            "Trebuchet MS",
+            "Verdana",
+        ];
+        let fonts = Quill.import("attributors/style/font");
+        fonts.whitelist = fontFamilyArr;
+        Quill.register(fonts, true);
+
+        const toolbar = element.parentElement.querySelector("#ql-toolbar");
+        const editor = new Quill(element, {
+            modules: {
+                toolbar: {
+                    container: toolbar,
+                    handlers: {
+                        image: imageHandler,
+                    },
+                },
+            },
+            theme: "snow",
+        });
+
+        const value = ko.utils.unwrapObservable(valueAccessor());
+        editor.clipboard.dangerouslyPasteHTML(value);
+
+        let isSubscriberChange = false;
+        let isEditorChange = false;
+
+        editor.on("text-change", function () {
+            if (!isSubscriberChange) {
+                isEditorChange = true;
+                const html = deltaToHtml(editor.getContents());
+                valueAccessor()(html);
+                isEditorChange = false;
+            }
+        });
+
+        valueAccessor().subscribe(function (value) {
+            if (!isEditorChange) {
+                isSubscriberChange = true;
+                editor.clipboard.dangerouslyPasteHTML(value);
+                isSubscriberChange = false;
+            }
+        });
+
+        if (initialPageData.get("read_only_mode")) {
+            editor.enable(false);
+        }
+    },
+};
+
+export {
+    deltaToHtml,
+};

corehq/apps/hqwebapp/static/hqwebapp/spec/components/main.js

@@ -0,0 +1,6 @@
+import hqMocha from "mocha/js/main";
+import "commcarehq";
+
+import "hqwebapp/spec/components/rich_text_spec";
+
+hqMocha.run();