fixup! add examples for NcRichContenteditable.vue output

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
nextcloud-libraries · Aug 30, 2023 · b938b03 · b938b03
1 parent 441f6b2
commit b938b03
Showing 1 changed file with 11 additions and 4 deletions.
diff --git a/src/components/NcRichContenteditable/NcRichContenteditable.vue b/src/components/NcRichContenteditable/NcRichContenteditable.vue
@@ -48,11 +48,13 @@ This component displays contenteditable div with automated `@` [at] autocompleti
 			placeholder="Try mentioning user @Test01 or inserting emoji :smile"
 			@submit="onSubmit" />
 
-		<h5>Output - default</h5>
-		{{ message }}
+    <h5>Output - raw</h5>
+    {{ JSON.stringify(message) }}
 
-		<h5>Output - in JSON.stringify()</h5>
-		{{ JSON.stringify(message) }}
+    <h5>Output - preformatted</h5>
+    <p class="pre-line">
+      {{ message }}
+    </p>
 
 		<h5>Output - in NcRichText with markdown support</h5>
 		<NcRichText :text="message" use-markdown />
@@ -157,6 +159,11 @@ export default {
 		font-weight: bold;
 		margin: 40px 0 20px 0;
 	}
+
+	.pre-line {
+    margin: -20px 0;
+		white-space: pre-line;
+	}
 </style>
 ```