Markdown messages can now be rendered and added footers to dialogues

README.md

@@ -10,13 +10,24 @@ Parameters can be set using commands inside the dialogue. All available paramete
 
 ### Available parameters
 
-| Parameter          | Description                                                                   | Default Value |
-| ------------------ | ----------------------------------------------------------------------------- | ------------- |
-| `left:` or `l:`    | Name of the dialogue participant on the left side.                            | none          |
-| `right:` or `r:`   | Name of the dialogue participant on the right side.                           | none          |
-| `titleMode:`       | Defines if and when to render titles. See available modes in the table below. | `first`       |
-| `messageMaxWidth:` | Defines the max message width in the dialogue.                                | `60%`         |
-| `commentMaxWidth:` | Defines the max comment width in the dialogue.                                | `60%`         |
+| Parameter                | Description                                                                            | Default Value |
+|--------------------------|----------------------------------------------------------------------------------------|---------------|
+| `left:` or `l:`          | Name of the dialogue participant on the left side.                                     | none          |
+| `right:` or `r:`         | Name of the dialogue participant on the right side.                                    | none          |
+| `center:` or `c:`        | Name of the dialogue participant in the middle.                                        | none          |
+| `leftFooter:` or `lf:`   | Default footer content for the dialogue on the left side.                              | none          |
+| `rightFooter:`  or `rf:` | Default footer content for the dialogue on the right side.                             | none          |
+| `centerFooter:` or `cf:` | Default footer content for the dialogue on the middle.                                 | none          |
+| `titleMode:`             | Defines if and when to render titles. See available modes in the table below.          | `first`       |
+| `footerMode:`            | Defines if and when to render default footers. See available modes in the table below. | `all`    |
+| `messageMaxWidth:`       | Defines the max message width in the dialogue.                                         | `60%`         |
+| `commentMaxWidth:`       | Defines the max comment width in the dialogue.                                         | `60%`         |
+| `clean:`                 | Hide unparsable text.                                                                  | `true`        |
+| `renderMarkdownTitle:`   | Render markdown in the title.                                                          | `true`        |
+| `renderMarkdownContent:` | Render markdown in the content.                                                        | `true`        |
+| `renderMarkdownFooter:`  | Render markdown in the footer.                                                         | `true`        |
+| `renderMarkdownComment:` | Render markdown in the comment.                                                        | `true`        |
+
 
 ### Title Modes
 
@@ -26,6 +37,13 @@ Parameters can be set using commands inside the dialogue. All available paramete
 | `first`    | Render each title only on the first occurence. |
 | `all`      | Always render title.                           |
 
+### Footer Modes
+
+| Mode       | Description                                            |
+|------------|--------------------------------------------------------|
+| `disabled` | Disable all default footers.                           |
+| `all`      | Always render default footer.                          |
+
 ## Usage
 
 ### Simple usage
@@ -34,9 +52,27 @@ The message in the dialogue must be prefixed with
 
 -   either `<` (message on the left side)
 -   or `>` (message on the right side).
+-   or `=` (message in the middle).
 
 The message must be exactly one paragraph.
 
+To add a footer to a dialogue, use the prefix `::` after the dialogue.
+
+````
+```dialogue
+< Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec tristique nunc, et pharetra sem.
+:: footer content for left side
+
+> Lorem ipsum dolor sit amet
+:: footer content for right side
+> Ut nec efficitur mauris, a lacinia purus. Fusce nisi arcu, sollicitudin eget sodales sit amet, consectetur a lorem.
+
+footerMode: all
+leftFooter: default footer content for left side
+< Nam egestas tristique felis, sed suscipit nunc commodo nec.
+```
+````
+
 #### Example code
 
 ````

manifest-beta.json

@@ -0,0 +1,10 @@
+{
+	"id": "obsidian-dialogue-plugin",
+	"name": "Dialogue",
+	"version": "1.1.0",
+	"minAppVersion": "0.12.0",
+	"description": "Create dialogues in Markdown.",
+	"author": "Twiddly",
+	"authorUrl": "https://github.com/twiddli/obsidian-dialogue-plugin",
+	"isDesktopOnly": false
+}

manifest.json

@@ -1,10 +1,10 @@
 {
 	"id": "obsidian-dialogue-plugin",
 	"name": "Dialogue",
-	"version": "1.0.2",
+	"version": "1.1.0",
 	"minAppVersion": "0.12.0",
 	"description": "Create dialogues in Markdown.",
-	"author": "Jakub Holub",
-	"authorUrl": "https://github.com/holubj",
+	"author": "Twiddly",
+	"authorUrl": "https://github.com/twiddli/obsidian-dialogue-plugin",
 	"isDesktopOnly": false
 }

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-dialogue-plugin",
-	"version": "0.12.0",
+	"version": "0.13.0",
 	"description": "Create dialogues in Markdown.",
 	"main": "main.js",
 	"scripts": {

src/components/comment.ts

@@ -3,25 +3,20 @@ import { DialogueSettings } from '../dialogue';
 
 export class Comment {
 
-    content: string;
-
     dialogueSettings: DialogueSettings;
 
-    constructor(content: string, dialogueSettings: DialogueSettings) {
-        this.content = content;
+    constructor(dialogueSettings: DialogueSettings) {
         this.dialogueSettings = dialogueSettings;
-
-        this.renderComment();
     }
 
-    renderComment() {
+    renderComment(content?: string) {
         const commentEl = this.dialogueSettings.parent.createDiv({
             cls: `${CLASSES.BLOCK_WRAPPER} ${CLASSES.COMMENT_WRAPPER}`
         });
 
         return commentEl.createDiv({
             cls: CLASSES.COMMENT,
-            text: this.content,
+            text: content,
             attr: {
                 style: `max-width: ${this.dialogueSettings.commentMaxWidth};`
             }

src/components/message.ts

@@ -1,46 +1,79 @@
-import { CLASSES } from '../constants/classes';
-import { DialogueSettings, Participant } from '../dialogue';
+import { DialogueFooterMode } from 'src/types/dialogueFooterMode';
 import { DialogueTitleMode } from '../types/dialogueTitleMode';
+import { CLASSES } from '../constants/classes';
+import { DialogueSettings, FooterContent, Participant } from '../dialogue';
 
 export abstract class SIDES {
     static readonly LEFT = 'left';
     static readonly RIGHT = 'right';
+    static readonly CENTER = 'center';
 }
 
-export type MessageSide = typeof SIDES.LEFT | typeof SIDES.RIGHT;
+export type MessageSide = typeof SIDES.LEFT | typeof SIDES.RIGHT | typeof SIDES.CENTER;
 
 export class Message {
 
-    content: string;
-
     side: MessageSide;
 
     participant: Participant;
 
+    footerContent: FooterContent
+
+    element?: HTMLDivElement;
+
     dialogueSettings: DialogueSettings;
 
-    constructor(content: string, side: MessageSide, dialogueSettings: DialogueSettings) {
-        this.content = content;
+    constructor(side: MessageSide, dialogueSettings: DialogueSettings) {
         this.side = side;
         this.dialogueSettings = dialogueSettings;
 
-        this.participant = this.side == SIDES.LEFT ? this.dialogueSettings.leftParticipant : this.dialogueSettings.rightParticipant;
-
-        this.renderMessage();
+        switch(this.side) {
+            case SIDES.LEFT: {
+                this.participant = this.dialogueSettings.leftParticipant;
+                this.footerContent = this.dialogueSettings.leftFooter;
+                break;
+            }
+            case SIDES.RIGHT: {
+                this.participant = this.dialogueSettings.rightParticipant;
+                this.footerContent = this.dialogueSettings.rightFooter;
+                break;
+            }
+            case SIDES.CENTER: {
+                this.participant = this.dialogueSettings.centerParticipant;
+                this.footerContent = this.dialogueSettings.centerFooter;
+                break;
+            }
+        }
+
     }
 
     renderMessage() {
-        const messageEl = this.createMessageEl();
+        this.element = this.createMessageEl();
+        return this.element;
+    }
 
-        if (this.titleShouldRender()) {
-            messageEl.createDiv({ cls: CLASSES.MESSAGE_TITLE, text: this.participant.title });
-        }
+    renderContent(content?: string) {
+        return this.element.createDiv({ cls: CLASSES.MESSAGE_CONTENT, text: content });
+    }
+
+    renderTitle(title?: string) {
+        return this.element.createDiv({ cls: CLASSES.MESSAGE_TITLE, text: title });
+    }
 
-        messageEl.createDiv({ cls: CLASSES.MESSAGE_CONTENT, text: this.content });
+    renderFooter(content?: string): HTMLDivElement {
+        return this.element.createDiv({ cls: CLASSES.MESSAGE_FOOTER, text: content});
     }
 
     createMessageEl(): HTMLDivElement {
-        const sideClass = this.side == SIDES.LEFT ? CLASSES.MESSAGE_WRAPPER_LEFT : CLASSES.MESSAGE_WRAPPER_RIGHT;
+
+        let sideClass = CLASSES.MESSAGE_WRAPPER_LEFT;
+
+        switch (this.side) {
+            case SIDES.LEFT: sideClass = CLASSES.MESSAGE_WRAPPER_LEFT; break;
+            case SIDES.RIGHT: sideClass = CLASSES.MESSAGE_WRAPPER_RIGHT; break;
+            case SIDES.CENTER: sideClass = CLASSES.MESSAGE_WRAPPER_CENTER; break;
+        }
+
         const messageWrapperEl = this.dialogueSettings.parent.createDiv({
             cls: `${CLASSES.BLOCK_WRAPPER} ${sideClass}`
         });
@@ -70,4 +103,14 @@ export class Message {
             default: return false;
         }
     }
+
+    defaultFooterShouldRender(): boolean {
+        if (this.footerContent.content.length < 1) return false;
+
+        switch (this.dialogueSettings.footerMode) {
+            case DialogueFooterMode.Disabled: return false;
+            case DialogueFooterMode.All: return true;
+            default: return false;
+        }
+    }
 }

src/constants/classes.ts

@@ -2,14 +2,18 @@
 export abstract class CLASSES {
     static readonly DIALOGUE_WRAPPER = 'dialogue-plugin-wrapper';
     static readonly BLOCK_WRAPPER = 'dialogue-plugin-block-wrapper';
+    static readonly MESSAGE_WRAPPER_CENTER = 'dialogue-plugin-message-wrapper-center';
     static readonly MESSAGE_WRAPPER_LEFT = 'dialogue-plugin-message-wrapper-left';
     static readonly MESSAGE_WRAPPER_RIGHT = 'dialogue-plugin-message-wrapper-right';
     static readonly MESSAGE = 'dialogue-plugin-message';
     static readonly MESSAGE_TITLE = 'dialogue-plugin-message-title';
     static readonly MESSAGE_CONTENT = 'dialogue-plugin-message-content';
+    static readonly MESSAGE_FOOTER = 'dialogue-plugin-message-footer';
     static readonly DELIMITER_WRAPPER = 'dialogue-plugin-delimiter-wrapper';
     static readonly DELIMITER = 'dialogue-plugin-delimiter';
     static readonly DELIMITER_DOT = 'dialogue-plugin-delimiter-dot';
     static readonly COMMENT_WRAPPER = 'dialogue-plugin-comment-wrapper';
     static readonly COMMENT = 'dialogue-plugin-comment';
+    static readonly RENDER = 'dialogue-plugin-render';
+    static readonly UNPARSED = 'dialogue-plugin-unparsed';
 }