Add a RichEditor to make HTMLFields livable

templates/Apps/RichEditor/content.hbs

@@ -0,0 +1,16 @@
+<div>
+	{{#if editable}}
+		<prose-mirror
+			name="{{ path }}"
+			value="{{ raw }}"
+			{{ifThen compact "compact" ""}}
+			{{#if collaborative}}
+				data-document-uuid="{{ uuid }}"
+			{{/if}}
+		>
+			{{{ enriched }}}
+		</prose-mirror>
+	{{else}}
+		{{{ enriched }}}
+	{{/if}}
+</div>

templates/Apps/RichEditor/style.css

@@ -0,0 +1,19 @@
+.ripcrypt--RichEditor {
+	width: 500px;
+	height: 600px;
+
+	> .window-content {
+		padding: 4px;
+		background: var(--base-background);
+		height: 100%;
+	}
+
+	prose-mirror {
+		height: 100%;
+
+		.editor-content {
+			color: var(--input-text);
+			background: var(--input-background);
+		}
+	}
+}

templates/Apps/apps.css

@@ -4,3 +4,4 @@
 @import url("./DicePool/style.css");
 @import url("./HeroSummaryCardV1/style.css");
 @import url("./HeroSkillsCardV1/style.css");
+@import url("./RichEditor/style.css");

templates/css/common.css

@@ -1,9 +1,12 @@
+@layer exceptions;
+
 @import url("./vars.css");
 
 @import url("./elements/button.css");
 @import url("./elements/input.css");
 @import url("./elements/lists.css");
 @import url("./elements/pill-bar.css");
+@import url("./elements/prose-mirror.css") layer(exceptions);
 @import url("./elements/select.css");
 @import url("./elements/span.css");
 @import url("./elements/string-tags.css");

templates/css/elements/prose-mirror.css

@@ -0,0 +1,3 @@
+.ripcrypt prose-mirror * {
+	all: revert-layer !important;
+}