Merge branch 'feature/rich-text' into 'develop'

initial rich text authoring support

See merge request pleroma/pleroma-fe!325

src/App.scss

@@ -451,6 +451,10 @@ nav {
     color: $fallback--lightFg;
     color: var(--lightFg, $fallback--lightFg);
   }
+
+  .text-format {
+    float: right;
+  }
 }
 
 .visibility-notice {

src/components/post_status_form/post_status_form.js

@@ -55,6 +55,7 @@ const PostStatusForm = {
       newStatus: {
         spoilerText: this.subject,
         status: statusText,
+        contentType: 'text/plain',
         nsfw: false,
         files: [],
         visibility: this.messageScope || this.$store.state.users.currentUser.default_scope
@@ -210,13 +211,15 @@ const PostStatusForm = {
         sensitive: newStatus.nsfw,
         media: newStatus.files,
         store: this.$store,
-        inReplyToStatusId: this.replyTo
+        inReplyToStatusId: this.replyTo,
+        contentType: newStatus.contentType
       }).then((data) => {
         if (!data.error) {
           this.newStatus = {
             status: '',
             files: [],
-            visibility: newStatus.visibility
+            visibility: newStatus.visibility,
+            contentType: newStatus.contentType
           }
           this.$emit('posted')
           let el = this.$el.querySelector('textarea')

src/components/post_status_form/post_status_form.vue

@@ -32,13 +32,23 @@
         @input="resize"
         @paste="paste">
       </textarea>
-      <div v-if="scopeOptionsEnabled" class="visibility-tray">
+      <div class="visibility-tray">
+        <span class="text-format">
+          <select v-model="newStatus.contentType" class="form-control">
+            <option value="text/plain">{{$t('post_status.content_type.plain_text')}}</option>
+            <option value="text/html">HTML</option>
+            <option value="text/markdown">Markdown</option>
+          </select>
+        </span>
+
+        <div v-if="scopeOptionsEnabled">
           <i v-on:click="changeVis('direct')" class="icon-mail-alt" :class="vis.direct" :title="$t('post_status.scope.direct')"></i>
           <i v-on:click="changeVis('private')" class="icon-lock" :class="vis.private" :title="$t('post_status.scope.private')"></i>
           <i v-on:click="changeVis('unlisted')" class="icon-lock-open-alt" :class="vis.unlisted" :title="$t('post_status.scope.unlisted')"></i>
           <i v-on:click="changeVis('public')" class="icon-globe" :class="vis.public" :title="$t('post_status.scope.public')"></i>
         </div>
       </div>
+    </div>
     <div style="position:relative;" v-if="candidates">
         <div class="autocomplete-panel">
           <div v-for="candidate in candidates" @click="replace(candidate.utf || (candidate.screen_name + ' '))">

src/i18n/messages.js

@@ -392,6 +392,9 @@ const en = {
       unlisted: 'Unlisted - Do not post to public timelines',
       private: 'Followers-only - Post to followers only',
       direct: 'Direct - Post to mentioned users only'
+    },
+    content_type: {
+      plain_text: 'Plain text'
     }
   },
   finder: {

src/services/api/api.service.js

@@ -373,7 +373,7 @@ const unretweet = ({ id, credentials }) => {
   })
 }
 
-const postStatus = ({credentials, status, spoilerText, visibility, sensitive, mediaIds, inReplyToStatusId}) => {
+const postStatus = ({credentials, status, spoilerText, visibility, sensitive, mediaIds, inReplyToStatusId, contentType}) => {
   const idsText = mediaIds.join(',')
   const form = new FormData()
 
@@ -382,6 +382,7 @@ const postStatus = ({credentials, status, spoilerText, visibility, sensitive, me
   if (spoilerText) form.append('spoiler_text', spoilerText)
   if (visibility) form.append('visibility', visibility)
   if (sensitive) form.append('sensitive', sensitive)
+  if (contentType) form.append('content_type', contentType)
   form.append('media_ids', idsText)
   if (inReplyToStatusId) {
     form.append('in_reply_to_status_id', inReplyToStatusId)

src/services/status_poster/status_poster.service.js

@@ -1,10 +1,10 @@
 import { map } from 'lodash'
 import apiService from '../api/api.service.js'
 
-const postStatus = ({ store, status, spoilerText, visibility, sensitive, media = [], inReplyToStatusId = undefined }) => {
+const postStatus = ({ store, status, spoilerText, visibility, sensitive, media = [], inReplyToStatusId = undefined, contentType = 'text/plain' }) => {
   const mediaIds = map(media, 'id')
 
-  return apiService.postStatus({credentials: store.state.users.currentUser.credentials, status, spoilerText, visibility, sensitive, mediaIds, inReplyToStatusId})
+  return apiService.postStatus({credentials: store.state.users.currentUser.credentials, status, spoilerText, visibility, sensitive, mediaIds, inReplyToStatusId, contentType})
     .then((data) => data.json())
     .then((data) => {
       if (!data.error) {