Swap empty divs for br, fix parsing of blocks with font styles

app/internal_packages/composer-signature/lib/signature-utils.es6

@@ -12,7 +12,7 @@ export function currentSignatureId(body) {
 }
 
 export function applySignature(body, signature) {
-  let additionalWhitespace = '<div></div>';
+  let additionalWhitespace = '<br/>';
 
   // Remove any existing signature in the body
   let newBody = body;

app/internal_packages/composer-signature/specs/signature-composer-dropdown-spec.jsx

@@ -47,8 +47,7 @@ describe('SignatureComposerDropdown', function signatureComposerDropdown() {
       );
       ReactTestUtils.Simulate.mouseDown(this.signature);
       expect(this.button.props.session.changes.add).toHaveBeenCalledWith({
-        body: `${this.button.props.draft
+        body: `${this.button.props.draft.body}<br/><signature id="2">${sigToAdd.body}</signature>`,
-          .body}<div></div><signature id="2">${sigToAdd.body}</signature>`,
       });
     });
     it('finds and removes the signature when no signature is clicked and there is a current signature', () => {

app/internal_packages/composer-signature/specs/signature-composer-extension-spec.es6

@@ -38,11 +38,11 @@ describe('SignatureComposerExtension', function signatureComposerExtension() {
 
         SignatureComposerExtension.prepareNewDraft({ draft: a });
         expect(a.body).toEqual(
-          `This is a test! <div></div><signature id="1">${TEST_SIGNATURE.body}</signature><div class="gmail_quote">Hello world</div>`
+          `This is a test! <br/><signature id="1">${TEST_SIGNATURE.body}</signature><div class="gmail_quote">Hello world</div>`
         );
         SignatureComposerExtension.prepareNewDraft({ draft: b });
         expect(b.body).toEqual(
-          `This is a another test.<div></div><signature id="1">${TEST_SIGNATURE.body}</signature>`
+          `This is a another test.<br/><signature id="1">${TEST_SIGNATURE.body}</signature>`
         );
       });
 

app/internal_packages/composer/specs/send-action-button-spec.jsx

@@ -28,7 +28,7 @@ const NoIconUrl = {
   performSendAction() {},
 };
 
-fdescribe('SendActionButton', function describeBlock() {
+describe('SendActionButton', function describeBlock() {
   beforeEach(() => {
     spyOn(Actions, 'sendDraft');
     this.isValidDraft = jasmine.createSpy('isValidDraft');

app/internal_packages/composer/styles/composer.less

@@ -55,7 +55,7 @@
     }
   }
   blockquote {
-    color: purple;
+    color: #500050;
   }
   &:hover {
     border: 1px dashed @border-color-divider;

app/src/components/composer-editor/base-block-plugins.jsx

@@ -161,6 +161,14 @@ const rules = [
         config = BLOCK_CONFIG.code;
       }
 
+      // div elements that are entirely empty and have no meaningful-looking styles applied
+      // would probably just add extra whitespace
+      if (tagName === 'div' && !el.hasChildNodes()) {
+        const s = (el.getAttribute('style') || '').toLowerCase();
+        if (!s.includes('background') && !s.includes('margin') && !s.includes('padding')) {
+          return;
+        }
+      }
       // return block
       if (config) {
         return {

app/src/components/composer-editor/base-mark-plugins.jsx

@@ -7,6 +7,8 @@ import {
   hasMark,
 } from './toolbar-component-factories';
 
+import BaseBlockPlugins from './base-block-plugins';
+
 export const DEFAULT_FONT_SIZE = 2;
 export const DEFAULT_FONT_OPTIONS = [
   { name: 'Small', value: 1 },
@@ -194,13 +196,28 @@ const rules = [
       }
 
       if (marks.length) {
+        // convert array of marks into a tree. If the marks are on a BLOCK
+        // tagname, also nest the marks within the block node that would
+        // have been created, since the block will not be created if we return
+        // a value.
+        let block = null;
+        for (const plugin of BaseBlockPlugins) {
+          if (block) break;
+          if (!plugin.rules) continue;
+          for (const { deserialize } of plugin.rules) {
+            block = deserialize(el, next);
+            if (block) {
+              break;
+            }
+          }
+        }
         const root = marks[0];
         let tail = root;
         for (let x = 1; x < marks.length; x++) {
           tail.nodes = [marks[x]];
           tail = tail.nodes[0];
         }
-        tail.nodes = next(el.childNodes);
+        tail.nodes = block ? [block] : next(el.childNodes);
         return root;
       }
     },

app/src/flux/stores/draft-factory.es6

@@ -34,7 +34,7 @@ class DraftFactory {
   async createDraft(fields = {}) {
     const account = this._accountForNewDraft();
     const defaults = {
-      body: '<div></div>',
+      body: '<br/>',
       subject: '',
       version: 0,
       unread: false,
@@ -164,15 +164,15 @@ class DraftFactory {
       accountId: message.accountId,
       replyToHeaderMessageId: message.headerMessageId,
       body: `
-        <div></div>
+        <br/>
-        <div></div>
+        <br/>
         <div class="gmail_quote_attribution">${DOMUtils.escapeHTMLCharacters(
           message.replyAttributionLine()
         )}</div>
         <blockquote class="gmail_quote"
           style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex;">
           ${prevBody}
-          <div></div>
+          <br/>
         </blockquote>
         `,
     });
@@ -200,7 +200,7 @@ class DraftFactory {
       accountId: message.accountId,
       forwardedHeaderMessageId: message.headerMessageId,
       body: `
-        <div></div>
+        <br/>
         <div class="gmail_quote">
           <br>
           ---------- Forwarded message ---------
@@ -208,7 +208,7 @@ class DraftFactory {
           ${fields.join('<br>')}
           <br><br>
           ${body}
-          <div></div>
+          <br/>
         </div>
         `,
     });