Add, edit and send embedded images

package.json

@@ -75,6 +75,7 @@
         "mimemessage": "github:ProtonMail/mimemessage.js#semver:~v1.1.4",
         "proton-pack": "github:ProtonMail/proton-pack.git#semver:^3.0.0",
         "proton-shared": "github:ProtonMail/proton-shared#master",
+        "quill-delta": "^4.2.1",
         "react": "^16.8.6",
         "react-components": "github:ProtonMail/react-components#master",
         "react-dom": "^16.8.6",

src/app/components/composer/Composer.tsx

@@ -107,7 +107,8 @@ const Composer = ({
         }
 
         if (modelMessage.content === undefined) {
-            setModelMessage({ ...modelMessage, content: syncedMessage.content });
+            console.log('loaded content', syncedMessage.content);
+            setModelMessage({ ...modelMessage, data: syncedMessage.data, content: syncedMessage.content });
         }
 
         onChange(syncedMessage);
@@ -150,17 +151,25 @@ const Composer = ({
         autoSave(newModelMessage);
     };
     const save = async (messageToSave = modelMessage) => {
+        console.log('save', messageToSave.content);
         await saveDraft(messageToSave);
         createNotification({ text: c('Info').t`Message saved` });
     };
     const handleAddAttachments = async (files: File[]) => {
-        const attachments = await upload(files, modelMessage, ATTACHMENT_ACTION.ATTACHMENT, api);
-        if (attachments) {
+        // TODO: Add embedded / attachment pseudo modal
+        const action = ATTACHMENT_ACTION.INLINE;
+
+        // console.log('handleAddAttachments', files, syncedMessage, action, api);
+
+        const uploads = await upload(files, syncedMessage, action, api);
+        const attachments = uploads.map(({ attachment }) => attachment);
+        if (uploads) {
             const Attachments = [...(modelMessage.data?.Attachments || []), ...attachments];
             const newModelMessage = mergeMessages(modelMessage, { data: { Attachments } });
             setModelMessage(newModelMessage);
             save(modelMessage);
         }
+        return attachments;
     };
     const handleRemoveAttachment = (attachment: Attachment) => async () => {
         await api(removeAttachment(attachment.ID || '', modelMessage.data?.ID || ''));
@@ -227,6 +236,7 @@ const Composer = ({
                         message={modelMessage}
                         onChange={handleChange}
                         onFocus={addressesBlurRef.current}
+                        onAddAttachments={handleAddAttachments}
                         onRemoveAttachment={handleRemoveAttachment}
                         contentFocusRef={contentFocusRef}
                     />

src/app/components/composer/ComposerContent.tsx

@@ -1,50 +1,43 @@
-import React, { MutableRefObject, useRef, useEffect, RefObject } from 'react';
-import ReactQuill from 'react-quill';
-import Quill from 'quill';
-import { noop } from 'proton-shared/lib/helpers/function';
+import React, { MutableRefObject } from 'react';
 import { MessageExtended } from '../../models/message';
 import { getAttachments } from '../../helpers/message/messages';
 import AttachmentsList from './attachments/AttachmensList';
 import { Attachment } from '../../models/attachment';
 
 import 'react-quill/dist/quill.snow.css';
-
-const Block = Quill.import('blots/block');
-Block.tagName = 'div';
-Quill.register(Block);
+import Editor from './editor/Editor';
 
 interface Props {
     message: MessageExtended;
     onChange: (message: MessageExtended) => void;
     onFocus: () => void;
+    onAddAttachments: (files: File[]) => void;
     onRemoveAttachment: (attachment: Attachment) => () => void;
     contentFocusRef: MutableRefObject<() => void>;
 }
 
-const ComposerContent = ({ message, onChange, onFocus, onRemoveAttachment, contentFocusRef }: Props) => {
-    const inputRef: RefObject<ReactQuill> = useRef(null);
-
-    useEffect(() => {
-        contentFocusRef.current = inputRef.current?.focus || noop;
-    }, []);
+const ComposerContent = ({
+    message,
+    onChange,
+    onFocus,
+    onAddAttachments,
+    onRemoveAttachment,
+    contentFocusRef
+}: Props) => {
+    const attachments = getAttachments(message.data);
 
-    const handleChange = (content: string, delta: any, source: string) => {
-        if (source === 'user') {
-            onChange({ content });
-        }
+    const handleChange = (content: string) => {
+        onChange({ content });
     };
 
-    const attachments = getAttachments(message.data);
-
     return (
         <section className="composer-content flex-item-fluid w100 mb0-5 flex flex-column flex-nowrap">
-            <ReactQuill
-                className="composer-quill w100 flex-item-fluid"
-                value={message.content || ''}
-                readOnly={!message.content}
+            <Editor
+                content={message.content}
                 onChange={handleChange}
                 onFocus={onFocus}
-                ref={inputRef}
+                onAddAttachments={onAddAttachments}
+                contentFocusRef={contentFocusRef}
             />
             {attachments.length > 0 && <AttachmentsList message={message.data} onRemove={onRemoveAttachment} />}
         </section>

src/app/components/composer/attachments/AttachmentsButton.tsx

@@ -1,11 +1,12 @@
-import React, { ChangeEvent } from 'react';
+import React, { ChangeEvent, ReactNode } from 'react';
 import { Button } from 'react-components';
 
 interface Props {
     onAddAttachments: (files: File[]) => void;
+    children?: ReactNode;
 }
 
-const AttachmentsButton = ({ onAddAttachments }: Props) => {
+const AttachmentsButton = ({ onAddAttachments, children }: Props) => {
     const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
         const input = event.target;
         if (input.files) {
@@ -17,7 +18,9 @@ const AttachmentsButton = ({ onAddAttachments }: Props) => {
     return (
         <div className="composer-attachments-button-wrapper">
             <input type="file" multiple onChange={handleChange} />
-            <Button icon="attach" />
+            <Button type="button" icon={!children && 'attach'}>
+                {children}
+            </Button>
         </div>
     );
 };

src/app/components/composer/composer.scss

@@ -163,7 +163,7 @@
 
 .composer-quill {
     height: 100%;
-    margin-bottom: 42px; // compensate for Quill strange auto sizing
+    // margin-bottom: 42px; // compensate for Quill strange auto sizing
 }
 
 .composer-attachments-button-wrapper {

src/app/components/composer/editor/Editor.tsx

@@ -0,0 +1,93 @@
+import React, { MutableRefObject, useRef, useEffect, RefObject, useState } from 'react';
+import ReactQuill from 'react-quill';
+import Quill, { DeltaStatic } from 'quill';
+import Delta from 'quill-delta';
+
+import { generateUID } from 'react-components';
+import { noop } from 'proton-shared/lib/helpers/function';
+
+import { Attachment } from '../../../models/attachment';
+import { getCid } from '../../../helpers/attachment/attachments';
+import { getBlob } from '../../../helpers/embedded/embeddedStoreBlobs';
+import EditorToolbar from './EditorToolbar';
+
+import '../../../helpers/quill/quillSetup';
+
+import 'react-quill/dist/quill.snow.css';
+
+// Strangely types from quill and quill-delta are incompatible
+const convertDelta = (delta: Delta): DeltaStatic => (delta as any) as DeltaStatic;
+
+interface Props {
+    content?: string;
+    onChange: (content: string) => void;
+    onFocus: () => void;
+    onAddAttachments: (files: File[]) => Promise<Attachment[]>;
+    contentFocusRef: MutableRefObject<() => void>;
+}
+
+const Editor = ({ content, onChange, onFocus, onAddAttachments, contentFocusRef }: Props) => {
+    const [uid] = useState(generateUID('quill'));
+    const reactQuillRef: RefObject<ReactQuill> = useRef(null);
+
+    const toolbarId = `quill-${uid}-toolbar`;
+    const getQuill = () => reactQuillRef.current?.getEditor() as Quill;
+
+    useEffect(() => {
+        contentFocusRef.current = reactQuillRef.current?.focus || noop;
+    }, []);
+
+    const handleChange = (content: string, delta: any, source: string) => {
+        if (source === 'user') {
+            onChange(content);
+        }
+    };
+
+    const handleAddImageUrl = (url: string) => {
+        const quill = getQuill();
+        const range = quill.getSelection(true);
+
+        const delta = new Delta()
+            .retain(range.index)
+            .delete(range.length)
+            .insert({ image: url });
+
+        quill.updateContents(convertDelta(delta), 'user');
+        quill.setSelection(range.index + 1, 0, 'silent');
+    };
+
+    const handleAddAttachments = async (files: File[]) => {
+        const attachments = await onAddAttachments(files);
+
+        const quill = getQuill();
+        const range = quill.getSelection(true);
+
+        const delta = new Delta().retain(range.index).delete(range.length);
+
+        attachments.forEach((attachment) => {
+            const cid = getCid(attachment);
+            const { url } = getBlob(cid);
+            delta.insert({ image: url }, { cid, alt: attachment.Name });
+        });
+
+        quill.updateContents(convertDelta(delta), 'user');
+        quill.setSelection(range.index + 1, 0, 'silent');
+    };
+
+    return (
+        <>
+            <EditorToolbar id={toolbarId} onAddImageUrl={handleAddImageUrl} onAddAttachments={handleAddAttachments} />
+            <ReactQuill
+                className="composer-quill w100 flex-item-fluid"
+                modules={{ toolbar: `#${toolbarId}` }}
+                value={content || ''}
+                readOnly={!content}
+                onChange={handleChange}
+                onFocus={onFocus}
+                ref={reactQuillRef}
+            />
+        </>
+    );
+};
+
+export default Editor;