diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue index 800435c2..faad495e 100644 --- a/client/src/components/ContentBlock.vue +++ b/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() { diff --git a/client/src/components/content-blocks/ContentListBlock.vue b/client/src/components/content-blocks/ContentListBlock.vue index b33867e4..7da2144f 100644 --- a/client/src/components/content-blocks/ContentListBlock.vue +++ b/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 }) }); }