Add support of multi-columns descriptions

Signed-off-by: Konstantin Myakshin <[email protected]>

package.json

@@ -43,6 +43,7 @@
     "crypto-js": "^4.2.0",
     "debounce": "^2.1.0",
     "markdown-it": "^14.1.0",
+    "markdown-it-container": "^4.0.0",
     "p-debounce": "^4.0.0",
     "p-queue": "^8.0.1",
     "v-click-outside": "^3.2.0",

src/mixins/ViewsMixin.js

@@ -25,6 +25,7 @@ import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 import axios from '@nextcloud/axios'
 import MarkdownIt from 'markdown-it'
+import MarkdownItContainer from 'markdown-it-container'
 
 import CancelableRequest from '../utils/CancelableRequest.js'
 import OcsResponse2Data from '../utils/OcsResponse2Data.js'
@@ -65,7 +66,12 @@ export default {
 			cancelFetchFullForm: () => {},
 
 			// markdown renderer for descriptions
-			markdownit: new MarkdownIt({ breaks: true }),
+			markdownit: new MarkdownIt({ breaks: true })
+				.use(MarkdownItContainer, 'columns', {})
+				.use(MarkdownItContainer, 'column-single', {})
+				.use(MarkdownItContainer, 'column-double', {})
+				.use(MarkdownItContainer, 'column-triple', {})
+				.use(MarkdownItContainer, 'column-quad', {}),
 		}
 	},
 

src/scssmixins/markdownOutput.scss

@@ -84,5 +84,49 @@
 				list-style-type: square;
 			}
 		}
+
+		.columns {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			column-gap: 2em;
+
+			img {
+				max-width: 100%;
+				height: auto;
+			}
+
+			.column-single {
+				flex: 1 1;
+				overflow: hidden;
+			}
+
+			.column-double {
+				flex: 2 1;
+				overflow: hidden;
+			}
+
+			.column-triple {
+				flex: 3 1;
+				overflow: hidden;
+			}
+
+			.column-quad {
+				flex: 4 1;
+				overflow: hidden;
+			}
+
+			@media (max-width: 512px) {
+				flex-direction: column;
+				column-gap: 0;
+
+				.column-single,
+				.column-double,
+				.column-triple,
+				.column-quad {
+					flex: 1 1 100%;
+				}
+			}
+		}
 	}
 }