chat-enhance: Added Markdown editing for chat

Resolves #212

df-chat-enhance/CHANGELOG.md

@@ -1,5 +1,11 @@
 # DF Chat Enhancements
 
+## Release 3.5.0 (2021-11-15)
+- **NEW:** MarkDown features in the Chat Message box.
+- **NEW:** MarkDown features in the Edit Chat Message.
+- **FIX:** Chat Edit feature was failing after the first edit if "No HTML" option was on.
+- **UPDATE:** Changed the "Edit Last Message" feature shortcut from `Shift+Up` to `Ctrl+Up`.
+
 ## Release 3.4.1 (2021-11-09)
 - **FIX #203:** Custom Chat Colour crash due to unset flag.
 

df-chat-enhance/README.md

@@ -38,6 +38,7 @@ Multiple improvements to the chat system feature set. Brings a new Chat Archive
 	- [Hover Shadow](#Hover-Shadow)
 	- [Roll Merging](#Roll-Merging)
 - [Whisper Recipient List Truncation](#Whisper-Recipient-List-Truncation)
+- [Third-Party Libraries](#Third-Party-Libraries)
 
 **[![become a patron](../.assets/patreon-image.png)](https://www.patreon.com/bePatron?u=46113583) If you want to support me or just help me buy doggy treats! Also, you can keep up to date on what I'm working on. I will be announcing any new modules or pre-releases there for anyone wanting to help me test things out!**
 
@@ -162,13 +163,19 @@ When viewing a Chat Archive, GMs will see a Merge button in the top right corner
 |:-:|:-:|:-:|:-:|
 |![Manage archives](../.assets/df-chat-enhance-archive-manage.png)|![View archive](../.assets/df-chat-enhance-archive-viewer.png)|![Edit archive](../.assets/df-chat-enhance-archive-edit.png)|![Merge archive](../.assets/df-chat-enhance-archive-merge.png)|
 
+## Chat Message Markdown
+
+You can now use all of your favourite Markdown in the Chat Log for formatting your messages in the way you want.
+
+![Chat Message Markdown](../.assets/df-chat-enhance-chat-edit-markdown.png)
+
 ## Edit Sent Messages
 
 You will now see a little edit button in the top right of messages you are allowed to edit. Clicking this will display a dialog that lets you change the contents of the message. It will also add the "(edited)" flavour to the message to show that it has been modified.
 
 ### Edit Last Message Keyboard Shortcut
 
-A keyboard shortcut has now been added to allow you to quickly edit your most recent message you sent. While in the chat box, simply press `[Shift]+[Up]` on the keyboard. An edit message dialog will immediately appear for the most recent message you sent.
+A keyboard shortcut has now been added to allow you to quickly edit your most recent message you sent. While in the chat box, simply press `[Ctrl]+[Up]` on the keyboard. An edit message dialog will immediately appear for the most recent message you sent.
 
 ![](../.assets/df-chat-enhance-edit-message.png)
 
@@ -224,4 +231,10 @@ Now when you whisper a message to a list of users, the Recipient List at the top
 
 ## Formatted Message Text Selectable
 
-Core Foundry prevents the selection of text in ANY part of Foundry. This means sections need to be re-enabled for user text selection. Messages currently allow it, but only for the plain text part. If you attempt to select "formatted" or stylized text such as this: `"Hello, my name is <b>Bob</b>"`. The `<b>` makes the text "Bob" bold, and cannot be selected. DF Chat Enhancements makes it possible to select any and all text within a regular message (any message that is not a Roll).
+Core Foundry prevents the selection of text in ANY part of Foundry. This means sections need to be re-enabled for user text selection. Messages currently allow it, but only for the plain text part. If you attempt to select "formatted" or stylized text such as this: `"Hello, my name is <b>Bob</b>"`. The `<b>` makes the text "Bob" bold, and cannot be selected. DF Chat Enhancements makes it possible to select any and all text within a regular message (any message that is not a Roll).
+
+## Third-Party Libraries
+
+- `marked.min.js` - a markdown parser
+	> Copyright (c) 2011-2021, Christopher Jeffrey. (MIT Licensed)
+	> https://github.com/markedjs/marked

df-chat-enhance/lang/en.json

@@ -117,6 +117,8 @@
 		"Settings_GMEditAllHint": "Allow GMs to edit anyone's message instead of just their own",
 		"Settings_IgnoreHtmlName": "Chat Edit: Ignore Messages Containing HTML",
 		"Settings_IgnoreHtmlHint": "Do not allow messages containing HTML to be edited.",
+		"Settings_MarkdownName": "Chat Edit: Enable Markdown",
+		"Settings_MarkdownHint": "Enable Markdown styling in the Chat Log.",
 		"EditedFlag": "(edited)",
 		"Error_NoPermission": "The Gamemaster has disabled editing",
 		"ContextOption": "Edit Message"

df-chat-enhance/module.json

@@ -2,14 +2,15 @@
 	"name": "df-chat-enhance",
 	"title": "DF Chat Enhancements",
 	"description": "Various enhancements to the chat features.",
-	"version": "3.4.1",
+	"version": "3.5.0",
 	"author": "flamewave000#0001",
 	"minimumCoreVersion": "0.8.9",
 	"compatibleCoreVersion": "0.8.9",
 	"dependencies": [
 		{ "name": "_chatcommands" },
 		{ "name": "lib-wrapper" }
 	],
+	"scripts": [ "libs/marked.min.js" ],
 	"esmodules": "{{sources}}",
 	"styles": "{{css}}",
 	"languages": [

df-chat-enhance/src/edit/DFChatEditor.ts

@@ -1,5 +1,13 @@
+import SETTINGS from "../../../common/Settings";
+
+
+declare namespace marked {
+	function parse(md: string, options: any): string;
+}
+
 export default class DFChatEditor extends FormApplication {
 	private chatMessage: ChatMessage;
+	public static readonly PREF_MARKDOWN = 'edit-markdown';
 
 	/**
 	 * Assign the default options which are supported by the entity edit sheet.
@@ -42,7 +50,11 @@ export default class DFChatEditor extends FormApplication {
 	/** @override */
 	async _updateObject(_event?: any, formData?: any) {
 		let data = formData.content as string;
-		data = data.replace(/\r?\n/gm, '<br/>');
+		if (SETTINGS.get(DFChatEditor.PREF_MARKDOWN)) {
+			data = DFChatEditor.processMarkdown(data)[1];
+		} else {
+			data = data.replace(/\r?\n/gm, '<br/>');
+		}
 		if (data.search(/<p +class="df-edited">/) < 0) {
 			data += `<p class="df-edited">${'DF_CHAT_EDIT.EditedFlag'.localize()}</p>`;
 		}
@@ -55,4 +67,20 @@ export default class DFChatEditor extends FormApplication {
 		delete (<any>this.chatMessage).chatEditor;
 		return super.close(options);
 	}
+
+	public static processMarkdown(message: string) {
+		const originalMessage = message;
+		message = marked.parse(message, {
+			headerIds: false,
+			breaks: true
+		}).trimEnd();
+		if (message.startsWith('<p>'))
+			message = message.substr(3);
+		if (message.endsWith('</p>'))
+			message = message.substr(0, message.length - 5);
+		const newLine = /(<\/?[ a-z]+>)\n(<\/?[ a-z]+>?)/;
+		while (newLine.test(message))
+			message = message.replace(newLine, '$1$2');
+		return [originalMessage, message];
+	}
 }

df-chat-enhance/src/edit/df-chat-edit.ts

@@ -7,6 +7,14 @@ const PREF_IGNORE_HTML = 'edit-ignore-html';
 
 export default class DFChatEdit {
 	static ready() {
+		SETTINGS.register(DFChatEditor.PREF_MARKDOWN, {
+			name: 'DF_CHAT_EDIT.Settings_MarkdownName',
+			hint: 'DF_CHAT_EDIT.Settings_MarkdownHint',
+			type: Boolean,
+			default: true,
+			config: true,
+			scope: 'world'
+		});
 		SETTINGS.register(PREF_EDIT_ALLOWED, {
 			name: 'DF_CHAT_EDIT.Settings_AllowEditName',
 			hint: 'DF_CHAT_EDIT.Settings_AllowEditHint',
@@ -27,7 +35,7 @@ export default class DFChatEdit {
 			name: 'DF_CHAT_EDIT.Settings_IgnoreHtmlName',
 			hint: 'DF_CHAT_EDIT.Settings_IgnoreHtmlHint',
 			type: Boolean,
-			default: true,
+			default: false,
 			config: true,
 			scope: 'world'
 		});
@@ -36,7 +44,7 @@ export default class DFChatEdit {
 			const event = args[0] as KeyboardEvent;
 			const code = game.keyboard.getKey(event);
 			// We have used the Shift+Up combo to edit previously sent message
-			if (code === "ArrowUp" && event.shiftKey) {
+			if (code === "ArrowUp" && event.ctrlKey) {
 				event.preventDefault();
 				let messages = <ChatMessage[]>[...(ui.chat.collection.values())];
 				// Perform an inverted sort ( n<0 before, n=0 same, n>0 after )
@@ -48,6 +56,19 @@ export default class DFChatEdit {
 			else
 				wrapper(...args);
 		}, 'MIXED');
+
+		libWrapper.register(SETTINGS.MOD_NAME, 'ChatLog.prototype.processMessage', function (this: ChatLog, wrapper: AnyFunction, message: string) {
+			let originalMessage: string = null;
+			if (SETTINGS.get(DFChatEditor.PREF_MARKDOWN) && !message.trim().startsWith('/')) {
+				[originalMessage, message] = DFChatEditor.processMarkdown(message);
+			}
+			const result = wrapper(message);
+			if (originalMessage) {
+				this._sentMessages.splice(0, 1);
+				this._sentMessages.unshift(originalMessage);
+			}
+			return result;
+		}, 'WRAPPER');
 	}
 
 	static appendChatContextMenuOptions(options: ContextMenu.Item[]) {
@@ -71,8 +92,6 @@ export default class DFChatEdit {
 		// Double check permissions
 		if (!SETTINGS.get(PREF_EDIT_ALLOWED)) {
 			ui.notifications.warn('DF_CHAT_EDIT.Error_NoPermission'.localize());
-			// // Try removing the edit buttons from everything
-			// DFChatEdit.processAllMessages();
 			return;
 		}
 		if ((<any>this).chatEditor) {
@@ -87,6 +106,7 @@ export default class DFChatEdit {
 		const doc = new DOMParser().parseFromString(str, "text/html");
 		return Array.from(doc.body.childNodes).some(node => {
 			return (node instanceof HTMLElement && !node.classList.contains('df-edited'))
+				&& !(node instanceof HTMLBRElement)
 				&& node.nodeType === 1;
 		});
 	}