WIP: Rich Text Emails

corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap3/requirejs_config.js

@@ -1,7 +1,8 @@
 /* globals requirejs */
 requirejs.config({
     baseUrl: '/static/',
     paths: {
+        "ckeditor5": "ckeditor5/build/ckeditor5-dll",
         "jquery": "jquery/dist/jquery.min",
         "underscore": "underscore/underscore",
         "bootstrap": "bootstrap/dist/js/bootstrap.min",
@@ -14,6 +15,22 @@
     shim: {
         "ace-builds/src-min-noconflict/ace": { exports: "ace" },
         "bootstrap": { deps: ['jquery'] },
+        "ckeditor5": { exports: "CKEditor5" },
+        "@ckeditor/ckeditor5-editor-classic/build/editor-classic": { deps: ["ckeditor5"] },
+        "@ckeditor/ckeditor5-autoformat/build/autoformat": { deps: ["ckeditor5"] },
+        "@ckeditor/ckeditor5-basic-styles/build/basic-styles": { deps: ["ckeditor5"] },
+        "@ckeditor/ckeditor5-block-quote/build/block-quote": { deps: ["ckeditor5"] },
+        "@ckeditor/ckeditor5-essentials/build/essentials": { deps: ["ckeditor5"] },
+        "@ckeditor/ckeditor5-font/build/font": { deps: ["ckeditor5"] },
+        "@ckeditor/ckeditor5-heading/build/heading": { deps: ["ckeditor5"] },
+        "@ckeditor/ckeditor5-horizontal-line/build/horizontal-line": { deps: ["ckeditor5"] },
+        "@ckeditor/ckeditor5-html-support/build/html-support": { deps: ["ckeditor5"] },
+        "@ckeditor/ckeditor5-restricted-editing/build/restricted-editing": { deps: ["ckeditor5"] },
+        "@ckeditor/ckeditor5-image/build/image": { deps: ["ckeditor5"] },
+        "@ckeditor/ckeditor5-indent/build/indent": { deps: ["ckeditor5"] },
+        "@ckeditor/ckeditor5-link/build/link": { deps: ["ckeditor5"] },
+        "@ckeditor/ckeditor5-list/build/list": { deps: ["ckeditor5"] },
+        "@ckeditor/ckeditor5-paste-from-office/build/paste-from-office": { deps: ["ckeditor5"] },
         "ko.mapping": { deps: ['knockout'] },
         "hqwebapp/js/bootstrap3/hq.helpers": { deps: ['jquery', 'bootstrap', 'knockout', 'underscore'] },
         "datatables.bootstrap": { deps: ['datatables'] },

corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap5/requirejs_config.js

@@ -1,7 +1,8 @@
 /* globals requirejs */
 requirejs.config({
     baseUrl: '/static/',
     paths: {
+        "ckeditor5": "ckeditor5/build/ckeditor5-dll",
         "es6": "requirejs-babel7/es6",
         "babel": "@babel/standalone/babel.min",
         "babel-plugin-transform-modules-requirejs-babel": "babel-plugin-transform-modules-requirejs-babel/index",
@@ -17,6 +18,21 @@
     },
     shim: {
         "ace-builds/src-min-noconflict/ace": { exports: "ace" },
+        "ckeditor5": { exports: "CKEditor5" },
+        "@ckeditor/ckeditor5-editor-classic/build/editor-classic": { deps: ["ckeditor5"] },
+        "@ckeditor/ckeditor5-autoformat/build/autoformat": { deps: ["ckeditor5"] },
+        "@ckeditor/ckeditor5-basic-styles/build/basic-styles": { deps: ["ckeditor5"] },
+        "@ckeditor/ckeditor5-block-quote/build/block-quote": { deps: ["ckeditor5"] },
+        "@ckeditor/ckeditor5-essentials/build/essentials": { deps: ["ckeditor5"] },
+        "@ckeditor/ckeditor5-font/build/font": { deps: ["ckeditor5"] },
+        "@ckeditor/ckeditor5-heading/build/heading": { deps: ["ckeditor5"] },
+        "@ckeditor/ckeditor5-horizontal-line/build/horizontal-line": { deps: ["ckeditor5"] },
+        "@ckeditor/ckeditor5-html-support/build/html-support": { deps: ["ckeditor5"] },
+        "@ckeditor/ckeditor5-restricted-editing/build/restricted-editing": { deps: ["ckeditor5"] },
+        "@ckeditor/ckeditor5-image/build/image": { deps: ["ckeditor5"] },
+        "@ckeditor/ckeditor5-indent/build/indent": { deps: ["ckeditor5"] },
+        "@ckeditor/ckeditor5-link/build/link": { deps: ["ckeditor5"] },
+        "@ckeditor/ckeditor5-list/build/list": { deps: ["ckeditor5"] },
         "ko.mapping": { deps: ['knockout'] },
         "hqwebapp/js/bootstrap5/hq.helpers": { deps: ['jquery', 'knockout', 'underscore'] },
         "datatables.bootstrap": { deps: ['datatables'] },

corehq/apps/hqwebapp/static/hqwebapp/js/ckeditor_knockout_bindings.js

@@ -0,0 +1,197 @@
+hqDefine('hqwebapp/js/ckeditor_knockout_bindings', [
+    'jquery',
+    'underscore',
+    'knockout',
+    'hqwebapp/js/initial_page_data',
+    'ckeditor5',
+    '@ckeditor/ckeditor5-editor-classic/build/editor-classic',
+    '@ckeditor/ckeditor5-autoformat/build/autoformat',
+    '@ckeditor/ckeditor5-basic-styles/build/basic-styles',
+    '@ckeditor/ckeditor5-block-quote/build/block-quote',
+    '@ckeditor/ckeditor5-essentials/build/essentials',
+    '@ckeditor/ckeditor5-font/build/font',
+    '@ckeditor/ckeditor5-heading/build/heading',
+    '@ckeditor/ckeditor5-html-support/build/html-support',
+    '@ckeditor/ckeditor5-horizontal-line/build/horizontal-line',
+    '@ckeditor/ckeditor5-image/build/image',
+    '@ckeditor/ckeditor5-indent/build/indent',
+    '@ckeditor/ckeditor5-link/build/link',
+    '@ckeditor/ckeditor5-list/build/list',
+    '@ckeditor/ckeditor5-paste-from-office/build/paste-from-office',
+    '@ckeditor/ckeditor5-restricted-editing/build/restricted-editing',
+], function (
+    $,
+    _,
+    ko,
+    initialPageData,
+    CKEditor5
+) {
+    ko.bindingHandlers.ckeditor = {
+        init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
+            var options = {
+                    plugins: [
+                        CKEditor5.link.AutoLink,
+                        CKEditor5.autoformat.Autoformat,
+                        CKEditor5.basicStyles.Bold,
+                        CKEditor5.basicStyles.Italic,
+                        CKEditor5.essentials.Essentials,
+                        CKEditor5.font.Font,
+                        CKEditor5.font.FontColor,
+                        CKEditor5.heading.Heading,
+                        CKEditor5.horizontalLine.HorizontalLine,
+                        CKEditor5.htmlSupport.GeneralHtmlSupport,
+                        CKEditor5.image.Image,
+                        CKEditor5.image.ImageCaption,
+                        CKEditor5.image.ImageStyle,
+                        CKEditor5.image.ImageResize,
+                        CKEditor5.image.ImageResizeButtons,
+                        CKEditor5.image.ImageToolbar,
+                        CKEditor5.image.ImageUpload,
+                        CKEditor5.indent.Indent,
+                        CKEditor5.link.Link,
+                        CKEditor5.link.LinkImage,
+                        CKEditor5.list.List,
+                        CKEditor5.paragraph.Paragraph,
+                        CKEditor5.pasteFromOffice.PasteFromOffice,
+                        CKEditor5.restrictedEditing.RestrictedEditingMode,
+                        CKEditor5.upload.SimpleUploadAdapter,
+                    ],
+                    toolbar: {
+                        items: [
+                            'heading',
+                            'fontFamily',
+                            'fontSize',
+                            'fontColor',
+                            '|',
+                            'bold',
+                            'italic',
+                            'link',
+                            'bulletedList',
+                            'numberedList',
+                            '|',
+                            'outdent',
+                            'indent',
+                            '|',
+                            'uploadImage',
+                            'undo',
+                            'redo',
+                            'restrictedEditing',
+                        ],
+                    },
+                    image: {
+                        insert: {
+                            type: 'inline',
+                        },
+                        toolbar: [
+                            'imageStyle:side',
+                            '|',
+                            'toggleImageCaption',
+                            '|',
+                            'linkImage',
+                        ],
+                    },
+                    simpleUpload: {
+                        uploadUrl: initialPageData.reverse(element.attributes['data-image-upload-url'].value),
+                        withCredentials: true,
+                        headers: {
+                            'X-CSRFTOKEN': $("#csrfTokenContainer").val(),
+                        },
+                    },
+                    htmlSupport: {
+                    // We allow all HTML here, and filter it out in a sanitizing step
+                        allow: [
+                            {
+                                name: /.*/,
+                                attributes: true,
+                                classes: true,
+                                styles: true,
+                            },
+                        ],
+                    },
+                    restrictedEditing: {
+                        allowedCommands: [
+                            "fontColor",
+                            "fontBackgroundColor",
+                            "deleteForward",
+                            "forwardDelete",
+                            "delete",
+                            "bold",
+                            "italic",
+                            "enter",
+                            "selectAll",
+                            "shiftEnter",
+                            "insertText",
+                            "input",
+                            "undo",
+                            "redo",
+                            "fontFamily",
+                            "fontSize",
+                            "paragraph",
+                            "insertParagraph",
+                            "heading",
+                            "horizontalLine",
+                            "insertImage",
+                            "replaceImageSource",
+                            "imageInsert",
+                            "imageTextAlternative",
+                            "imageTypeInline",
+                            "toggleImageCaption",
+                            "imageStyle",
+                            "resizeImage",
+                            "imageResize",
+                            "uploadImage",
+                            "imageUpload",
+                            "indent",
+                            "outdent",
+                            "link",
+                            "unlink",
+                            "numberedList",
+                            "bulletedList",
+                            "indentList",
+                            ,"outdentList",
+                        ],
+                    },
+                },
+                editorInstance = undefined;
+
+            CKEditor5.editorClassic.ClassicEditor.create(element, options).then(function (editor) {
+                var isSubscriberChange = false,
+                    isEditorChange = false,
+                    editorInstance = editor;
+                if (typeof ko.utils.unwrapObservable(valueAccessor()) !== "undefined") {
+                    editorInstance.setData(ko.utils.unwrapObservable(valueAccessor()));
+                }
+
+                // Update the observable value when the document changes
+                editorInstance.model.document.on('change:data', function (data) {
+                    if (!isSubscriberChange) {
+                        isEditorChange = true;
+                        valueAccessor()(editorInstance.getData());
+                        isEditorChange = false;
+                    }
+
+                });
+
+                // Update the document whenever the observable changes
+                valueAccessor().subscribe(function (value) {
+                    if (!isEditorChange) {
+                        isSubscriberChange = true;
+                        editorInstance.setData(value);
+                        isSubscriberChange = false;
+                    }
+
+                });
+
+                if (initialPageData.get('read_only_mode')) {
+                    editorInstance.enableReadOnlyMode('');
+                }
+            });
+
+            // handle disposal (if KO removes by the template binding)
+            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
+                CKEditor5.editorClassic.ClassicEditor.remove(editorInstance);
+            });
+
+        },
+    };
+});

corehq/apps/hqwebapp/static/hqwebapp/js/lib/ckeditor5/ckeditor.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @license Copyright (c) 2014-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
+import { Alignment } from '@ckeditor/ckeditor5-alignment';
+import { Bold, Italic, Strikethrough, Underline } from '@ckeditor/ckeditor5-basic-styles';
+import type { EditorConfig } from '@ckeditor/ckeditor5-core';
+import { Essentials } from '@ckeditor/ckeditor5-essentials';
+import { FontBackgroundColor, FontColor, FontFamily, FontSize } from '@ckeditor/ckeditor5-font';
+import { Heading } from '@ckeditor/ckeditor5-heading';
+import { HorizontalLine } from '@ckeditor/ckeditor5-horizontal-line';
+import { DataFilter, DataSchema, GeneralHtmlSupport } from '@ckeditor/ckeditor5-html-support';
+import { AutoImage, Image, ImageCaption, ImageInsert, ImageResize, ImageStyle, ImageToolbar, ImageUpload } from '@ckeditor/ckeditor5-image';
+import { AutoLink, Link, LinkImage } from '@ckeditor/ckeditor5-link';
+import { List } from '@ckeditor/ckeditor5-list';
+import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
+import { PasteFromOffice } from '@ckeditor/ckeditor5-paste-from-office';
+import { RemoveFormat } from '@ckeditor/ckeditor5-remove-format';
+import { SelectAll } from '@ckeditor/ckeditor5-select-all';
+import { Style } from '@ckeditor/ckeditor5-style';
+import { SimpleUploadAdapter } from '@ckeditor/ckeditor5-upload';
+declare class Editor extends ClassicEditor {
+    static builtinPlugins: (typeof Alignment | typeof AutoImage | typeof AutoLink | typeof Bold | typeof DataFilter | typeof DataSchema | typeof Essentials | typeof FontBackgroundColor | typeof FontColor | typeof FontFamily | typeof FontSize | typeof GeneralHtmlSupport | typeof Heading | typeof HorizontalLine | typeof Image | typeof ImageCaption | typeof ImageInsert | typeof ImageResize | typeof ImageStyle | typeof ImageToolbar | typeof ImageUpload | typeof Italic | typeof Link | typeof LinkImage | typeof List | typeof Paragraph | typeof PasteFromOffice | typeof RemoveFormat | typeof SelectAll | typeof SimpleUploadAdapter | typeof Strikethrough | typeof Style | typeof Underline)[];
+    static defaultConfig: EditorConfig;
+}
+export default Editor;

corehq/apps/sms/migrations/0058_email_html_body.py

@@ -0,0 +1,18 @@
+# Generated by Django 3.2.20 on 2023-11-06 14:27
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('sms', '0057_fcm_content_type_messaging_events'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='email',
+            name='html_body',
+            field=models.TextField(null=True),
+        ),
+    ]

corehq/apps/sms/models.py

@@ -2678,3 +2678,4 @@ class Email(models.Model):
     recipient_address = models.CharField(max_length=255, db_index=True)
     subject = models.TextField(null=True)
     body = models.TextField(null=True)
+    html_body = models.TextField(null=True)

corehq/blobs/__init__.py

@@ -82,6 +82,7 @@ class CODES:
     demo_user_restore = 14  # DemoUserRestore
     data_file = 15      # domain data file (see DataFile class)
     form_multimedia = 16     # form submission multimedia zip
+    email_multimedia = 17    # email images and attachments
 
 
 CODES.name_of = {code: name