Add the ability to display / edit the description from the item sheet

module/handlebarHelpers/inputs/formFields.mjs

@@ -3,6 +3,7 @@ import { booleanInput } from "./booleanInput.mjs";
 import { dropdownInput } from "./dropdownInput.mjs";
 import { groupInput } from "./groupInput.mjs";
 import { numberInput } from "./numberInput.mjs";
+import { prosemirrorInput } from "./prosemirrorInput.mjs";
 import { stringSet } from "./stringSet.mjs";
 import { textInput } from "./textInput.mjs";
 
@@ -10,6 +11,7 @@ const { getType } = foundry.utils;
 
 const inputTypes = {
 	"string-set": stringSet,
+	prosemirror: prosemirrorInput,
 	integer: numberInput,
 	bar: barInput,
 	dropdown: dropdownInput,
@@ -29,7 +31,10 @@ export function formFields(inputs, opts) {
 			input.limited ??= true;
 		};
 
-		if (typesToSanitize.has(getType(input.value))) {
+		if (
+			input.type !== `prosemirror`
+			&& typesToSanitize.has(getType(input.value))
+		) {
 			input.value = Handlebars.escapeExpression(input.value);
 		};
 		fields.push(inputTypes[input.type](input, opts.data.root));

module/handlebarHelpers/inputs/prosemirrorInput.mjs

@@ -0,0 +1,43 @@
+import { localizer } from "../../utils/Localizer.mjs";
+
+export function prosemirrorInput(input, data) {
+	const label = localizer(input.label);
+
+	if (!data.meta.editable) {
+		return `<div data-input-type="prose-mirror">
+			<div class="label-row">
+				<div class="label">
+					${label}
+				</div>
+			</div>
+			<div class="value">
+				${input.value}
+			</div>
+		</div>`;
+	};
+
+	return `<div data-input-type="prose-mirror">
+		<div class="label-row">
+			<div class="label">
+				${label}
+			</div>
+			<button
+				type="button"
+				data-action="openRichEditor"
+				data-uuid="${input.uuid}"
+				data-path="${input.path}"
+				data-compact="${input.compact}"
+				data-collaborative="${input.collaborative}"
+			>
+				${localizer(`RipCrypt.common.edit`)}
+			</button>
+		</div>
+
+		<!--
+		This cannot be spread across multiple lines because of the :empty selector
+		considering whitespace as "not being empty". Though browsers will eventually
+		treat :empty as "empty, or only whitespace".
+		-->
+		<div class="value">${input.value}</div>
+	</div>`;
+};