Merge pull request #10 from adifyr/develop

Pull Request for Version 1.1.3 of Obsidian Chat View

README.md

@@ -46,19 +46,22 @@ Will result in the Chat View seen below:
 
 ![Chat View Preview 3](https://github.com/adifyr/obsidian-chat-view/raw/master/images/chatview_preview3.jpg)
 
-## Customize Header Formatting
-To add that last bit of organization & pizazz, the plugin also includes the ability to customize the formatting of the chat bubble's header - namely the size & color. Here's how you can do it.
+## Customization
+To add that last bit of organization & pizazz, the plugin also includes the ability to customize the header size, header colors and maximum width of the chat bubbles. Here's how you can configure each of them for your Chat View:
 
 - ### Header Size
     Chat View allows you to choose from 5 different sizes for your Chat Bubble's header: `[h2, h3, h4, h5, h6]`. This can be done by simply adding the following config line to your code block: `{header=<hX>}`.
 
 - ### Header Color
     You can also change the color of headers speaker-wise. You may choose from upto 10 colors: `[red, green, blue, yellow, orange, purple, grey, brown, indigo, teal]`. This can be done by adding a color configuration like this to your code block: `[Person Name=color, Person Name=color]`.
 
-The below example portrays how both of these work in tandem.
+- ### Max Width
+    The maximum width of the Chat Bubble can be specified by adding the following to your config line: `{..., mw=width}`. The plugin accepts 9 widths (in percentages) from 50% to 90% at an interval of 5%. Namely: `[50, 55, 60, 65, 70, 75, 80, 85, 90]`.
+
+The below example showcases how all three of these work in tandem.
 ~~~
 ```chat
-{header=h3}
+{header=h3, mw=75}
 [Elizabeth Bennett=blue, Fitzwilliam Darcy=yellow]
 
 > Elizabeth Swann | I... But what about... You can't be serious, Mr. Darcy. This is preposterous. After all we've been through, I thought...

main.ts

@@ -3,6 +3,7 @@ import {Plugin, Platform} from "obsidian";
 const KEYMAP: Record<string, string> = {">": "right", "<": "left", "^": "center"};
 const COLORS = [ "red", "orange", "yellow", "green", "blue", "purple", "grey", "brown", "indigo", "teal" ];
 const HEADERS = [ "h2", "h3", "h4", "h5", "h6" ];
+const MAX_WIDTHS = [ "50", "55", "60", "65", "70", "75", "80", "85", "90" ];
 
 class ChatPatterns {
 	static readonly message = /(^>|<|\^)/;
@@ -30,6 +31,8 @@ export default class ChatViewPlugin extends Plugin {
 						const entry = config.split("=").map((c) => c.trim());
 						if (entry[ 0 ] == "header" && HEADERS.contains(entry[ 1 ])) {
 							formatConfigs.set("header", entry[ 1 ]);
+						} else if (entry[ 0 ] == "mw" && MAX_WIDTHS.contains(entry[ 1 ])) {
+							formatConfigs.set("mw", entry[ 1 ]);
 						}
 					}
 				} else if (ChatPatterns.colors.test(line)) {
@@ -42,6 +45,7 @@ export default class ChatViewPlugin extends Plugin {
 					}
 				}
 			}
+			let continuedCount = 0;
 			for (let index = 0; index < lines.length; index++) {
 				const line = lines[ index ].trim();
 				if (ChatPatterns.comment.test(line)) {
@@ -57,8 +61,14 @@ export default class ChatViewPlugin extends Plugin {
 						const message = components.length > 1 ? components[ 1 ].trim() : first.trim();
 						const subtext = components.length > 2 ? components[ 2 ].trim() : "";
 						const continued = index > 0 && line.charAt(0) === lines[ index - 1 ].charAt(0) && header === "";
-						const prevComponents = continued ? lines[ index - 1 ].substring(1).split("|") : [];
-						const prevHeader = prevComponents.length > 1 ? prevComponents[ 0 ].trim() : "";
+						let prevHeader = "";
+						if (continued) {
+							continuedCount++;
+							const prevComponents = lines[ index - continuedCount ].trim().substring(1).split("|");
+							prevHeader = prevComponents[ 0 ].length > 1 ? prevComponents[ 0 ].trim() : "";
+						} else {
+							continuedCount = 0;
+						}
 						this.createChatBubble(
 							header, prevHeader, message, subtext, KEYMAP[ line.charAt(0) ], el, continued,
 							colorConfigs, formatConfigs,
@@ -80,14 +90,11 @@ export default class ChatViewPlugin extends Plugin {
 		colorConfigs: Map<string, string>,
 		formatConfigs: Map<string, string>,
 	) {
-		console.log({
-			"message": message,
-			"prev_header": prevHeader,
-		});
 		const marginClass = continued ? "chat-view-small-vertical-margin" : "chat-view-default-vertical-margin";
-		const colorConfigClass =
-			`chat-view-${ colorConfigs.get(continued && prevHeader.length > 0 ? prevHeader : header) }`;
-		const widthClass = Platform.isMobile ? "chat-view-mobile-width" : "chat-view-desktop-width";
+		const colorConfigClass = `chat-view-${ colorConfigs.get(continued ? prevHeader : header) }`;
+		const widthClass = formatConfigs.has("mw") ?
+			`chat-view-max-width-${ formatConfigs.get("mw") }`
+			: (Platform.isMobile ? "chat-view-mobile-width" : "chat-view-desktop-width");
 		const headerEl: keyof HTMLElementTagNameMap = formatConfigs.has("header") ?
 			formatConfigs.get("header") as keyof HTMLElementTagNameMap :
 			"h4";

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "obsidian-chat-view",
 	"name": "Chat View",
-	"version": "1.1.0",
+	"version": "1.1.3",
 	"minAppVersion": "0.12.0",
 	"description": "Chat View lets you create elegant Chat UIs in your Obsidian markdown files.",
 	"author": "Aditya Majethia",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-chat-view",
-	"version": "1.1.0",
+	"version": "1.1.3",
 	"description": "Chat View enables you to create elegant Chat UIs in your Obsidian markdown files.",
 	"main": "main.js",
 	"scripts": {

styles.css

@@ -3,7 +3,11 @@
     --line-height: 1.8;
 }
 
-h2.chat-view-header, h3.chat-view-header, h4.chat-view-header, h5.chat-view-header, h6.chat-view-header {
+h2.chat-view-header,
+h3.chat-view-header,
+h4.chat-view-header,
+h5.chat-view-header,
+h6.chat-view-header {
     margin: 0;
     margin-bottom: 8px;
 }
@@ -37,13 +41,49 @@ div.chat-view-bubble {
 }
 
 .chat-view-mobile-width {
-    max-width: 90%;
+    max-width: 85%;
 }
 
 .chat-view-desktop-width {
     max-width: 75%;
 }
 
+.chat-view-max-width-50 {
+    max-width: 50%;
+}
+
+.chat-view-max-width-55 {
+    max-width: 55%;
+}
+
+.chat-view-max-width-60 {
+    max-width: 60%;
+}
+
+.chat-view-max-width-65 {
+    max-width: 65%;
+}
+
+.chat-view-max-width-70 {
+    max-width: 70%;
+}
+
+.chat-view-max-width-75 {
+    max-width: 75%;
+}
+
+.chat-view-max-width-80 {
+    max-width: 80%;
+}
+
+.chat-view-max-width-85 {
+    max-width: 85%;
+}
+
+.chat-view-max-width-90 {
+    max-width: 90%;
+}
+
 div.chat-view-default-vertical-margin {
     margin-top: 18px;
 }

versions.json

@@ -1,5 +1,5 @@
 {
-	"0.1.0": "0.12.0",
 	"1.0.0": "0.12.0",
-	"1.1.0": "0.12.0"
+	"1.1.0": "0.12.0",
+	"1.1.3": "0.12.0"
 }