Improve test page

src/client/app/common/views/components/ui/textarea.vue

@@ -145,6 +145,9 @@ root(fill)
 		font-size 13px
 		opacity 0.7
 
+		&:empty
+			display none
+
 		*
 			margin 0
 

src/client/app/test/views/index.vue

@@ -6,9 +6,14 @@
 			<ui-textarea v-model="mfm">
 				<span>MFM</span>
 			</ui-textarea>
-			<div>
+		</section>
+		<section>
+			<header>Preview</header>
 			<misskey-flavored-markdown :text="mfm" :i="$store.state.i"/>
-			</div>
+		</section>
+		<section>
+			<header style="margin-bottom:0;">AST</header>
+			<ui-textarea v-model="mfmAst" readonly tall style="margin-top:16px;"></ui-textarea>
 		</section>
 	</ui-card>
 
@@ -16,8 +21,9 @@
 		<div slot="title">Dialog Generator</div>
 		<section class="fit-top">
 			<ui-select v-model="dialogType" placeholder="">
-				<option value="info">Info</option>
+				<option value="info">Information</option>
 				<option value="success">Success</option>
+				<option value="warning">Warning</option>
 				<option value="error">Error</option>
 			</ui-select>
 			<ui-input v-model="dialogTitle">
@@ -35,6 +41,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import parse from '../../../../mfm/parse';
+import * as JSON5 from 'json5';
 
 export default Vue.extend({
 	data() {
@@ -47,6 +55,12 @@ export default Vue.extend({
 		};
 	},
 
+	computed: {
+		mfmAst(): any {
+			return JSON5.stringify(parse(this.mfm), null, 2);
+		}
+	},
+
 	methods: {
 		showDialog() {
 			this.$root.alert({