created ability to make content warnings on messages which also saves draft state

Author: marylychee

lib/depject/message/html/compose.js

@@ -1,6 +1,5 @@
 const h = require('mutant/h')
 const when = require('mutant/when')
-const send = require('mutant/send')
 const resolve = require('mutant/resolve')
 const Value = require('mutant/value')
 const computed = require('mutant/computed')
@@ -46,14 +45,17 @@ exports.create = function (api) {
       'ev-dragover': onDragOver,
       'ev-drop': onDrop,
       'ev-input': function () {
-        hasContent.set(!!textArea.value)
+        refreshHasContent()
         queueSave()
       },
       'ev-blur': () => {
         clearTimeout(blurTimeout)
         blurTimeout = setTimeout(() => focused.set(false), 200)
       },
-      'ev-focus': send(focused.set, true),
+      'ev-focus': () => {
+        clearTimeout(blurTimeout)
+        focused.set(true)
+      },
       'ev-paste': ev => {
         const files = ev.clipboardData && ev.clipboardData.files
         if (!files || !files.length) return
@@ -69,12 +71,32 @@ exports.create = function (api) {
       placeholder
     })
 
+    const contentWarningInput = h('input.contentWarning', {
+      placeholder: 'content warning (optional)',
+      'ev-input': function () {
+        refreshHasContent()
+        queueSave()
+      },
+      'ev-blur': () => {
+        clearTimeout(blurTimeout)
+        blurTimeout = setTimeout(() => focused.set(false), 200)
+      },
+      'ev-focus': () => {
+        clearTimeout(blurTimeout)
+        focused.set(true)
+      }
+    })
+
     if (draftKey) {
       const draft = window.localStorage[`patchwork.drafts.${draftKey}`]
       if (draft) {
         textArea.value = draft
-        hasContent.set(!!textArea.value)
       }
+      const draftCW = window.localStorage[`patchwork.drafts.contentWarning.${draftKey}`]
+      if (draftCW) {
+        contentWarningInput.value = draftCW
+      }
+      refreshHasContent()
     }
 
     const warningMessage = Value(null)
@@ -113,6 +135,7 @@ exports.create = function (api) {
 
     const actions = h('section.actions', [
       fileInput,
+      contentWarningInput,
       h('div', [
         when(hasContent, clearButton),
         publishBtn
@@ -136,7 +159,7 @@ exports.create = function (api) {
 
     composer.setText = function (value) {
       textArea.value = value
-      hasContent.set(!!textArea.value)
+      refreshHasContent()
     }
 
     return composer
@@ -148,10 +171,15 @@ exports.create = function (api) {
         return
       }
       textArea.value = ''
-      hasContent.set(!!textArea.value)
+      contentWarningInput.value = ''
+      refreshHasContent()
       save()
     }
 
+    function refreshHasContent () {
+      hasContent.set(!!textArea.value || !!contentWarningInput.value)
+    }
+
     function queueSave () {
       saveTimer = setTimeout(save, 1000)
     }
@@ -164,6 +192,11 @@ exports.create = function (api) {
         } else {
           window.localStorage[`patchwork.drafts.${draftKey}`] = textArea.value
         }
+        if (!contentWarningInput.value) {
+          delete window.localStorage[`patchwork.drafts.contentWarning.${draftKey}`]
+        } else {
+          window.localStorage[`patchwork.drafts.contentWarning.${draftKey}`] = contentWarningInput.value
+        }
       }
     }
 
@@ -245,6 +278,10 @@ exports.create = function (api) {
         })
       })
 
+      if (contentWarningInput.value) {
+        content.contentWarning = contentWarningInput.value
+      }
+
       try {
         if (typeof prepublish === 'function') {
           content = prepublish(content)
@@ -271,7 +308,8 @@ exports.create = function (api) {
         } else {
           if (msg) {
             textArea.value = ''
-            hasContent.set(!!textArea.value)
+            contentWarningInput.value = ''
+            refreshHasContent()
             save()
           }
           if (cb) cb(null, msg)

styles/base/compose.mcss

@@ -60,7 +60,16 @@ Compose {
         box-shadow: none
       }
     }
-
+    input.contentWarning {
+      flex: 1;
+      font-size: 120%
+      padding: 3px 6px;
+      border: 2px solid #ddd;
+      padding-top: .3rem;
+      margin-left: 5px;
+      margin-right: 5px;
+      min-width: 0;
+    }
     (button) {
       -clear {
         margin-right: 5px