diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
index 718c4aaed..dd16c76e8 100644
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -12,34 +12,34 @@ locations if you have a question or comment:
 Lastly, be sure to preview your issue before saving. Thanks!
 -->
 
-- [ ] I have searched open and closed issues for duplicates
-<!--
-  You can search all issues here:
-    https://github.com/WhisperSystems/Signal-Desktop/issues?utf8=%E2%9C%93&q=is%3Aissue
-  Replace [ ] with [X] once you've searched
--->
+* [ ] I have searched open and closed issues for duplicates
+  <!--
+    You can search all issues here:
+      https://github.com/WhisperSystems/Signal-Desktop/issues?utf8=%E2%9C%93&q=is%3Aissue
+    Replace [ ] with [X] once you've searched
+  -->
 
-----------------------------------------
+---
 
 ### Bug description
 
 <!-- Give an overall summary of the issue. -->
 
-
 ### Steps to reproduce
 
 <!-- Using bullet points, list the steps that reproduce the bug. -->
 
-1.
-2.
-3.
+1.  step one
+2.  step two
+3.  step three
 
 Actual result:
+
 <!-- Describe the details of the buggy behaviour. -->
 
 Expected result:
-<!-- Describe in detail what the correct behavior should be. -->
 
+<!-- Describe in detail what the correct behavior should be. -->
 
 ### Screenshots
 
@@ -48,19 +48,19 @@ How to take screenshots on all OSes: https://www.take-a-screenshot.org/
 You can drag and drop images into this text box.
 -->
 
-
 ### Platform info
 
-
 Signal version:
+
 <!-- You can see Signal's version number at Help -> About or File -> About Signal Desktop -->
 
 Operating System:
+
 <!-- Instructions for finding your OS version are here: http://whatsmyos.com/ -->
 
 Linked device version:
-<!-- Android: Settings -> Advanced,  iOS: Settings -> General -> About -->
 
+<!-- Android: Settings -> Advanced,  iOS: Settings -> General -> About -->
 
 ### Link to debug log
 
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index bf68e1ea1..dfd5bf2af 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -8,17 +8,17 @@ Remember, you can preview this before saving it.
 <!-- You can remove this first section if you have contributed before -->
 
 ### First time contributor checklist:
-- [ ] I have read the [README](https://github.com/WhisperSystems/Signal-Desktop/blob/master/README.md) and [Contributor Guidelines](https://github.com/WhisperSystems/Signal-Desktop/blob/master/CONTRIBUTING.md)
-- [ ] I have signed the [Contributor Licence Agreement](https://whispersystems.org/cla/)
 
+* [ ] I have read the [README](https://github.com/WhisperSystems/Signal-Desktop/blob/master/README.md) and [Contributor Guidelines](https://github.com/WhisperSystems/Signal-Desktop/blob/master/CONTRIBUTING.md)
+* [ ] I have signed the [Contributor Licence Agreement](https://whispersystems.org/cla/)
 
 ### Contributor checklist:
-- [ ] My contribution is **not** related to translations. _Please submit translation changes via our [Signal Desktop Transifex project](https://www.transifex.com/liliakai/signal-desktop/)._
-- [ ] My commits are in nice logical chunks with [good commit messages](http://chris.beams.io/posts/git-commit/)
-- [ ] My changes are [rebased](https://medium.freecodecamp.org/git-rebase-and-the-golden-rule-explained-70715eccc372) on the latest [`development`](https://github.com/WhisperSystems/Signal-Desktop/tree/development) branch
-- [ ] My changes pass 100% of [local tests](https://github.com/WhisperSystems/Signal-Desktop/blob/master/CONTRIBUTING.md#tests)
-- [ ] My changes are ready to be shipped to users
 
+* [ ] My contribution is **not** related to translations. _Please submit translation changes via our [Signal Desktop Transifex project](https://www.transifex.com/liliakai/signal-desktop/)._
+* [ ] My commits are in nice logical chunks with [good commit messages](http://chris.beams.io/posts/git-commit/)
+* [ ] My changes are [rebased](https://medium.freecodecamp.org/git-rebase-and-the-golden-rule-explained-70715eccc372) on the latest [`development`](https://github.com/WhisperSystems/Signal-Desktop/tree/development) branch
+* [ ] My changes pass 100% of [local tests](https://github.com/WhisperSystems/Signal-Desktop/blob/master/CONTRIBUTING.md#tests)
+* [ ] My changes are ready to be shipped to users
 
 ### Description
 
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 358338685..1c54c7be9 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,5 +1,4 @@
-Contributor Guidelines
-======================
+# Contributor Guidelines
 
 ## Advice for new contributors
 
@@ -20,7 +19,6 @@ Once you've spent a little bit of time planning your solution, it's a good idea
 back to the issue and talk about your approach. We'd be happy to provide feedback. [An
 ounce of prevention, as they say!](https://www.goodreads.com/quotes/247269-an-ounce-of-prevention-is-worth-a-pound-of-cure)
 
-
 ## Developer Setup
 
 First, you'll need [Node.js](https://nodejs.org/) which matches our current version.
@@ -33,7 +31,7 @@ Then you need `git`, if you don't have that yet: https://git-scm.com/
 
 And for the final step before we actually get started, you'll need build tools to install
 the native modules used by the application. On Windows, it's easiest to open the [Command
-Prompt (`cmd.exe`) as Administrator](https://technet.microsoft.com/en-us/library/cc947813(v=ws.10).aspx)
+Prompt (`cmd.exe`) as Administrator](<https://technet.microsoft.com/en-us/library/cc947813(v=ws.10).aspx>)
 and run this:
 
 ```
@@ -78,7 +76,6 @@ Fear not! You don't have to link the app with your phone. During setup in develo
 mode, you'll be presented with a 'Standalone' button which goes through the registration
 process like you would on a phone. But you won't be linked to any other devices.
 
-
 ## The staging environment
 
 Sadly, this default setup results in no contacts and no message history, an entirely
@@ -86,9 +83,10 @@ empty application. But you can use the information from your production install
 Desktop to populate your testing application!
 
 First, find your application data:
-  - OSX: `~/Library/Application Support/Signal`
-  - Linux: `~/.config/Signal`
-  - Windows 10: `C:\Users\<YourName>\AppData\Roaming\Signal`
+
+* OSX: `~/Library/Application Support/Signal`
+* Linux: `~/.config/Signal`
+* Windows 10: `C:\Users\<YourName>\AppData\Roaming\Signal`
 
 Now make a copy of this production data directory in the same place, and call it
 `Signal-development`. Now start up the development version of the app as normal,
@@ -105,7 +103,6 @@ message history and contact list.
 Here's the catch: you can't message any of these contacts, since they haven't done the
 same thing. Who can you message for testing?
 
-
 ## Additional storage profiles
 
 What you need for proper testing is additional phone numbers, to register additional
@@ -134,13 +131,11 @@ NODE_APP_INSTANCE=alice yarn run start
 This changes the [userData](https://electron.atom.io/docs/all/#appgetpathname)
 directory from `%appData%/Signal` to `%appData%/Signal-aliceProfile`.
 
-
 # Making changes
 
 So you're in the process of preparing that pull request. Here's how to make that go
 smoothly.
 
-
 ## Tests
 
 Please write tests! Our testing framework is
@@ -163,44 +158,43 @@ the report with `yarn open-coverage`.
 
 So you wanna make a pull request? Please observe the following guidelines.
 
- * Please do not submit pull requests for translation fixes. Anyone can update
-   the translations in
-   [Transifex](https://www.transifex.com/projects/p/signal-desktop).
- * Never use plain strings right in the source code - pull them from `messages.json`!
-   You **only** need to modify the default locale
-   [`_locales/en/messages.json`](_locales/en/messages.json). Other locales are generated
-   automatically based on that file and then periodically uploaded to Transifex for
-   translation.
- * [Rebase](https://nathanleclaire.com/blog/2014/09/14/dont-be-scared-of-git-rebase/) your
-   changes on the latest `development` branch, resolving any conflicts.
-   This ensures that your changes will merge cleanly when you open your PR.
- * Be sure to add and run tests!
- * Make sure the diff between our master and your branch contains only the
-   minimal set of changes needed to implement your feature or bugfix. This will
-   make it easier for the person reviewing your code to approve the changes.
-   Please do not submit a PR with commented out code or unfinished features.
- * Avoid meaningless or too-granular commits. If your branch contains commits like
-   the lines of "Oops, reverted this change" or "Just experimenting, will
-   delete this later", please [squash or rebase those changes away](https://robots.thoughtbot.com/git-interactive-rebase-squash-amend-rewriting-history).
- * Don't have too few commits. If you have a complicated or long lived feature
-   branch, it may make sense to break the changes up into logical atomic chunks
-   to aid in the review process.
- * Provide a well written and nicely formatted commit message. See [this
-   link](http://chris.beams.io/posts/git-commit/)
-   for some tips on formatting. As far as content, try to include in your
-   summary
-     1. What you changed
-     2. Why this change was made (including git issue # if appropriate)
-     3. Any relevant technical details or motivations for your implementation
-        choices that may be helpful to someone reviewing or auditing the commit
-        history in the future. When in doubt, err on the side of a longer
-        commit message.
+* Please do not submit pull requests for translation fixes. Anyone can update
+  the translations in
+  [Transifex](https://www.transifex.com/projects/p/signal-desktop).
+* Never use plain strings right in the source code - pull them from `messages.json`!
+  You **only** need to modify the default locale
+  [`_locales/en/messages.json`](_locales/en/messages.json). Other locales are generated
+  automatically based on that file and then periodically uploaded to Transifex for
+  translation.
+* [Rebase](https://nathanleclaire.com/blog/2014/09/14/dont-be-scared-of-git-rebase/) your
+  changes on the latest `development` branch, resolving any conflicts.
+  This ensures that your changes will merge cleanly when you open your PR.
+* Be sure to add and run tests!
+* Make sure the diff between our master and your branch contains only the
+  minimal set of changes needed to implement your feature or bugfix. This will
+  make it easier for the person reviewing your code to approve the changes.
+  Please do not submit a PR with commented out code or unfinished features.
+* Avoid meaningless or too-granular commits. If your branch contains commits like
+  the lines of "Oops, reverted this change" or "Just experimenting, will
+  delete this later", please [squash or rebase those changes away](https://robots.thoughtbot.com/git-interactive-rebase-squash-amend-rewriting-history).
+* Don't have too few commits. If you have a complicated or long lived feature
+  branch, it may make sense to break the changes up into logical atomic chunks
+  to aid in the review process.
+* Provide a well written and nicely formatted commit message. See [this
+  link](http://chris.beams.io/posts/git-commit/)
+  for some tips on formatting. As far as content, try to include in your
+  summary
+  1.  What you changed
+  2.  Why this change was made (including git issue # if appropriate)
+  3.  Any relevant technical details or motivations for your implementation
+      choices that may be helpful to someone reviewing or auditing the commit
+      history in the future. When in doubt, err on the side of a longer
+      commit message.
 
 Above all, spend some time with the repository. Follow the pull request template added to
 your pull request description automatically. Take a look at recent approved pull requests,
 see how they did things.
 
-
 ## Linking to a staging mobile device
 
 Multiple standalone desktop devices are great for testing of a lot of scenarios. But a lot
@@ -226,7 +220,6 @@ Then you can set up your development build of Signal Desktop as normal. If you'v
 set up as a standalone install, you can switch by opening the DevTools (View -> Toggle
 Developer Tools) and entering this into the Console and pressing enter: `window.owsDesktopApp.appView.openInstaller();`
 
-
 ## Changing to production
 
 If you're completely sure that your changes will have no impact to the production servers,
@@ -244,16 +237,16 @@ you can connect your development build to the production server by putting a fil
 production servers will _unregister_ your mobile device! All messages from your contacts
 will go to your new development desktop app instead of your phone.
 
-
 ## Testing Production Builds
 
 To test changes to the build system, build a release using
+
 ```
 yarn generate
 yarn build-release
 ```
-Then, run the tests using `grunt test-release:osx --dir=release`, replacing `osx` with `linux` or `win` depending on your platform.
 
+Then, run the tests using `grunt test-release:osx --dir=release`, replacing `osx` with `linux` or `win` depending on your platform.
 
 ## Dependencies
 
@@ -265,11 +258,11 @@ npm, then run `npm install` to install bower, grunt, and related plugins.
 
 ### Adding a bower component
 
-Add the package name and version to bower.json under 'dependencies' or `bower
-install package-name --save`
+Add the package name and version to bower.json under 'dependencies' or `bower install package-name --save`
 
 Next update the "preen" config in bower.json with the list of files we will
 actually use from the new package, e.g.:
+
 ```
   "preen": {
     "package-name": [
@@ -279,6 +272,7 @@ actually use from the new package, e.g.:
     ...
   }
 ```
+
 If you'd like to add the new dependency to js/components.js to be included on
 all html pages, simply append the package name to the concat.app list in
 `bower.json`. Take care to insert it in the order you would like it
diff --git a/README.md b/README.md
index 1540294ff..71eee2080 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@ Signal Desktop
 
 Signal Desktop is an Electron application that links with your
 [Signal Android](https://github.com/signalapp/Signal-Android)
- or [Signal iOS](https://github.com/signalapp/Signal-iOS) app.
+or [Signal iOS](https://github.com/signalapp/Signal-iOS) app.
 
 ## Install production version: https://signal.org/download/
 
@@ -12,40 +12,36 @@ Signal Desktop is an Electron application that links with your
 
 You can install it on a computer which already has the production version installed. It uses different data and install locations.
 
-- _Windows:_ You can find the most recent build here: https://updates.signal.org/desktop/beta.yml
-- _Mac:_ You can find the most recent build here: https://updates.signal.org/desktop/beta-mac.yml
-- _Linux:_ same instructions as the production install steps linked above, but run `apt-get install signal-desktop-beta` instead
-
+* _Windows:_ You can find the most recent build here: https://updates.signal.org/desktop/beta.yml
+* _Mac:_ You can find the most recent build here: https://updates.signal.org/desktop/beta-mac.yml
+* _Linux:_ same instructions as the production install steps linked above, but run `apt-get install signal-desktop-beta` instead
 
 ## Got a question?
 
 You can find answers to a number of frequently asked questions on our support site: https://support.signal.org/.
 The community forum is another good place for questions: https://community.signalusers.org/.
 
-
 ## Found a Bug? Have a feature request?
 
 Please search the existing issues for your bug and create a new one if the issue is not yet tracked!
 
 https://github.com/signalapp/Signal-Desktop/issues
 
-
 ## Contributing Translations
+
 Interested in helping to translate Signal? Contribute here:
 
 https://www.transifex.com/projects/p/signal-desktop
 
-
 ## Contributing Code
 
 Please see [CONTRIBUTING.md](https://github.com/signalapp/Signal-Desktop/blob/master/CONTRIBUTING.md)
 for setup instructions and contributor guidelines. And don't forget to sign the
 [CLA](https://signal.org/cla/).
 
-
 ## Contributing Funds
-You can donate to Signal development through the [Freedom of the Press Foundation](https://freedom.press/crowdfunding/signal/).
 
+You can donate to Signal development through the [Freedom of the Press Foundation](https://freedom.press/crowdfunding/signal/).
 
 ## Cryptography Notice
 
diff --git a/package.json b/package.json
index 34973ed75..bec36c58a 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "lint": "yarn format --list-different && yarn lint-windows",
     "lint-windows": "yarn eslint && yarn grunt lint && yarn tslint",
     "tslint": "tslint --config tslint.json --format stylish --project .",
-    "format": "prettier --write \"*.js\" \"js/**/*.js\" \"ts/**/*.{ts,tsx}\" \"test/**/*.js\"",
+    "format": "prettier --write \"*.js\" \"js/**/*.js\" \"ts/**/*.{ts,tsx}\" \"test/**/*.js\" \"*.md\" \"./**/*.md\"",
     "transpile": "tsc",
     "clean-transpile": "rimraf ts/**/*.js ts/*.js",
     "open-coverage": "open coverage/lcov-report/index.html",
diff --git a/ts/components/Lightbox.md b/ts/components/Lightbox.md
index 4bc11546d..fb439a92b 100644
--- a/ts/components/Lightbox.md
+++ b/ts/components/Lightbox.md
@@ -1,7 +1,7 @@
 ```js
 const noop = () => {};
 
-<div style={{position: 'relative', width: '100%', height: 500}}>
+<div style={{ position: 'relative', width: '100%', height: 500 }}>
   <Lightbox
     objectURL="https://placekitten.com/800/600"
     contentType="image/jpeg"
@@ -9,5 +9,5 @@ const noop = () => {};
     onPrevious={noop}
     onSave={noop}
   />
-</div>
+</div>;
 ```
diff --git a/ts/components/LightboxGallery.md b/ts/components/LightboxGallery.md
index 66f90e0dc..7bb78be59 100644
--- a/ts/components/LightboxGallery.md
+++ b/ts/components/LightboxGallery.md
@@ -10,10 +10,7 @@ const items = [
   { objectURL: 'https://placekitten.com/920/620', contentType: 'image/jpeg' },
 ];
 
-<div style={{position: 'relative', width: '100%', height: 500}}>
-  <LightboxGallery
-    items={items}
-    onSave={noop}
-  />
-</div>
+<div style={{ position: 'relative', width: '100%', height: 500 }}>
+  <LightboxGallery items={items} onSave={noop} />
+</div>;
 ```
diff --git a/ts/components/conversation/Message.md b/ts/components/conversation/Message.md
index 116d365b9..afefcd507 100644
--- a/ts/components/conversation/Message.md
+++ b/ts/components/conversation/Message.md
@@ -1,4 +1,3 @@
-
 Placeholder component:
 
 ```jsx
@@ -17,21 +16,17 @@ const outgoing = new Whisper.Message({
   body: 'How are you doing this fine day?',
   sent_at: Date.now() - 18000,
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550003',
-  type: 'incoming',
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550003',
+    type: 'incoming',
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 ### In a group conversation
@@ -42,21 +37,17 @@ const outgoing = new Whisper.Message({
   body: 'How are you doing this fine day?',
   sent_at: Date.now() - 200000,
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550003',
-  type: 'incoming',
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550003',
+    type: 'incoming',
+  })
+);
 const View = Whisper.MessageView;
-<util.ConversationContext theme={util.theme} type="group" >
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+<util.ConversationContext theme={util.theme} type="group">
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 ### With an error
@@ -72,22 +63,18 @@ const outgoing = new Whisper.Message({
   sent_at: Date.now() - 200000,
   errors: [error],
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550003',
-  type: 'incoming',
-  body: null,
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550003',
+    type: 'incoming',
+    body: null,
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### Network error (outgoing only)
@@ -103,12 +90,9 @@ const outgoing = new Whisper.Message({
   body: "This message won't get through...",
 });
 const View = Whisper.MessageView;
-<util.ConversationContext theme={util.theme} type="group" >
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+<util.ConversationContext theme={util.theme} type="group">
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### Network error, partial send in group (outgoing only)
@@ -125,12 +109,9 @@ const outgoing = new Whisper.Message({
   body: "This message won't get through...",
 });
 const View = Whisper.MessageView;
-<util.ConversationContext theme={util.theme} type="group" >
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+<util.ConversationContext theme={util.theme} type="group">
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### No message contents
@@ -140,22 +121,18 @@ const outgoing = new Whisper.Message({
   type: 'outgoing',
   sent_at: Date.now() - 200000,
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550003',
-  type: 'incoming',
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550003',
+    type: 'incoming',
+  })
+);
 
 const View = Whisper.MessageView;
-<util.ConversationContext theme={util.theme} >
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+<util.ConversationContext theme={util.theme}>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 ### Disappearing
@@ -168,22 +145,18 @@ const outgoing = new Whisper.Message({
   expirationStartTimestamp: Date.now() - 1000,
   body: 'This message will self-destruct in two minutes',
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550003',
-  type: 'incoming',
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550003',
+    type: 'incoming',
+  })
+);
 
 const View = Whisper.MessageView;
-<util.ConversationContext theme={util.theme} >
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+<util.ConversationContext theme={util.theme}>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 ### Notfications
@@ -200,7 +173,7 @@ const fromOther = new Whisper.Message({
   expirationStartTimestamp: Date.now() - 1000,
   expirationTimerUpdate: {
     source: '+12025550003',
-  }
+  },
 });
 const fromUpdate = new Whisper.Message({
   type: 'incoming',
@@ -212,7 +185,7 @@ const fromUpdate = new Whisper.Message({
   expirationTimerUpdate: {
     fromSync: true,
     source: util.ourNumber,
-  }
+  },
 });
 const fromMe = new Whisper.Message({
   type: 'incoming',
@@ -223,23 +196,14 @@ const fromMe = new Whisper.Message({
   expirationStartTimestamp: Date.now() - 1000,
   expirationTimerUpdate: {
     source: util.ourNumber,
-  }
+  },
 });
 const View = Whisper.ExpirationTimerUpdateView;
-<util.ConversationContext theme={util.theme} >
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: fromOther }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: fromUpdate }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: fromMe }}
-  />
-</util.ConversationContext>
+<util.ConversationContext theme={util.theme}>
+  <util.BackboneWrapper View={View} options={{ model: fromOther }} />
+  <util.BackboneWrapper View={View} options={{ model: fromUpdate }} />
+  <util.BackboneWrapper View={View} options={{ model: fromMe }} />
+</util.ConversationContext>;
 ```
 
 #### Safety number change
@@ -251,12 +215,9 @@ const incoming = new Whisper.Message({
   key_changed: '+12025550003',
 });
 const View = Whisper.KeyChangeView;
-<util.ConversationContext theme={util.theme} >
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-</util.ConversationContext>
+<util.ConversationContext theme={util.theme}>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+</util.ConversationContext>;
 ```
 
 #### Marking as verified
@@ -277,16 +238,10 @@ const local = new Whisper.Message({
 });
 
 const View = Whisper.VerifiedChangeView;
-<util.ConversationContext theme={util.theme} >
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: fromPrimary }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: local }}
-  />
-</util.ConversationContext>
+<util.ConversationContext theme={util.theme}>
+  <util.BackboneWrapper View={View} options={{ model: fromPrimary }} />
+  <util.BackboneWrapper View={View} options={{ model: local }} />
+</util.ConversationContext>;
 ```
 
 #### Marking as not verified
@@ -305,16 +260,10 @@ const local = new Whisper.Message({
 });
 
 const View = Whisper.VerifiedChangeView;
-<util.ConversationContext theme={util.theme} >
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: fromPrimary }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: local }}
-  />
-</util.ConversationContext>
+<util.ConversationContext theme={util.theme}>
+  <util.BackboneWrapper View={View} options={{ model: fromPrimary }} />
+  <util.BackboneWrapper View={View} options={{ model: local }} />
+</util.ConversationContext>;
 ```
 
 #### Group update
@@ -324,29 +273,21 @@ const outgoing = new Whisper.Message({
   type: 'outgoing',
   sent_at: Date.now() - 200000,
   group_update: {
-    joined: [
-      '+12025550007',
-      '+12025550008',
-      '+12025550009',
-    ],
+    joined: ['+12025550007', '+12025550008', '+12025550009'],
   },
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550003',
-  type: 'incoming',
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550003',
+    type: 'incoming',
+  })
+);
 
 const View = Whisper.MessageView;
-<util.ConversationContext theme={util.theme} >
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+<util.ConversationContext theme={util.theme}>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### End session
@@ -357,22 +298,18 @@ const outgoing = new Whisper.Message({
   sent_at: Date.now() - 200000,
   flags: textsecure.protobuf.DataMessage.Flags.END_SESSION,
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550003',
-  type: 'incoming',
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550003',
+    type: 'incoming',
+  })
+);
 
 const View = Whisper.MessageView;
-<util.ConversationContext theme={util.theme} >
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+<util.ConversationContext theme={util.theme}>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 ### With an attachment
@@ -384,27 +321,25 @@ const outgoing = new Whisper.Message({
   type: 'outgoing',
   body: 'I am pretty confused about Pi.',
   sent_at: Date.now() - 18000000,
-  attachments: [{
-    data: util.gif,
-    fileName: 'pi.gif',
-    contentType: 'image/gif',
-  }],
+  attachments: [
+    {
+      data: util.gif,
+      fileName: 'pi.gif',
+      contentType: 'image/gif',
+    },
+  ],
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550003',
-  type: 'incoming',
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550003',
+    type: 'incoming',
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### Image
@@ -413,27 +348,25 @@ const View = Whisper.MessageView;
 const outgoing = new Whisper.Message({
   type: 'outgoing',
   sent_at: Date.now() - 18000000,
-  attachments: [{
-    data: util.gif,
-    fileName: 'pi.gif',
-    contentType: 'image/gif',
-  }],
+  attachments: [
+    {
+      data: util.gif,
+      fileName: 'pi.gif',
+      contentType: 'image/gif',
+    },
+  ],
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550003',
-  type: 'incoming',
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550003',
+    type: 'incoming',
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### Image with portrait aspect ratio
@@ -442,30 +375,27 @@ const View = Whisper.MessageView;
 const outgoing = new Whisper.Message({
   type: 'outgoing',
   sent_at: Date.now() - 18000000,
-  attachments: [{
-    data: util.portraitYellow,
-    fileName: 'portraitYellow.png',
-    contentType: 'image/png',
-  }],
+  attachments: [
+    {
+      data: util.portraitYellow,
+      fileName: 'portraitYellow.png',
+      contentType: 'image/png',
+    },
+  ],
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550003',
-  type: 'incoming',
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550003',
+    type: 'incoming',
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
-
 #### Image with portrait aspect ratio and caption
 
 ```jsx
@@ -473,27 +403,25 @@ const outgoing = new Whisper.Message({
   type: 'outgoing',
   body: 'This is an odd yellow bar. Cool, huh?',
   sent_at: Date.now() - 18000000,
-  attachments: [{
-    data: util.portraitYellow,
-    fileName: 'portraitYellow.png',
-    contentType: 'image/png',
-  }],
+  attachments: [
+    {
+      data: util.portraitYellow,
+      fileName: 'portraitYellow.png',
+      contentType: 'image/png',
+    },
+  ],
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550003',
-  type: 'incoming',
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550003',
+    type: 'incoming',
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### Image with landscape aspect ratio
@@ -502,27 +430,25 @@ const View = Whisper.MessageView;
 const outgoing = new Whisper.Message({
   type: 'outgoing',
   sent_at: Date.now() - 18000000,
-  attachments: [{
-    data: util.landscapePurple,
-    fileName: 'landscapePurple.jpg',
-    contentType: 'image/jpeg',
-  }],
+  attachments: [
+    {
+      data: util.landscapePurple,
+      fileName: 'landscapePurple.jpg',
+      contentType: 'image/jpeg',
+    },
+  ],
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550003',
-  type: 'incoming',
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550003',
+    type: 'incoming',
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### Image with landscape aspect ratio and caption
@@ -532,27 +458,25 @@ const outgoing = new Whisper.Message({
   type: 'outgoing',
   body: "An interesting horizontal bar. It's art.",
   sent_at: Date.now() - 18000000,
-  attachments: [{
-    data: util.landscapePurple,
-    fileName: 'landscapePurple.jpg',
-    contentType: 'image/jpeg',
-  }],
+  attachments: [
+    {
+      data: util.landscapePurple,
+      fileName: 'landscapePurple.jpg',
+      contentType: 'image/jpeg',
+    },
+  ],
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550003',
-  type: 'incoming',
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550003',
+    type: 'incoming',
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### Video with caption
@@ -562,27 +486,25 @@ const outgoing = new Whisper.Message({
   type: 'outgoing',
   body: "Beautiful, isn't it?",
   sent_at: Date.now() - 10000,
-  attachments: [{
-    data: util.mp4,
-    fileName: 'freezing_bubble.mp4',
-    contentType: 'video/mp4',
-  }],
+  attachments: [
+    {
+      data: util.mp4,
+      fileName: 'freezing_bubble.mp4',
+      contentType: 'video/mp4',
+    },
+  ],
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550003',
-  type: 'incoming',
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550003',
+    type: 'incoming',
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### Video
@@ -591,27 +513,25 @@ const View = Whisper.MessageView;
 const outgoing = new Whisper.Message({
   type: 'outgoing',
   sent_at: Date.now() - 10000,
-  attachments: [{
-    data: util.mp4,
-    fileName: 'freezing_bubble.mp4',
-    contentType: 'video/mp4',
-  }],
+  attachments: [
+    {
+      data: util.mp4,
+      fileName: 'freezing_bubble.mp4',
+      contentType: 'video/mp4',
+    },
+  ],
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550003',
-  type: 'incoming',
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550003',
+    type: 'incoming',
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### Audio with caption
@@ -621,27 +541,25 @@ const outgoing = new Whisper.Message({
   type: 'outgoing',
   body: 'This is a nice song',
   sent_at: Date.now() - 15000,
-  attachments: [{
-    data: util.mp3,
-    fileName: 'agnus_dei.mp3',
-    contentType: 'audio/mp3',
-  }],
+  attachments: [
+    {
+      data: util.mp3,
+      fileName: 'agnus_dei.mp3',
+      contentType: 'audio/mp3',
+    },
+  ],
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550003',
-  type: 'incoming',
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550003',
+    type: 'incoming',
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### Audio
@@ -650,27 +568,25 @@ const View = Whisper.MessageView;
 const outgoing = new Whisper.Message({
   type: 'outgoing',
   sent_at: Date.now() - 15000,
-  attachments: [{
-    data: util.mp3,
-    fileName: 'agnus_dei.mp3',
-    contentType: 'audio/mp3',
-  }],
+  attachments: [
+    {
+      data: util.mp3,
+      fileName: 'agnus_dei.mp3',
+      contentType: 'audio/mp3',
+    },
+  ],
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550003',
-  type: 'incoming',
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550003',
+    type: 'incoming',
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### Voice message
@@ -679,28 +595,26 @@ const View = Whisper.MessageView;
 const outgoing = new Whisper.Message({
   type: 'outgoing',
   sent_at: Date.now() - 15000,
-  attachments: [{
-    flags: textsecure.protobuf.AttachmentPointer.Flags.VOICE_MESSAGE,
-    data: util.mp3,
-    fileName: 'agnus_dei.mp3',
-    contentType: 'audio/mp3',
-  }],
+  attachments: [
+    {
+      flags: textsecure.protobuf.AttachmentPointer.Flags.VOICE_MESSAGE,
+      data: util.mp3,
+      fileName: 'agnus_dei.mp3',
+      contentType: 'audio/mp3',
+    },
+  ],
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550003',
-  type: 'incoming',
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550003',
+    type: 'incoming',
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### Other file type with caption
@@ -710,27 +624,25 @@ const outgoing = new Whisper.Message({
   type: 'outgoing',
   body: 'My manifesto is now complete!',
   sent_at: Date.now() - 15000,
-  attachments: [{
-    data: util.txt,
-    fileName: 'lorum_ipsum.txt',
-    contentType: 'text/plain',
-  }],
+  attachments: [
+    {
+      data: util.txt,
+      fileName: 'lorum_ipsum.txt',
+      contentType: 'text/plain',
+    },
+  ],
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550003',
-  type: 'incoming',
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550003',
+    type: 'incoming',
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### Other file type
@@ -739,25 +651,23 @@ const View = Whisper.MessageView;
 const outgoing = new Whisper.Message({
   type: 'outgoing',
   sent_at: Date.now() - 15000,
-  attachments: [{
-    data: util.txt,
-    fileName: 'lorum_ipsum.txt',
-    contentType: 'text/plain',
-  }],
+  attachments: [
+    {
+      data: util.txt,
+      fileName: 'lorum_ipsum.txt',
+      contentType: 'text/plain',
+    },
+  ],
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550003',
-  type: 'incoming',
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550003',
+    type: 'incoming',
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
diff --git a/ts/components/conversation/Quote.md b/ts/components/conversation/Quote.md
index 64678f9d1..7cdf0b514 100644
--- a/ts/components/conversation/Quote.md
+++ b/ts/components/conversation/Quote.md
@@ -1,4 +1,3 @@
-
 ### With a quotation, text-only replies
 
 #### Plain text
@@ -14,24 +13,20 @@ const outgoing = new Whisper.Message({
     id: Date.now() - 1000,
   },
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550011',
-  type: 'incoming',
-  quote: Object.assign({}, outgoing.attributes.quote, {
-    author: '+12025550005',
-  }),
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550011',
+    type: 'incoming',
+    quote: Object.assign({}, outgoing.attributes.quote, {
+      author: '+12025550005',
+    }),
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### With emoji
@@ -47,24 +42,20 @@ const outgoing = new Whisper.Message({
     id: Date.now() - 1000,
   },
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550011',
-  type: 'incoming',
-  quote: Object.assign({}, outgoing.attributes.quote, {
-    author: '+12025550005',
-  }),
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550011',
+    type: 'incoming',
+    quote: Object.assign({}, outgoing.attributes.quote, {
+      author: '+12025550005',
+    }),
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### Replies to you or yourself
@@ -80,24 +71,20 @@ const outgoing = new Whisper.Message({
     id: Date.now() - 1000,
   },
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550011',
-  type: 'incoming',
-  quote: Object.assign({}, outgoing.attributes.quote, {
-    author: util.ourNumber,
-  }),
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550011',
+    type: 'incoming',
+    quote: Object.assign({}, outgoing.attributes.quote, {
+      author: util.ourNumber,
+    }),
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### In a group conversation
@@ -113,24 +100,20 @@ const outgoing = new Whisper.Message({
     id: Date.now() - 1000,
   },
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550007',
-  type: 'incoming',
-  quote: Object.assign({}, outgoing.attributes.quote, {
-    author: '+12025550002',
-  }),
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550007',
+    type: 'incoming',
+    quote: Object.assign({}, outgoing.attributes.quote, {
+      author: '+12025550002',
+    }),
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme} type="group">
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### A lot of text in quotation
@@ -150,24 +133,20 @@ const outgoing = new Whisper.Message({
     id: Date.now() - 1000,
   },
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550011',
-  type: 'incoming',
-  quote: Object.assign({}, outgoing.attributes.quote, {
-    author: '+12025550005',
-  }),
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550011',
+    type: 'incoming',
+    quote: Object.assign({}, outgoing.attributes.quote, {
+      author: '+12025550005',
+    }),
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### A lot of text in quotation, with icon
@@ -193,24 +172,20 @@ const outgoing = new Whisper.Message({
     ],
   },
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550011',
-  type: 'incoming',
-  quote: Object.assign({}, outgoing.attributes.quote, {
-    author: '+12025550005',
-  }),
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550011',
+    type: 'incoming',
+    quote: Object.assign({}, outgoing.attributes.quote, {
+      author: '+12025550005',
+    }),
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### A lot of text in quotation, with image
@@ -242,28 +217,24 @@ const outgoing = new Whisper.Message({
     ],
   },
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550011',
-  type: 'incoming',
-  quote: Object.assign({}, outgoing.attributes.quote, {
-    author: '+12025550005',
-  }),
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550011',
+    type: 'incoming',
+    quote: Object.assign({}, outgoing.attributes.quote, {
+      author: '+12025550005',
+    }),
+  })
+);
 
 outgoing.quoteThumbnail = thumbnail;
 incoming.quoteThumbnail = thumbnail;
 
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### Image with caption
@@ -292,28 +263,24 @@ const outgoing = new Whisper.Message({
     ],
   },
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550011',
-  type: 'incoming',
-  quote: Object.assign({}, outgoing.attributes.quote, {
-    author: '+12025550005',
-  }),
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550011',
+    type: 'incoming',
+    quote: Object.assign({}, outgoing.attributes.quote, {
+      author: '+12025550005',
+    }),
+  })
+);
 
 outgoing.quoteThumbnail = thumbnail;
 incoming.quoteThumbnail = thumbnail;
 
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### Image
@@ -325,7 +292,7 @@ const thumbnail = {
 
 const outgoing = new Whisper.Message({
   type: 'outgoing',
-  body: "Yeah, pi. Tough to wrap your head around.",
+  body: 'Yeah, pi. Tough to wrap your head around.',
   sent_at: Date.now() - 18000000,
   quote: {
     author: '+12025550011',
@@ -341,28 +308,24 @@ const outgoing = new Whisper.Message({
     ],
   },
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550011',
-  type: 'incoming',
-  quote: Object.assign({}, outgoing.attributes.quote, {
-    author: '+12025550005',
-  }),
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550011',
+    type: 'incoming',
+    quote: Object.assign({}, outgoing.attributes.quote, {
+      author: '+12025550005',
+    }),
+  })
+);
 
 outgoing.quoteThumbnail = thumbnail;
 incoming.quoteThumbnail = thumbnail;
 
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### Image with no thumbnail
@@ -370,7 +333,7 @@ const View = Whisper.MessageView;
 ```jsx
 const outgoing = new Whisper.Message({
   type: 'outgoing',
-  body: "Yeah, pi. Tough to wrap your head around.",
+  body: 'Yeah, pi. Tough to wrap your head around.',
   sent_at: Date.now() - 18000000,
   quote: {
     author: '+12025550011',
@@ -383,25 +346,21 @@ const outgoing = new Whisper.Message({
     ],
   },
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550011',
-  type: 'incoming',
-  quote: Object.assign({}, outgoing.attributes.quote, {
-    author: '+12025550005',
-  }),
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550011',
+    type: 'incoming',
+    quote: Object.assign({}, outgoing.attributes.quote, {
+      author: '+12025550005',
+    }),
+  })
+);
 
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### Video with caption
@@ -413,7 +372,7 @@ const thumbnail = {
 
 const outgoing = new Whisper.Message({
   type: 'outgoing',
-  body: "Sweet the way the video sneaks up on you!",
+  body: 'Sweet the way the video sneaks up on you!',
   sent_at: Date.now() - 18000000,
   quote: {
     author: '+12025550011',
@@ -430,28 +389,24 @@ const outgoing = new Whisper.Message({
     ],
   },
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550011',
-  type: 'incoming',
-  quote: Object.assign({}, outgoing.attributes.quote, {
-    author: '+12025550005',
-  }),
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550011',
+    type: 'incoming',
+    quote: Object.assign({}, outgoing.attributes.quote, {
+      author: '+12025550005',
+    }),
+  })
+);
 
 outgoing.quoteThumbnail = thumbnail;
 incoming.quoteThumbnail = thumbnail;
 
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### Video
@@ -463,7 +418,7 @@ const thumbnail = {
 
 const outgoing = new Whisper.Message({
   type: 'outgoing',
-  body: "Awesome!",
+  body: 'Awesome!',
   sent_at: Date.now() - 18000000,
   quote: {
     author: '+12025550011',
@@ -475,33 +430,29 @@ const outgoing = new Whisper.Message({
         thumbnail: {
           contentType: 'image/gif',
           data: util.gif,
-        }
+        },
       },
     ],
   },
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550011',
-  type: 'incoming',
-  quote: Object.assign({}, outgoing.attributes.quote, {
-    author: '+12025550005',
-  }),
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550011',
+    type: 'incoming',
+    quote: Object.assign({}, outgoing.attributes.quote, {
+      author: '+12025550005',
+    }),
+  })
+);
 
 outgoing.quoteThumbnail = thumbnail;
 incoming.quoteThumbnail = thumbnail;
 
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### Video with no thumbnail
@@ -509,7 +460,7 @@ const View = Whisper.MessageView;
 ```jsx
 const outgoing = new Whisper.Message({
   type: 'outgoing',
-  body: "Awesome!",
+  body: 'Awesome!',
   sent_at: Date.now() - 18000000,
   quote: {
     author: '+12025550011',
@@ -522,25 +473,21 @@ const outgoing = new Whisper.Message({
     ],
   },
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550011',
-  type: 'incoming',
-  quote: Object.assign({}, outgoing.attributes.quote, {
-    author: '+12025550005',
-  }),
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550011',
+    type: 'incoming',
+    quote: Object.assign({}, outgoing.attributes.quote, {
+      author: '+12025550005',
+    }),
+  })
+);
 
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### Audio with caption
@@ -562,24 +509,20 @@ const outgoing = new Whisper.Message({
     ],
   },
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550011',
-  type: 'incoming',
-  quote: Object.assign({}, outgoing.attributes.quote, {
-    author: '+12025550005',
-  }),
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550011',
+    type: 'incoming',
+    quote: Object.assign({}, outgoing.attributes.quote, {
+      author: '+12025550005',
+    }),
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### Audio
@@ -600,24 +543,20 @@ const outgoing = new Whisper.Message({
     ],
   },
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550011',
-  type: 'incoming',
-  quote: Object.assign({}, outgoing.attributes.quote, {
-    author: '+12025550005',
-  }),
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550011',
+    type: 'incoming',
+    quote: Object.assign({}, outgoing.attributes.quote, {
+      author: '+12025550005',
+    }),
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### Voice message
@@ -640,24 +579,20 @@ const outgoing = new Whisper.Message({
     ],
   },
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550011',
-  type: 'incoming',
-  quote: Object.assign({}, outgoing.attributes.quote, {
-    author: '+12025550005',
-  }),
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550011',
+    type: 'incoming',
+    quote: Object.assign({}, outgoing.attributes.quote, {
+      author: '+12025550005',
+    }),
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### Other file type with caption
@@ -679,24 +614,20 @@ const outgoing = new Whisper.Message({
     ],
   },
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550011',
-  type: 'incoming',
-  quote: Object.assign({}, outgoing.attributes.quote, {
-    author: '+12025550005',
-  }),
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550011',
+    type: 'incoming',
+    quote: Object.assign({}, outgoing.attributes.quote, {
+      author: '+12025550005',
+    }),
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### Other file type
@@ -717,24 +648,20 @@ const outgoing = new Whisper.Message({
     ],
   },
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550011',
-  type: 'incoming',
-  quote: Object.assign({}, outgoing.attributes.quote, {
-    author: '+12025550005',
-  }),
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550011',
+    type: 'incoming',
+    quote: Object.assign({}, outgoing.attributes.quote, {
+      author: '+12025550005',
+    }),
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 ### With a quotation, including attachment
@@ -751,30 +678,28 @@ const outgoing = new Whisper.Message({
     author: '+12025550011',
     id: Date.now() - 1000,
   },
-  attachments: [{
-    data: util.gif,
-    fileName: 'pi.gif',
-    contentType: 'image/gif',
-  }],
+  attachments: [
+    {
+      data: util.gif,
+      fileName: 'pi.gif',
+      contentType: 'image/gif',
+    },
+  ],
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550011',
-  type: 'incoming',
-  quote: Object.assign({}, outgoing.attributes.quote, {
-    author: '+12025550005',
-  }),
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550011',
+    type: 'incoming',
+    quote: Object.assign({}, outgoing.attributes.quote, {
+      author: '+12025550005',
+    }),
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### Quote, image attachment
@@ -788,30 +713,28 @@ const outgoing = new Whisper.Message({
     author: '+12025550011',
     id: Date.now() - 1000,
   },
-  attachments: [{
-    data: util.gif,
-    fileName: 'pi.gif',
-    contentType: 'image/gif',
-  }],
+  attachments: [
+    {
+      data: util.gif,
+      fileName: 'pi.gif',
+      contentType: 'image/gif',
+    },
+  ],
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550011',
-  type: 'incoming',
-  quote: Object.assign({}, outgoing.attributes.quote, {
-    author: '+12025550005',
-  }),
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550011',
+    type: 'incoming',
+    quote: Object.assign({}, outgoing.attributes.quote, {
+      author: '+12025550005',
+    }),
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### Quote, portrait image attachment
@@ -825,33 +748,30 @@ const outgoing = new Whisper.Message({
     author: '+12025550011',
     id: Date.now() - 1000,
   },
-  attachments: [{
-    data: util.portraitYellow,
-    fileName: 'pi.gif',
-    contentType: 'image/gif',
-  }],
+  attachments: [
+    {
+      data: util.portraitYellow,
+      fileName: 'pi.gif',
+      contentType: 'image/gif',
+    },
+  ],
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550011',
-  type: 'incoming',
-  quote: Object.assign({}, outgoing.attributes.quote, {
-    author: '+12025550005',
-  }),
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550011',
+    type: 'incoming',
+    quote: Object.assign({}, outgoing.attributes.quote, {
+      author: '+12025550005',
+    }),
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
-
 #### Quote, video attachment
 
 ```jsx
@@ -863,30 +783,28 @@ const outgoing = new Whisper.Message({
     author: '+12025550011',
     id: Date.now() - 1000,
   },
-  attachments: [{
-    data: util.mp4,
-    fileName: 'freezing_bubble.mp4',
-    contentType: 'video/mp4',
-  }],
+  attachments: [
+    {
+      data: util.mp4,
+      fileName: 'freezing_bubble.mp4',
+      contentType: 'video/mp4',
+    },
+  ],
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550011',
-  type: 'incoming',
-  quote: Object.assign({}, outgoing.attributes.quote, {
-    author: '+12025550005',
-  }),
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550011',
+    type: 'incoming',
+    quote: Object.assign({}, outgoing.attributes.quote, {
+      author: '+12025550005',
+    }),
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### Quote, audio attachment
@@ -900,30 +818,28 @@ const outgoing = new Whisper.Message({
     author: '+12025550011',
     id: Date.now() - 1000,
   },
-  attachments: [{
-    data: util.mp3,
-    fileName: 'agnus_dei.mp3',
-    contentType: 'audio/mp3',
-  }],
+  attachments: [
+    {
+      data: util.mp3,
+      fileName: 'agnus_dei.mp3',
+      contentType: 'audio/mp3',
+    },
+  ],
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550011',
-  type: 'incoming',
-  quote: Object.assign({}, outgoing.attributes.quote, {
-    author: '+12025550005',
-  }),
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550011',
+    type: 'incoming',
+    quote: Object.assign({}, outgoing.attributes.quote, {
+      author: '+12025550005',
+    }),
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### Quote, file attachment
@@ -937,31 +853,28 @@ const outgoing = new Whisper.Message({
     author: '+12025550011',
     id: Date.now() - 1000,
   },
-  attachments: [{
-    data: util.txt,
-    fileName: 'lorum_ipsum.txt',
-    contentType: 'text/plain',
-  }],
+  attachments: [
+    {
+      data: util.txt,
+      fileName: 'lorum_ipsum.txt',
+      contentType: 'text/plain',
+    },
+  ],
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550011',
-  type: 'incoming',
-  quote: Object.assign({}, outgoing.attributes.quote, {
-    author: '+12025550005',
-  }),
-
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550011',
+    type: 'incoming',
+    quote: Object.assign({}, outgoing.attributes.quote, {
+      author: '+12025550005',
+    }),
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 #### Quote, but no message
@@ -976,24 +889,20 @@ const outgoing = new Whisper.Message({
     id: Date.now() - 1000,
   },
 });
-const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
-  source: '+12025550011',
-  type: 'incoming',
-  quote: Object.assign({}, outgoing.attributes.quote, {
-    author: '+12025550005',
-  }),
-}));
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550011',
+    type: 'incoming',
+    quote: Object.assign({}, outgoing.attributes.quote, {
+      author: '+12025550005',
+    }),
+  })
+);
 const View = Whisper.MessageView;
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: incoming }}
-  />
-  <util.BackboneWrapper
-    View={View}
-    options={{ model: outgoing }}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
 ```
 
 ### In bottom bar
@@ -1027,10 +936,12 @@ const View = Whisper.MessageView;
       authorProfileName="Mr. Blue"
       id={Date.now() - 1000}
       i18n={window.i18n}
-      attachments={[{
-        contentType: 'image/jpeg',
-        fileName: 'llama.jpg',
-      }]}
+      attachments={[
+        {
+          contentType: 'image/jpeg',
+          fileName: 'llama.jpg',
+        },
+      ]}
     />
   </div>
 </div>
@@ -1048,13 +959,15 @@ const View = Whisper.MessageView;
       authorProfileName="Mr. Blue"
       id={Date.now() - 1000}
       i18n={window.i18n}
-      attachments={[{
-        contentType: 'image/gif',
-        fileName: 'llama.gif',
-        thumbnail: {
-          objectUrl: util.gifObjectUrl
+      attachments={[
+        {
+          contentType: 'image/gif',
+          fileName: 'llama.gif',
+          thumbnail: {
+            objectUrl: util.gifObjectUrl,
+          },
         },
-      }]}
+      ]}
     />
   </div>
 </div>
@@ -1091,10 +1004,12 @@ const View = Whisper.MessageView;
       id={Date.now() - 1000}
       onClose={() => console.log('Close was clicked!')}
       i18n={window.i18n}
-      attachments={[{
-        contentType: 'image/jpeg',
-        fileName: 'llama.jpg',
-      }]}
+      attachments={[
+        {
+          contentType: 'image/jpeg',
+          fileName: 'llama.jpg',
+        },
+      ]}
     />
   </div>
 </div>
@@ -1113,13 +1028,15 @@ const View = Whisper.MessageView;
       id={Date.now() - 1000}
       onClose={() => console.log('Close was clicked!')}
       i18n={window.i18n}
-      attachments={[{
-        contentType: 'image/gif',
-        fileName: 'llama.gif',
-        thumbnail: {
-          objectUrl: util.gifObjectUrl
+      attachments={[
+        {
+          contentType: 'image/gif',
+          fileName: 'llama.gif',
+          thumbnail: {
+            objectUrl: util.gifObjectUrl,
+          },
         },
-      }]}
+      ]}
     />
   </div>
 </div>
diff --git a/ts/components/conversation/media-gallery/EmptyState.md b/ts/components/conversation/media-gallery/EmptyState.md
index e6382357d..fb6b0ae56 100644
--- a/ts/components/conversation/media-gallery/EmptyState.md
+++ b/ts/components/conversation/media-gallery/EmptyState.md
@@ -1,11 +1,11 @@
 ```js
-<div style={{ position: "relative", width: "100%", height: 300 }}>
-    <EmptyState label="You have no attachments with media" />
+<div style={{ position: 'relative', width: '100%', height: 300 }}>
+  <EmptyState label="You have no attachments with media" />
 </div>
 ```
 
 ```js
-<div style={{ position: "relative", width: "100%", height: 500 }}>
-    <EmptyState label="You have no documents with media" />
+<div style={{ position: 'relative', width: '100%', height: 500 }}>
+  <EmptyState label="You have no documents with media" />
 </div>
 ```
diff --git a/ts/components/conversation/media-gallery/MediaGallery.md b/ts/components/conversation/media-gallery/MediaGallery.md
index 729117144..ee65d6cda 100644
--- a/ts/components/conversation/media-gallery/MediaGallery.md
+++ b/ts/components/conversation/media-gallery/MediaGallery.md
@@ -18,27 +18,32 @@ const MONTH_MS = 30 * DAY_MS;
 const YEAR_MS = 12 * MONTH_MS;
 const tokens = ['foo', 'bar', 'baz', 'qux', 'quux'];
 const fileExtensions = ['docx', 'pdf', 'txt', 'mp3', 'wmv', 'tiff'];
-const createRandomMessage = ({startTime, timeWindow} = {}) => (props) => {
+const createRandomMessage = ({ startTime, timeWindow } = {}) => props => {
   const now = Date.now();
-  const fileName =
-    `${_.sample(tokens)}${_.sample(tokens)}.${_.sample(fileExtensions)}`;
+  const fileName = `${_.sample(tokens)}${_.sample(tokens)}.${_.sample(
+    fileExtensions
+  )}`;
   return {
     id: _.random(now).toString(),
     received_at: _.random(startTime, startTime + timeWindow),
-    attachments: [{
-      data: null,
-      fileName,
-      size: _.random(1000, 1000 * 1000 * 50),
-    }],
+    attachments: [
+      {
+        data: null,
+        fileName,
+        size: _.random(1000, 1000 * 1000 * 50),
+      },
+    ],
 
-    objectURL: `https://placekitten.com/${_.random(50, 150)}/${_.random(50, 150)}`,
+    objectURL: `https://placekitten.com/${_.random(50, 150)}/${_.random(
+      50,
+      150
+    )}`,
     ...props,
   };
 };
 
-const createRandomMessages = ({startTime, timeWindow}) =>
-  _.range(_.random(5, 10)).map(createRandomMessage({startTime, timeWindow}));
-
+const createRandomMessages = ({ startTime, timeWindow }) =>
+  _.range(_.random(5, 10)).map(createRandomMessage({ startTime, timeWindow }));
 
 const startTime = Date.now();
 const messages = _.sortBy(
@@ -67,9 +72,5 @@ const messages = _.sortBy(
   message => -message.received_at
 );
 
-<MediaGallery
-  i18n={window.i18n}
-  media={messages}
-  documents={messages}
-/>
+<MediaGallery i18n={window.i18n} media={messages} documents={messages} />;
 ```
diff --git a/ts/components/utility/BackboneWrapper.md b/ts/components/utility/BackboneWrapper.md
index 7f6c3b56e..63ddd8ae6 100644
--- a/ts/components/utility/BackboneWrapper.md
+++ b/ts/components/utility/BackboneWrapper.md
@@ -6,15 +6,12 @@ const model = new Whisper.Message({
   type: 'outgoing',
   body: 'text',
   sent_at: Date.now() - 5000,
-})
+});
 const View = Whisper.MessageView;
 const options = {
   model,
 };
 <util.ConversationContext theme={util.theme}>
-  <util.BackboneWrapper
-    View={View}
-    options={options}
-  />
-</util.ConversationContext>
+  <util.BackboneWrapper View={View} options={options} />
+</util.ConversationContext>;
 ```
diff --git a/ts/styleguide/ConversationContext.md b/ts/styleguide/ConversationContext.md
index 6a314e44e..c83b35951 100644
--- a/ts/styleguide/ConversationContext.md
+++ b/ts/styleguide/ConversationContext.md
@@ -1,4 +1,3 @@
-
 The simplest example of using the `<ConversationContext />` component:
 
 ```jsx