Added markdown support to features

app/imports/ui/character/FeaturesTab.vue

@@ -27,7 +27,7 @@
 	import { insertFeature } from '/imports/api/creature/properties/Features.js';
 	import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
 	import FeatureCard from '/imports/ui/components/features/FeatureCard.vue';
-	import { evaluateComputation, evaluateString } from '/imports/ui/utility/evaluate.js';
+	import { evaluateComputation, evaluateStringWithVariables } from '/imports/ui/utility/evaluate.js';
 
 	export default {
 		props: {
@@ -47,7 +47,7 @@
 				}, {
 					sort: {order: 1},
 				}).map(f => {
-					f.description = evaluateString(f.description, vars);
+					f.description = evaluateStringWithVariables(f.description, vars);
 					return f;
 				});
 			},

app/imports/ui/components/MarkdownText.vue

@@ -0,0 +1,20 @@
+<template lang="html">
+  <div v-html="compiledMarkdown">
+	</div>
+</template>
+
+<script>
+	import marked from 'marked';
+
+	export default {
+		props: {
+			markdown: String,
+		},
+		computed: {
+	    compiledMarkdown() {
+				if (!this.markdown) return;
+				return marked(this.markdown, { sanitize: true });
+	    },
+	  },
+	}
+</script>

app/imports/ui/components/features/FeatureCard.vue

@@ -13,13 +13,14 @@
 				@click.stop="$emit('update', {_id, update: {enabled: !enabled}})"
 			/>
 		</template>
-		<v-card-text>
-			{{description}}
+		<v-card-text v-if="description">
+			<markdown-text :markdown="description"/>
 		</v-card-text>
   </toolbar-card>
 </template>
 
 <script>
+	import MarkdownText from '/imports/ui/components/MarkdownText.vue';
 	import ToolbarCard from '/imports/ui/components/ToolbarCard.vue';
 
 	export default {
@@ -33,9 +34,9 @@
 			alwaysEnabled: Boolean,
 		},
 		components: {
+			MarkdownText,
 			ToolbarCard,
 		},
-
 	};
 </script>
 

app/imports/ui/components/features/FeatureDialog.vue

@@ -1,25 +1,27 @@
 <template lang="html">
 	<property-dialog :doc="feature" collection="features" @remove="$emit('remove')">
 		<div>
-			{{feature.description}}
+			<markdown-text :markdown="feature.computedDescription || feature.description"/>
 			<!--
 			<child-lists
 				:parent="feature"
 			/>
 			-->
 		</div>
-		<feature-foremovet="form" :feature="feature" @update="(update, ack) => $emit('update', update, ack)"/>
+		<feature-form slot="form" :feature="feature" @update="(update, ack) => $emit('update', update, ack)"/>
 	</property-dialog>
 </template>
 
 <script>
 	import PropertyDialog from '/imports/ui/components/properties/PropertyDialog.vue';
 	import FeatureForm from '/imports/ui/components/features/FeatureForm.vue';
+	import MarkdownText from '/imports/ui/components/MarkdownText.vue';
 
 	export default {
 		components: {
 			PropertyDialog,
 			FeatureForm,
+			MarkdownText,
 		},
 		props: {
 			feature: Object,

app/imports/ui/components/features/FeatureDialogContainer.vue

@@ -9,6 +9,7 @@
 <script>
 	import Features, {updateFeature} from '/imports/api/creature/properties/Features.js';
 	import FeatureDialog from '/imports/ui/components/features/FeatureDialog.vue';
+	import {evaluateStringForCharId} from '/imports/ui/utility/evaluate.js';
 
 	export default {
 		components: {
@@ -19,7 +20,11 @@
 		},
 		meteor: {
 			feature(){
-				return Features.findOne(this._id);
+				let feature = Features.findOne(this._id);
+				feature.computedDescription = evaluateStringForCharId(
+					feature.description, feature.charId
+				);
+				return feature;
 			},
 		},
 		methods: {

app/imports/ui/components/properties/PropertyDialog.vue

@@ -12,7 +12,6 @@
 </template>
 
 <script>
-	import propertyUpdateMethods from '/imports/api/creature/properties/propertyUpdateMethods.js';
 	import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 	export default {
 		components: {

app/imports/ui/utility/evaluate.js

@@ -1,6 +1,8 @@
+import Creatures from '/imports/api/creature/Creatures.js';
+
 // Computations resolve to numbers
 // vars is a dict of variables to substitute
-function evaluateComputation(string, vars){
+export function evaluateComputation(string, vars){
   if (!string) return string;
   // Replace all the string variables with numbers if possible
   let substitutedString = string.replace(
@@ -14,11 +16,11 @@ function evaluateComputation(string, vars){
   } catch (e){
     return substitutedString;
   }
-};
+}
 
 // Strings can have computations in bracers like so: {computation}
 // vars is a dict of variables to substitute
-function evaluateString(string, vars){
+export function evaluateStringWithVariables(string, vars){
 	if (!string) return string;
   // Compute everything inside bracers
 	return string.replace(/\{([^\{\}]*)\}/g, function(match, p1){
@@ -26,4 +28,8 @@ function evaluateString(string, vars){
 	});
 }
 
-export { evaluateComputation, evaluateString };
+export function evaluateStringForCharId(string, charId){
+  let char = Creatures.findOne(charId, {fields: {variables: 1}});
+  let vars = char ? char.variables : {};
+  return evaluateStringWithVariables(string, vars);
+}

app/package-lock.json

@@ -830,6 +830,11 @@
         "p-defer": "^1.0.0"
       }
     },
+    "marked": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-0.6.1.tgz",
+      "integrity": "sha512-+H0L3ibcWhAZE02SKMqmvYsErLo4EAVJxu5h3bHBBDvvjeWXtl92rGUSBYHL2++5Y+RSNgl8dYOAXcYe7lp1fA=="
+    },
     "mathjs": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/mathjs/-/mathjs-5.5.0.tgz",

app/package.json

@@ -20,6 +20,7 @@
     "css-box-shadow": "^1.0.0-3",
     "fibers": "^2.0.2",
     "lodash": "^4.17.11",
+    "marked": "^0.6.1",
     "mathjs": "^5.5.0",
     "meteor-node-stubs": "^0.3.3",
     "moo": "^0.5.0",