Allow draft toolbar to be narrower when used in small composer

app/internal_packages/composer/styles/composer.less

@@ -79,43 +79,41 @@
     border-bottom: 1px solid @border-color-divider;
     z-index: 2;
     width: 100%;
-
-    padding-right: 10px;
-  }
-
-  .toolbar-section {
-    display: flex;
-    flex-direction: row;
-    flex-shrink: 0;
-    align-items: center;
   }
 
   .divider {
     width: 1px;
     height: 22px;
     border-right: 1px solid @border-color-divider;
-    margin-right: 7px;
-    padding-right: 7px;
+    margin-right: 1px;
+    padding-right: 1px;
   }
 
   button {
     cursor: pointer;
     color: fadeout(mix(@btn-default-text-color, @component-active-color, 88%), 30%);
-    padding: 4px 9px;
+    padding: 4px 5px;
     border: none;
     background: none;
     width: initial;
-    
+    flex: 1;
+    flex-shrink: 0;
+    max-width: 32px;
+
     &:hover {
       color: fadeout(mix(@btn-default-text-color, @component-active-color, 88%), 5%);
       background: none;
     }
-    select {
-      border: none;
-      background: none;
-      margin: 0;
-      min-width: 72px;
-      max-width: 92px;
+    &.with-select {
+      max-width: 100px;
+      white-space: nowrap;
+      select {
+        border: none;
+        background: none;
+        margin: 0;
+        min-width: 72px;
+        max-width: 92px;
+      }
     }
   }
 
@@ -139,6 +137,10 @@
   }
 
   .link-picker {
+    flex: 1;
+    flex-shrink: 0;
+    max-width: 32px;
+
     .dropdown {
       padding: 5px;
       display: flex;
@@ -428,7 +430,7 @@ body.platform-win32 {
     margin: 0;
 
     .RichEditor-toolbar {
-      .toolbar-section.hide-in-composer {
+      .hide-in-composer {
         display: none;
       }
     }

app/src/components/composer-editor/composer-editor-toolbar.jsx

@@ -42,30 +42,34 @@ export default class ComposerEditorToolbar extends React.Component {
 
   render() {
     const { value, onChange, plugins } = this.props;
-    const sections = [];
+    let sectionItems = [];
 
     const pluginsWithToolbars = plugins.filter(
       (p, idx) => p.toolbarComponents && p.toolbarComponents.length
     );
 
     pluginsWithToolbars.forEach(({ toolbarComponents, toolbarSectionClass }, idx) => {
-      const sectionItems = toolbarComponents.map((Component, cdx) => (
-        <Component key={`${idx}-${cdx}`} value={value} onChange={onChange} />
-      ));
-      if (idx < pluginsWithToolbars.length - 1) {
-        sectionItems.push(<div key="divider" className="divider" />);
-      }
-      sections.push(
-        <div key={idx} className={`toolbar-section ${toolbarSectionClass || ''}`}>
-          {sectionItems}
-        </div>
+      sectionItems.push(
+        ...toolbarComponents.map((Component, cdx) => (
+          <Component
+            key={`${idx}-${cdx}`}
+            value={value}
+            onChange={onChange}
+            className={toolbarSectionClass}
+          />
+        ))
       );
+      if (idx < pluginsWithToolbars.length - 1) {
+        sectionItems.push(
+          <div key={`${idx}-divider`} className={`divider ${toolbarSectionClass}`} />
+        );
+      }
     });
 
     return (
       <div ref={el => (this._el = el)} className="RichEditor-toolbar">
         <div ref={el => (this._innerEl = el)} className="inner">
-          {sections}
+          {sectionItems}
         </div>
       </div>
     );

app/src/components/composer-editor/conversion.jsx

@@ -19,8 +19,8 @@ export const plugins = [
   ...BaseMarkPlugins,
   ...TemplatePlugins,
   ...EmojiPlugins,
-  ...BaseBlockPlugins,
   ...LinkPlugins,
+  ...BaseBlockPlugins,
   ...MarkdownPlugins,
   ...SpellcheckPlugins,
 ];

app/src/components/composer-editor/toolbar-component-factories.jsx

@@ -73,14 +73,14 @@ export function applyValueForMark(value, type, markValue) {
 // React Component Factories
 
 export function BuildToggleButton({ type, button: { iconClass, isActive, onToggle } }) {
-  return ({ value, onChange }) => {
+  return ({ value, onChange, className }) => {
     const active = isActive(value);
     const onMouseDown = e => {
       onChange(onToggle(value, active));
       e.preventDefault();
     };
     return (
-      <button className={active ? 'active' : ''} onMouseDown={onMouseDown}>
+      <button className={`${className} ${active ? 'active' : ''}`} onMouseDown={onMouseDown}>
         <i title={type} className={iconClass} />
       </button>
     );
@@ -163,10 +163,9 @@ export function BuildMarkButtonWithValuePicker(config) {
     render() {
       const { expanded } = this.state;
       const active = hasMark(this.props.value, config.type);
-
       return (
         <div
-          className={`link-picker`}
+          className={`${this.props.className} link-picker`}
           ref={el => (this._el = el)}
           tabIndex={-1}
           onBlur={this.onBlur}
@@ -249,6 +248,7 @@ export function BuildColorPicker(config) {
           tabIndex="-1"
           onBlur={this._onBlur}
           ref={el => (this._el = el)}
+          className={this.props.className}
           style={{ display: 'inline-block', position: 'relative' }}
         >
           <button
@@ -298,7 +298,10 @@ export function BuildFontPicker(config) {
       const displayed = config.convert(value);
 
       return (
-        <button style={{ padding: 0, paddingRight: 6 }}>
+        <button
+          style={{ padding: 0, paddingRight: 6 }}
+          className={`${this.props.className} with-select`}
+        >
           <i className={config.iconClass} />
           <select
             onFocus={this._onFocus}

app/src/flux/stores/draft-editing-session.es6

@@ -188,13 +188,12 @@ export default class DraftEditingSession extends MailspringStore {
         .include(Message.attributes.body)
         .then(draft => {
           if (this._destroyed) {
-            throw new Error('Draft has been destroyed.');
+            console.warn(`Draft loaded but session has been torn down.`);
+            return;
           }
           if (!draft) {
-            throw new Error(`Assertion Failure: Draft ${this.headerMessageId} not found.`);
-          }
-          if (draft.body === undefined) {
-            throw new Error('DraftEditingSession._setDraft - new draft has no body!');
+            console.warn(`Draft ${this.headerMessageId} could not be found. Just deleted?`);
+            return;
           }
           hotwireDraftBodyState(draft);
           this._draft = draft;