Treat single content items as blocks

client/src/components/ContentBlock.vue

@@ -102,32 +102,43 @@
         return this.contentBlock.mine && !this.contentBlock.indent;
       },
       contentBlocksWithContentLists() {
-        /* collects all conent_list_items in content_lists
+        /*
+        collects all conent_list_items in content_lists:
         {
           text_block,
-          content_list_item,
-          contentlist_item,
+          content_list_item: [contents...],
+          contentlist_item: [contents...],
           text_block
         } becomes
         {
           text_block,
-          content_list: [content_list_item, content_list_item],
+          content_list: [content_list_item: [contents...], content_list_item: [contents...]],
           text_block
         }
+        if there's only a single content_list_item it should not be displayed as list like so
+        {
+          text_block,
+          content_list_item: [text_block, image_block],
+        } becomes
+        {
+          text_block,
+          text_block,
+          image_block
+        }
         */
         let contentList = [];
         let newContent = this.contentBlock.contents.reduce((newContents, content, index) => {
           // collect content_list_items
           if (content.type === 'content_list_item') {
             contentList = [...contentList, content]
-            if (index === this.contentBlock.contents.length - 1) {
-              return [...newContents, this.createContentList(contentList)];
+            if (index === this.contentBlock.contents.length - 1) { // content is last element of contents array
+              return [...newContents, ...this.createContentListOrBlocks(contentList)];
             }
             return newContents
           } else {
             // handle all other items and reset current content_list if necessary
             if (contentList.length !== 0) {
-              newContents = [...newContents, this.createContentList(contentList), content];
+              newContents = [...newContents, ...this.createContentListOrBlocks(contentList), content];
               contentList = [];
               return newContents;
             } else {
@@ -135,6 +146,7 @@
             }
           }
         }, [])
+
         return Object.assign({}, this.contentBlock, {
           contents: newContent
         });
@@ -171,12 +183,17 @@
           }
         });
       },
-      createContentList(contentList) {
-        return {
+      createContentListOrBlocks(contentList) {
+        // if list contains only one item, return blocks
+        if (contentList.length === 1) {
+          return contentList[0].value;
+        }
+
+        return [{
           type: 'content_list',
           contents: contentList,
           id: contentList[0].id
-        };
+        }];
       },
     },
     data() {

client/src/components/content-blocks/ContentListBlock.vue

@@ -25,11 +25,10 @@
 
     computed: {
       contentBlocks() {
-        const indent = this.contents.length > 1;
         return this.contents.map(contentBlock => {
           return Object.assign({}, contentBlock, {
             contents: [...contentBlock.value],
-            indent
+            indent: true
           })
         });
       }