From 91cc49debb8f87f1e10b205c5338467e90bf05dc Mon Sep 17 00:00:00 2001 From: Twiddly Date: Sat, 8 Jul 2023 15:59:40 +0000 Subject: [PATCH 1/8] feat: add center participant; --- README.md | 2 ++ manifest.json | 6 +++--- src/components/message.ts | 27 +++++++++++++++++++++++---- src/constants/classes.ts | 1 + src/dialogue.ts | 23 +++++++++++++++++++++-- src/settings.ts | 13 +++++++++++++ styles.css | 4 ++++ 7 files changed, 67 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 378e8e4..915d9ef 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,7 @@ Parameters can be set using commands inside the dialogue. All available paramete | ------------------ | ----------------------------------------------------------------------------- | ------------- | | `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 | | `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%` | @@ -34,6 +35,7 @@ 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. diff --git a/manifest.json b/manifest.json index cdec1ca..2601db7 100644 --- a/manifest.json +++ b/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 } diff --git a/src/components/message.ts b/src/components/message.ts index eeafa78..8763a7a 100644 --- a/src/components/message.ts +++ b/src/components/message.ts @@ -5,9 +5,10 @@ import { DialogueTitleMode } from '../types/dialogueTitleMode'; 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 { @@ -24,8 +25,18 @@ export class Message { this.side = side; this.dialogueSettings = dialogueSettings; - this.participant = this.side == SIDES.LEFT ? this.dialogueSettings.leftParticipant : this.dialogueSettings.rightParticipant; - + switch(this.side) { + case SIDES.LEFT: + this.participant = this.dialogueSettings.leftParticipant; + break; + case SIDES.RIGHT: + this.participant = this.dialogueSettings.rightParticipant; + break; + case SIDES.CENTER: + this.participant = this.dialogueSettings.centerParticipant; + break; + } + this.renderMessage(); } @@ -40,7 +51,15 @@ export class Message { } 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}` }); diff --git a/src/constants/classes.ts b/src/constants/classes.ts index 321934f..2bd2648 100644 --- a/src/constants/classes.ts +++ b/src/constants/classes.ts @@ -2,6 +2,7 @@ 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'; diff --git a/src/dialogue.ts b/src/dialogue.ts index 154f932..3dbc55a 100644 --- a/src/dialogue.ts +++ b/src/dialogue.ts @@ -8,6 +8,7 @@ import { Comment } from './components/comment'; abstract class KEYWORDS { static readonly LEFT_PATTERN = /^l(?:eft)?(?:-(\d+))?:/i; static readonly RIGHT_PATTERN = /^r(?:ight)?(?:-(\d+))?:/i; + static readonly CENTER_PATTERN = /^c(?:center)?(?:-(\d+))?:/i; static readonly TITLE_MODE = 'titleMode:'; static readonly MESSAGE_MAX_WIDTH = 'messageMaxWidth:'; static readonly COMMENT_MAX_WIDTH = 'commentMaxWidth:'; @@ -15,6 +16,7 @@ abstract class KEYWORDS { static readonly COMMENT = '#'; static readonly MESSAGE_LEFT = '<'; static readonly MESSAGE_RIGHT = '>'; + static readonly MESSAGE_CENTER = '='; } export interface Participant { @@ -27,6 +29,7 @@ export interface DialogueSettings { parent: HTMLElement; leftParticipant: Participant; rightParticipant: Participant; + centerParticipant: Participant; titleMode: DialogueTitleMode; messageMaxWidth: string; commentMaxWidth: string; @@ -58,6 +61,11 @@ export class DialogueRenderer { renderedOnce: false, enforcedId: null, }, + centerParticipant: { + title: settings.defaultCenterTitle, + renderedOnce: false, + enforcedId: null, + }, titleMode: settings.defaultTitleMode, messageMaxWidth: settings.defaultMessageMaxWidth, commentMaxWidth: settings.defaultCommentMaxWidth, @@ -101,6 +109,11 @@ export class DialogueRenderer { this.dialogueSettings.rightParticipant.renderedOnce = false; // reset this flag when a new title is set this.dialogueSettings.rightParticipant.enforcedId = this.getEnforcedId(KEYWORDS.RIGHT_PATTERN, line); } + else if (KEYWORDS.CENTER_PATTERN.test(line)) { + this.dialogueSettings.centerParticipant.title = line.split(':').splice(1).join(':').trim(); + this.dialogueSettings.centerParticipant.renderedOnce = false; // reset this flag when a new title is set + this.dialogueSettings.centerParticipant.enforcedId = this.getEnforcedId(KEYWORDS.CENTER_PATTERN, line); + } else if (line.startsWith(KEYWORDS.TITLE_MODE)) { const modeName = line.substr(KEYWORDS.TITLE_MODE.length).trim().toLowerCase(); if (Object.values(DialogueTitleMode).some(mode => mode == modeName)) { @@ -122,15 +135,21 @@ export class DialogueRenderer { new Comment(content, this.dialogueSettings); } else if (line.startsWith(KEYWORDS.MESSAGE_LEFT)) { - const content = line.substr(KEYWORDS.MESSAGE_LEFT.length); + const content = line.substr(KEYWORDS.MESSAGE_LEFT.length).trim(); this.registerParticipant(this.dialogueSettings.leftParticipant.title); new Message(content, SIDES.LEFT, this.dialogueSettings); } else if (line.startsWith(KEYWORDS.MESSAGE_RIGHT)) { - const content = line.substr(KEYWORDS.MESSAGE_RIGHT.length); + const content = line.substr(KEYWORDS.MESSAGE_RIGHT.length).trim(); this.registerParticipant(this.dialogueSettings.rightParticipant.title); + new Message(content, SIDES.RIGHT, this.dialogueSettings); + } + else if (line.startsWith(KEYWORDS.MESSAGE_CENTER)) { + const content = line.substr(KEYWORDS.MESSAGE_CENTER.length).trim(); + this.registerParticipant(this.dialogueSettings.centerParticipant.title); + new Message(content, SIDES.RIGHT, this.dialogueSettings); } } diff --git a/src/settings.ts b/src/settings.ts index ed1d447..338933f 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -5,6 +5,7 @@ import { DialogueTitleMode } from './types/dialogueTitleMode'; export interface DialoguePluginSettings { defaultLeftTitle: string; defaultRightTitle: string; + defaultCenterTitle: string; defaultTitleMode: DialogueTitleMode; defaultMessageMaxWidth: string; defaultCommentMaxWidth: string; @@ -13,6 +14,7 @@ export interface DialoguePluginSettings { export const DEFAULT_SETTINGS: DialoguePluginSettings = { defaultLeftTitle: '', defaultRightTitle: '', + defaultCenterTitle: '', defaultTitleMode: DialogueTitleMode.First, defaultMessageMaxWidth: '60%', defaultCommentMaxWidth: '60%', @@ -70,6 +72,17 @@ export class DialogueSettingTab extends PluginSettingTab { await this.plugin.saveSettings(); })); + new Setting(containerEl) + .setName('Default center title') + .setDesc('Default value for center title in all dialogues.') + .addText(text => + text.setPlaceholder('Enter default center title') + .setValue(this.plugin.settings.defaultCenterTitle) + .onChange(async (value) => { + this.plugin.settings.defaultCenterTitle = value; + await this.plugin.saveSettings(); + })); + new Setting(containerEl) .setName('Default title mode') .setDesc('Default title mode in all dialogues.') diff --git a/styles.css b/styles.css index 174c393..b01bea3 100644 --- a/styles.css +++ b/styles.css @@ -15,6 +15,10 @@ justify-content: flex-end; } +.dialogue-plugin-message-wrapper-center { + justify-content: center; +} + .dialogue-plugin-message { overflow: hidden; max-width: 60%; From 408a4b630997eac773663f6e7a902a5f8da5ec12 Mon Sep 17 00:00:00 2001 From: Twiddly Date: Sat, 8 Jul 2023 16:21:57 +0000 Subject: [PATCH 2/8] add beta manifest; --- manifest-beta.json | 10 ++++++++++ package.json | 2 +- versions.json | 1 + 3 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 manifest-beta.json diff --git a/manifest-beta.json b/manifest-beta.json new file mode 100644 index 0000000..d2f8f02 --- /dev/null +++ b/manifest-beta.json @@ -0,0 +1,10 @@ +{ + "id": "obsidian-dialogue-plugin", + "name": "Dialogue", + "version": "1.1.0-pre1", + "minAppVersion": "0.12.0", + "description": "Create dialogues in Markdown.", + "author": "Twiddly", + "authorUrl": "https://github.com/twiddli/obsidian-dialogue-plugin", + "isDesktopOnly": false +} diff --git a/package.json b/package.json index 0094397..755f940 100644 --- a/package.json +++ b/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": { diff --git a/versions.json b/versions.json index cfaa536..f67607b 100644 --- a/versions.json +++ b/versions.json @@ -1,4 +1,5 @@ { + "1.1.0": "0.12.3", "1.0.2": "0.12.3", "1.0.1": "0.12.3", "1.0.0": "0.12.3" From bb1fff3f95996df8680704ed7036a0af2ab1e970 Mon Sep 17 00:00:00 2001 From: Twiddly Date: Sat, 8 Jul 2023 16:48:10 +0000 Subject: [PATCH 3/8] fix: center participant rendering; --- src/dialogue.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/dialogue.ts b/src/dialogue.ts index 3dbc55a..8d58492 100644 --- a/src/dialogue.ts +++ b/src/dialogue.ts @@ -8,7 +8,7 @@ import { Comment } from './components/comment'; abstract class KEYWORDS { static readonly LEFT_PATTERN = /^l(?:eft)?(?:-(\d+))?:/i; static readonly RIGHT_PATTERN = /^r(?:ight)?(?:-(\d+))?:/i; - static readonly CENTER_PATTERN = /^c(?:center)?(?:-(\d+))?:/i; + static readonly CENTER_PATTERN = /^c(?:enter)?(?:-(\d+))?:/i; static readonly TITLE_MODE = 'titleMode:'; static readonly MESSAGE_MAX_WIDTH = 'messageMaxWidth:'; static readonly COMMENT_MAX_WIDTH = 'commentMaxWidth:'; @@ -150,7 +150,7 @@ export class DialogueRenderer { const content = line.substr(KEYWORDS.MESSAGE_CENTER.length).trim(); this.registerParticipant(this.dialogueSettings.centerParticipant.title); - new Message(content, SIDES.RIGHT, this.dialogueSettings); + new Message(content, SIDES.CENTER, this.dialogueSettings); } } } From 429c926d07ceee0ad39f4a140922c4fff0717f4d Mon Sep 17 00:00:00 2001 From: Twiddly Date: Sat, 8 Jul 2023 18:41:25 +0000 Subject: [PATCH 4/8] feat: render markdown in messages and comments; feat: added clean option to unhide unparsed text --- README.md | 21 +++++---- src/components/comment.ts | 11 ++--- src/components/message.ts | 18 ++++---- src/constants/classes.ts | 2 + src/dialogue.ts | 97 +++++++++++++++++++++++++++++++++++---- src/main.ts | 2 +- src/settings.ts | 48 +++++++++++++++++++ styles.css | 5 ++ 8 files changed, 168 insertions(+), 36 deletions(-) diff --git a/README.md b/README.md index 915d9ef..ec774ef 100644 --- a/README.md +++ b/README.md @@ -10,14 +10,19 @@ 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 | -| `center:` or `c:` | Name of the dialogue participant in the middle. | 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 | +| `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%` | +| `clean:` | Hide unparsable text. | `true` | +| `renderMarkdownTitle:` | Render markdown in the title. | `true` | +| `renderMarkdownContent:` | Render markdown in the content. | `true` | +| `renderMarkdownComment:` | Render markdown in the comment. | `true` | + ### Title Modes diff --git a/src/components/comment.ts b/src/components/comment.ts index 6b74c13..77f639b 100644 --- a/src/components/comment.ts +++ b/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};` } diff --git a/src/components/message.ts b/src/components/message.ts index 8763a7a..99f1edc 100644 --- a/src/components/message.ts +++ b/src/components/message.ts @@ -12,16 +12,13 @@ export type MessageSide = typeof SIDES.LEFT | typeof SIDES.RIGHT | typeof SIDES. export class Message { - content: string; - side: MessageSide; participant: Participant; dialogueSettings: DialogueSettings; - constructor(content: string, side: MessageSide, dialogueSettings: DialogueSettings) { - this.content = content; + constructor(side: MessageSide, dialogueSettings: DialogueSettings) { this.side = side; this.dialogueSettings = dialogueSettings; @@ -37,17 +34,18 @@ export class Message { break; } - this.renderMessage(); } renderMessage() { - const messageEl = this.createMessageEl(); + return this.createMessageEl(); + } - if (this.titleShouldRender()) { - messageEl.createDiv({ cls: CLASSES.MESSAGE_TITLE, text: this.participant.title }); - } + renderContent(messageEl: HTMLElement, content?: string) { + return messageEl.createDiv({ cls: CLASSES.MESSAGE_CONTENT, text: content }); + } - messageEl.createDiv({ cls: CLASSES.MESSAGE_CONTENT, text: this.content }); + renderTitle(messageEl: HTMLElement, title?: string) { + return messageEl.createDiv({ cls: CLASSES.MESSAGE_TITLE, text: title }); } createMessageEl(): HTMLDivElement { diff --git a/src/constants/classes.ts b/src/constants/classes.ts index 2bd2648..806b094 100644 --- a/src/constants/classes.ts +++ b/src/constants/classes.ts @@ -13,4 +13,6 @@ export abstract class CLASSES { 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'; } diff --git a/src/dialogue.ts b/src/dialogue.ts index 8d58492..c741ee4 100644 --- a/src/dialogue.ts +++ b/src/dialogue.ts @@ -4,6 +4,7 @@ import { CLASSES } from './constants/classes'; import { Message, SIDES } from './components/message'; import { Delimiter } from './components/delimiter'; import { Comment } from './components/comment'; +import { App, Component, MarkdownPreviewView } from 'obsidian'; abstract class KEYWORDS { static readonly LEFT_PATTERN = /^l(?:eft)?(?:-(\d+))?:/i; @@ -12,6 +13,10 @@ abstract class KEYWORDS { static readonly TITLE_MODE = 'titleMode:'; static readonly MESSAGE_MAX_WIDTH = 'messageMaxWidth:'; static readonly COMMENT_MAX_WIDTH = 'commentMaxWidth:'; + static readonly CLEAN = 'clean:'; + static readonly RENDER_MARKDOWN_TITLE = 'renderMarkdownTitle:'; + static readonly RENDER_MARKDOWN_CONTENT = 'renderMarkdownContent:'; + static readonly RENDER_MARKDOWN_COMMENT = 'renderMarkdownComment:'; static readonly DELIMITER = /^-|delimiter/; static readonly COMMENT = '#'; static readonly MESSAGE_LEFT = '<'; @@ -31,6 +36,10 @@ export interface DialogueSettings { rightParticipant: Participant; centerParticipant: Participant; titleMode: DialogueTitleMode; + clean: boolean; + renderMarkdownTitle: boolean; + renderMarkdownContent: boolean; + renderMarkdownComment: boolean; messageMaxWidth: string; commentMaxWidth: string; participants: Map; @@ -38,13 +47,17 @@ export interface DialogueSettings { export class DialogueRenderer { + component: Component; + src: string; dialogueWrapperEl: HTMLElement; dialogueSettings: DialogueSettings; - constructor(src: string, parent: HTMLElement, settings: DialoguePluginSettings) { + constructor(component: Component, src: string, parent: HTMLElement, settings: DialoguePluginSettings) { + this.component = component; + this.src = src; this.dialogueWrapperEl = parent.createDiv({ cls: CLASSES.DIALOGUE_WRAPPER }); @@ -66,6 +79,10 @@ export class DialogueRenderer { renderedOnce: false, enforcedId: null, }, + clean: settings.defaultClean, + renderMarkdownTitle: settings.defaultRenderMarkdownTitle, + renderMarkdownContent: settings.defaultRenderMarkdownContent, + renderMarkdownComment: settings.defaultRenderMarkdownComment, titleMode: settings.defaultTitleMode, messageMaxWidth: settings.defaultMessageMaxWidth, commentMaxWidth: settings.defaultCommentMaxWidth, @@ -97,8 +114,15 @@ export class DialogueRenderer { .map(line => line.trim()) .filter(line => line.length > 0); + for (const line of lines) { + let message: Message | null = null; + + let comment: Comment | null = null; + + let content: string = ''; + if (KEYWORDS.LEFT_PATTERN.test(line)) { this.dialogueSettings.leftParticipant.title = line.split(':').splice(1).join(':').trim(); this.dialogueSettings.leftParticipant.renderedOnce = false; // reset this flag when a new title is set @@ -120,6 +144,18 @@ export class DialogueRenderer { this.dialogueSettings.titleMode = modeName as DialogueTitleMode; } } + else if (line.startsWith(KEYWORDS.CLEAN)) { + this.dialogueSettings.clean = line.substr(KEYWORDS.CLEAN.length).trim().toLowerCase() == 'true'; + } + else if (line.startsWith(KEYWORDS.RENDER_MARKDOWN_TITLE)) { + this.dialogueSettings.renderMarkdownTitle = line.substr(KEYWORDS.RENDER_MARKDOWN_TITLE.length).trim().toLowerCase() == 'true'; + } + else if (line.startsWith(KEYWORDS.RENDER_MARKDOWN_CONTENT)) { + this.dialogueSettings.renderMarkdownContent = line.substr(KEYWORDS.RENDER_MARKDOWN_CONTENT.length).trim().toLowerCase() == 'true'; + } + else if (line.startsWith(KEYWORDS.RENDER_MARKDOWN_COMMENT)) { + this.dialogueSettings.renderMarkdownComment = line.substr(KEYWORDS.RENDER_MARKDOWN_COMMENT.length).trim().toLowerCase() == 'true'; + } else if (line.startsWith(KEYWORDS.MESSAGE_MAX_WIDTH)) { this.dialogueSettings.messageMaxWidth = line.substr(KEYWORDS.MESSAGE_MAX_WIDTH.length).trim(); } @@ -130,29 +166,72 @@ export class DialogueRenderer { new Delimiter(this.dialogueSettings); } else if (line.startsWith(KEYWORDS.COMMENT)) { - const content = line.substr(KEYWORDS.COMMENT.length); + content = line.substr(KEYWORDS.COMMENT.length); - new Comment(content, this.dialogueSettings); + comment = new Comment(this.dialogueSettings); } else if (line.startsWith(KEYWORDS.MESSAGE_LEFT)) { - const content = line.substr(KEYWORDS.MESSAGE_LEFT.length).trim(); + content = line.substr(KEYWORDS.MESSAGE_LEFT.length).trim(); this.registerParticipant(this.dialogueSettings.leftParticipant.title); - new Message(content, SIDES.LEFT, this.dialogueSettings); + message = new Message(SIDES.LEFT, this.dialogueSettings); } else if (line.startsWith(KEYWORDS.MESSAGE_RIGHT)) { - const content = line.substr(KEYWORDS.MESSAGE_RIGHT.length).trim(); + content = line.substr(KEYWORDS.MESSAGE_RIGHT.length).trim(); this.registerParticipant(this.dialogueSettings.rightParticipant.title); - new Message(content, SIDES.RIGHT, this.dialogueSettings); + message = new Message(SIDES.RIGHT, this.dialogueSettings); } else if (line.startsWith(KEYWORDS.MESSAGE_CENTER)) { - const content = line.substr(KEYWORDS.MESSAGE_CENTER.length).trim(); + content = line.substr(KEYWORDS.MESSAGE_CENTER.length).trim(); this.registerParticipant(this.dialogueSettings.centerParticipant.title); - new Message(content, SIDES.CENTER, this.dialogueSettings); + message = new Message(SIDES.CENTER, this.dialogueSettings); + } else if (!this.dialogueSettings.clean) { + const unparsedEl = this.dialogueWrapperEl.createDiv({ cls: CLASSES.UNPARSED }); + this.renderMarkdown(line, unparsedEl, false) + } + + if (message != null) { + const msgEl = message.renderMessage(); + + if (message.titleShouldRender()) { + const titleEl = message.renderTitle( + msgEl, + this.dialogueSettings.renderMarkdownTitle ? undefined : message.participant.title + ); + + if (this.dialogueSettings.renderMarkdownTitle) { + this.renderMarkdown(message.participant.title, titleEl) + } + } + + const contentEl = message.renderContent( + msgEl, + this.dialogueSettings.renderMarkdownContent ? undefined : content + ); + + if (this.dialogueSettings.renderMarkdownContent) { + this.renderMarkdown(content, contentEl) + } + } + + if (comment != null) { + const cmtEl = comment.renderComment( + this.dialogueSettings.renderMarkdownComment ? undefined : content + ); + + if (this.dialogueSettings.renderMarkdownComment) { + this.renderMarkdown(content, cmtEl) + } } } } + renderMarkdown(content: string, el: HTMLElement, wrapper: boolean = true) { + const renderEl = wrapper ? el.createDiv({ cls: CLASSES.RENDER }) : el; + + MarkdownPreviewView.renderMarkdown(content, renderEl, this.src, this.component) + } + } diff --git a/src/main.ts b/src/main.ts index 7c73cf8..7cf8fd3 100644 --- a/src/main.ts +++ b/src/main.ts @@ -13,7 +13,7 @@ export default class DialoguePlugin extends Plugin { this.registerMarkdownCodeBlockProcessor( `dialogue`, (src, el, ctx) => { - new DialogueRenderer(src, el, this.settings); + new DialogueRenderer(this, src, el, this.settings); } ); diff --git a/src/settings.ts b/src/settings.ts index 338933f..703aa0e 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -6,6 +6,10 @@ export interface DialoguePluginSettings { defaultLeftTitle: string; defaultRightTitle: string; defaultCenterTitle: string; + defaultClean: boolean; + defaultRenderMarkdownContent: boolean; + defaultRenderMarkdownTitle: boolean; + defaultRenderMarkdownComment: boolean; defaultTitleMode: DialogueTitleMode; defaultMessageMaxWidth: string; defaultCommentMaxWidth: string; @@ -15,6 +19,10 @@ export const DEFAULT_SETTINGS: DialoguePluginSettings = { defaultLeftTitle: '', defaultRightTitle: '', defaultCenterTitle: '', + defaultClean: true, + defaultRenderMarkdownContent: true, + defaultRenderMarkdownComment: true, + defaultRenderMarkdownTitle: true, defaultTitleMode: DialogueTitleMode.First, defaultMessageMaxWidth: '60%', defaultCommentMaxWidth: '60%', @@ -120,5 +128,45 @@ export class DialogueSettingTab extends PluginSettingTab { this.plugin.settings.defaultCommentMaxWidth = value; await this.plugin.saveSettings(); })); + + new Setting(containerEl) + .setName('Default clean') + .setDesc('Default value for hiding unparsable text.') + .addToggle(toggle => + toggle.setValue(this.plugin.settings.defaultClean) + .onChange(async (value) => { + this.plugin.settings.defaultClean = value; + await this.plugin.saveSettings(); + })); + + new Setting(containerEl) + .setName('Default render markdown title') + .setDesc('Default value for rendering markdown in title.') + .addToggle(toggle => + toggle.setValue(this.plugin.settings.defaultRenderMarkdownTitle) + .onChange(async (value) => { + this.plugin.settings.defaultRenderMarkdownTitle = value; + await this.plugin.saveSettings(); + })); + + new Setting(containerEl) + .setName('Default render markdown content') + .setDesc('Default value for rendering markdown in content.') + .addToggle(toggle => + toggle.setValue(this.plugin.settings.defaultRenderMarkdownContent) + .onChange(async (value) => { + this.plugin.settings.defaultRenderMarkdownContent = value; + await this.plugin.saveSettings(); + })); + + new Setting(containerEl) + .setName('Default render markdown comment') + .setDesc('Default value for rendering markdown in comment.') + .addToggle(toggle => + toggle.setValue(this.plugin.settings.defaultRenderMarkdownComment) + .onChange(async (value) => { + this.plugin.settings.defaultRenderMarkdownComment = value; + await this.plugin.saveSettings(); + })); } } diff --git a/styles.css b/styles.css index b01bea3..d848246 100644 --- a/styles.css +++ b/styles.css @@ -60,3 +60,8 @@ margin: 20px 0; text-align: center; } + +.dialogue-plugin-render > *:first-child { + margin-top: 0; + margin-bottom: 0; +} \ No newline at end of file From b5e9621cc2dfa2b512163e3cd0c01026d7aaba5b Mon Sep 17 00:00:00 2001 From: Twiddly Date: Sat, 8 Jul 2023 21:10:01 +0000 Subject: [PATCH 5/8] feat: add footer and several footer parameters; --- README.md | 52 +++++++++++---- src/components/message.ts | 46 +++++++++++--- src/constants/classes.ts | 1 + src/dialogue.ts | 108 ++++++++++++++++++++++++++++---- src/settings.ts | 74 +++++++++++++++++++++- src/types/dialogueFooterMode.ts | 4 ++ styles.css | 7 +++ 7 files changed, 256 insertions(+), 36 deletions(-) create mode 100644 src/types/dialogueFooterMode.ts diff --git a/README.md b/README.md index ec774ef..ccb1e88 100644 --- a/README.md +++ b/README.md @@ -10,18 +10,23 @@ 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 | -| `center:` or `c:` | Name of the dialogue participant in the middle. | 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%` | -| `clean:` | Hide unparsable text. | `true` | -| `renderMarkdownTitle:` | Render markdown in the title. | `true` | -| `renderMarkdownContent:` | Render markdown in the content. | `true` | -| `renderMarkdownComment:` | Render markdown in the comment. | `true` | +| 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. | `disabled` | +| `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 @@ -32,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 @@ -44,6 +56,22 @@ The message in the dialogue must be prefixed with The message must be exactly one paragraph. +To add a footer to a dialogue, use `::` right after the dialogue message. + +```` +```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. + +leftFooter: default footer content for left side +< Nam egestas tristique felis, sed suscipit nunc commodo nec. +``` +```` + #### Example code ```` diff --git a/src/components/message.ts b/src/components/message.ts index 99f1edc..8719ef9 100644 --- a/src/components/message.ts +++ b/src/components/message.ts @@ -1,6 +1,7 @@ -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'; @@ -16,6 +17,10 @@ export class Message { participant: Participant; + footerContent: FooterContent + + element?: HTMLDivElement; + dialogueSettings: DialogueSettings; constructor(side: MessageSide, dialogueSettings: DialogueSettings) { @@ -23,29 +28,40 @@ export class Message { this.dialogueSettings = dialogueSettings; switch(this.side) { - case SIDES.LEFT: + case SIDES.LEFT: { this.participant = this.dialogueSettings.leftParticipant; + this.footerContent = this.dialogueSettings.leftFooter; break; - case SIDES.RIGHT: + } + case SIDES.RIGHT: { this.participant = this.dialogueSettings.rightParticipant; + this.footerContent = this.dialogueSettings.rightFooter; break; - case SIDES.CENTER: + } + case SIDES.CENTER: { this.participant = this.dialogueSettings.centerParticipant; + this.footerContent = this.dialogueSettings.centerFooter; break; + } } } renderMessage() { - return this.createMessageEl(); + this.element = this.createMessageEl(); + return this.element; } - renderContent(messageEl: HTMLElement, content?: string) { - return messageEl.createDiv({ cls: CLASSES.MESSAGE_CONTENT, text: content }); + renderContent(content?: string) { + return this.element.createDiv({ cls: CLASSES.MESSAGE_CONTENT, text: content }); } - renderTitle(messageEl: HTMLElement, title?: string) { - return messageEl.createDiv({ cls: CLASSES.MESSAGE_TITLE, text: title }); + renderTitle(title?: string) { + return this.element.createDiv({ cls: CLASSES.MESSAGE_TITLE, text: title }); + } + + renderFooter(content?: string): HTMLDivElement { + return this.element.createDiv({ cls: CLASSES.MESSAGE_FOOTER, text: content}); } createMessageEl(): HTMLDivElement { @@ -87,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; + } + } } diff --git a/src/constants/classes.ts b/src/constants/classes.ts index 806b094..536281d 100644 --- a/src/constants/classes.ts +++ b/src/constants/classes.ts @@ -8,6 +8,7 @@ export abstract class CLASSES { 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'; diff --git a/src/dialogue.ts b/src/dialogue.ts index c741ee4..dc7eac4 100644 --- a/src/dialogue.ts +++ b/src/dialogue.ts @@ -1,24 +1,31 @@ import { DialoguePluginSettings } from './settings'; import { DialogueTitleMode } from './types/dialogueTitleMode'; +import { DialogueFooterMode } from './types/dialogueFooterMode'; import { CLASSES } from './constants/classes'; import { Message, SIDES } from './components/message'; import { Delimiter } from './components/delimiter'; import { Comment } from './components/comment'; -import { App, Component, MarkdownPreviewView } from 'obsidian'; +import { Component, MarkdownPreviewView } from 'obsidian'; abstract class KEYWORDS { static readonly LEFT_PATTERN = /^l(?:eft)?(?:-(\d+))?:/i; static readonly RIGHT_PATTERN = /^r(?:ight)?(?:-(\d+))?:/i; static readonly CENTER_PATTERN = /^c(?:enter)?(?:-(\d+))?:/i; + static readonly LEFT_FOOTER_PATTERN = /^(lf|leftFooter):/i; + static readonly RIGHT_FOOTER_PATTERN = /^(rf|rightFooter):/i; + static readonly CENTER_FOOTER_PATTERN = /^(cf|centerFooter):/i; static readonly TITLE_MODE = 'titleMode:'; + static readonly FOOTER_MODE = 'footerMode:'; static readonly MESSAGE_MAX_WIDTH = 'messageMaxWidth:'; static readonly COMMENT_MAX_WIDTH = 'commentMaxWidth:'; static readonly CLEAN = 'clean:'; static readonly RENDER_MARKDOWN_TITLE = 'renderMarkdownTitle:'; static readonly RENDER_MARKDOWN_CONTENT = 'renderMarkdownContent:'; + static readonly RENDER_MARKDOWN_FOOTER = 'renderMarkdownFooter:'; static readonly RENDER_MARKDOWN_COMMENT = 'renderMarkdownComment:'; static readonly DELIMITER = /^-|delimiter/; static readonly COMMENT = '#'; + static readonly FOOTER = '::'; static readonly MESSAGE_LEFT = '<'; static readonly MESSAGE_RIGHT = '>'; static readonly MESSAGE_CENTER = '='; @@ -30,15 +37,24 @@ export interface Participant { enforcedId: string; } +export interface FooterContent { + content: string; +} + export interface DialogueSettings { parent: HTMLElement; leftParticipant: Participant; rightParticipant: Participant; centerParticipant: Participant; + leftFooter: FooterContent; + rightFooter: FooterContent; + centerFooter: FooterContent; titleMode: DialogueTitleMode; + footerMode: DialogueFooterMode; clean: boolean; renderMarkdownTitle: boolean; renderMarkdownContent: boolean; + renderMarkdownFooter: boolean; renderMarkdownComment: boolean; messageMaxWidth: string; commentMaxWidth: string; @@ -79,11 +95,22 @@ export class DialogueRenderer { renderedOnce: false, enforcedId: null, }, + leftFooter: { + content: settings.defaultLeftFooter, + }, + rightFooter: { + content: settings.defaultRightFooter, + }, + centerFooter: { + content: settings.defaultCenterFooter, + }, clean: settings.defaultClean, renderMarkdownTitle: settings.defaultRenderMarkdownTitle, renderMarkdownContent: settings.defaultRenderMarkdownContent, + renderMarkdownFooter: settings.defaultRenderMarkdownFooter, renderMarkdownComment: settings.defaultRenderMarkdownComment, titleMode: settings.defaultTitleMode, + footerMode: settings.defaultFooterMode, messageMaxWidth: settings.defaultMessageMaxWidth, commentMaxWidth: settings.defaultCommentMaxWidth, participants: new Map(), @@ -98,11 +125,11 @@ export class DialogueRenderer { } } - getEnforcedId(pattern: RegExp, line: string): string { + getEnforcedId(pattern: RegExp, line: string, group = 1): string { let enforcedId = null; const result = pattern.exec(line); if (result != null && result.length > 1) { - enforcedId = result[1]; + enforcedId = result[group]; } return enforcedId; @@ -114,13 +141,17 @@ export class DialogueRenderer { .map(line => line.trim()) .filter(line => line.length > 0); + let prevMessage: Message | null = null; - for (const line of lines) { + for (let i = 0; i < lines.length; i++) { + const line = lines[i]; let message: Message | null = null; let comment: Comment | null = null; + let customFooter = false; + let content: string = ''; if (KEYWORDS.LEFT_PATTERN.test(line)) { @@ -138,23 +169,41 @@ export class DialogueRenderer { this.dialogueSettings.centerParticipant.renderedOnce = false; // reset this flag when a new title is set this.dialogueSettings.centerParticipant.enforcedId = this.getEnforcedId(KEYWORDS.CENTER_PATTERN, line); } + else if (KEYWORDS.LEFT_FOOTER_PATTERN.test(line)) { + this.dialogueSettings.leftFooter.content = line.split(':').splice(1).join(':').trim(); + } + else if (KEYWORDS.RIGHT_FOOTER_PATTERN.test(line)) { + this.dialogueSettings.rightFooter.content = line.split(':').splice(1).join(':').trim(); + } + else if (KEYWORDS.CENTER_FOOTER_PATTERN.test(line)) { + this.dialogueSettings.centerFooter.content = line.split(':').splice(1).join(':').trim(); + } else if (line.startsWith(KEYWORDS.TITLE_MODE)) { const modeName = line.substr(KEYWORDS.TITLE_MODE.length).trim().toLowerCase(); - if (Object.values(DialogueTitleMode).some(mode => mode == modeName)) { + if (Object.values(DialogueTitleMode).some(mode => mode === modeName)) { this.dialogueSettings.titleMode = modeName as DialogueTitleMode; } } + else if (line.startsWith(KEYWORDS.FOOTER_MODE)) { + const modeName = line.substr(KEYWORDS.FOOTER_MODE.length).trim().toLowerCase(); + if (Object.values(DialogueFooterMode).some(mode => mode === modeName)) { + this.dialogueSettings.footerMode = modeName as DialogueFooterMode; + } + } else if (line.startsWith(KEYWORDS.CLEAN)) { - this.dialogueSettings.clean = line.substr(KEYWORDS.CLEAN.length).trim().toLowerCase() == 'true'; + this.dialogueSettings.clean = line.substr(KEYWORDS.CLEAN.length).trim().toLowerCase() === 'true'; } else if (line.startsWith(KEYWORDS.RENDER_MARKDOWN_TITLE)) { - this.dialogueSettings.renderMarkdownTitle = line.substr(KEYWORDS.RENDER_MARKDOWN_TITLE.length).trim().toLowerCase() == 'true'; + this.dialogueSettings.renderMarkdownTitle = line.substr(KEYWORDS.RENDER_MARKDOWN_TITLE.length).trim().toLowerCase() === 'true'; } else if (line.startsWith(KEYWORDS.RENDER_MARKDOWN_CONTENT)) { - this.dialogueSettings.renderMarkdownContent = line.substr(KEYWORDS.RENDER_MARKDOWN_CONTENT.length).trim().toLowerCase() == 'true'; + this.dialogueSettings.renderMarkdownContent = line.substr(KEYWORDS.RENDER_MARKDOWN_CONTENT.length).trim().toLowerCase() === 'true'; + } + else if (line.startsWith(KEYWORDS.RENDER_MARKDOWN_FOOTER)) { + this.dialogueSettings.renderMarkdownFooter = line.substr(KEYWORDS.RENDER_MARKDOWN_FOOTER.length).trim().toLowerCase() === 'true'; } else if (line.startsWith(KEYWORDS.RENDER_MARKDOWN_COMMENT)) { - this.dialogueSettings.renderMarkdownComment = line.substr(KEYWORDS.RENDER_MARKDOWN_COMMENT.length).trim().toLowerCase() == 'true'; + this.dialogueSettings.renderMarkdownComment = line.substr(KEYWORDS.RENDER_MARKDOWN_COMMENT.length).trim().toLowerCase() === 'true'; } else if (line.startsWith(KEYWORDS.MESSAGE_MAX_WIDTH)) { this.dialogueSettings.messageMaxWidth = line.substr(KEYWORDS.MESSAGE_MAX_WIDTH.length).trim(); @@ -187,17 +236,22 @@ export class DialogueRenderer { this.registerParticipant(this.dialogueSettings.centerParticipant.title); message = new Message(SIDES.CENTER, this.dialogueSettings); + } + else if (line.startsWith(KEYWORDS.FOOTER)) { + customFooter = true; + content = line.substr(KEYWORDS.FOOTER.length); } else if (!this.dialogueSettings.clean) { const unparsedEl = this.dialogueWrapperEl.createDiv({ cls: CLASSES.UNPARSED }); this.renderMarkdown(line, unparsedEl, false) } + // MESSAGE + if (message != null) { - const msgEl = message.renderMessage(); + message.renderMessage(); if (message.titleShouldRender()) { const titleEl = message.renderTitle( - msgEl, this.dialogueSettings.renderMarkdownTitle ? undefined : message.participant.title ); @@ -207,7 +261,6 @@ export class DialogueRenderer { } const contentEl = message.renderContent( - msgEl, this.dialogueSettings.renderMarkdownContent ? undefined : content ); @@ -216,6 +269,8 @@ export class DialogueRenderer { } } + // COMMENT + if (comment != null) { const cmtEl = comment.renderComment( this.dialogueSettings.renderMarkdownComment ? undefined : content @@ -225,6 +280,35 @@ export class DialogueRenderer { this.renderMarkdown(content, cmtEl) } } + + // FOOTER + + if (prevMessage !== null) { + this.renderMessageFooter(prevMessage, customFooter ? content : undefined); + } + + // resets prev message + prevMessage = message; + } + + // Set footer for last message + if (prevMessage !== null) { + this.renderMessageFooter(prevMessage); + } + } + + renderMessageFooter(message: Message, content?: string ) { + let footerContent = content; + if (footerContent === undefined && this.dialogueSettings.footerMode === DialogueFooterMode.All && message.defaultFooterShouldRender()) { + footerContent = message.footerContent.content; + } + + if (footerContent) { + const footerEl = message.renderFooter(this.dialogueSettings.renderMarkdownFooter ? undefined : footerContent); + + if (this.dialogueSettings.renderMarkdownFooter) { + this.renderMarkdown(footerContent, footerEl) + } } } diff --git a/src/settings.ts b/src/settings.ts index 703aa0e..a250911 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -1,16 +1,22 @@ import { App, Setting, PluginSettingTab } from 'obsidian'; import DialoguePlugin from './main'; import { DialogueTitleMode } from './types/dialogueTitleMode'; +import { DialogueFooterMode } from './types/dialogueFooterMode'; export interface DialoguePluginSettings { defaultLeftTitle: string; defaultRightTitle: string; defaultCenterTitle: string; + defaultLeftFooter: string; + defaultRightFooter: string; + defaultCenterFooter: string; defaultClean: boolean; - defaultRenderMarkdownContent: boolean; defaultRenderMarkdownTitle: boolean; + defaultRenderMarkdownContent: boolean; + defaultRenderMarkdownFooter: boolean; defaultRenderMarkdownComment: boolean; defaultTitleMode: DialogueTitleMode; + defaultFooterMode: DialogueFooterMode; defaultMessageMaxWidth: string; defaultCommentMaxWidth: string; } @@ -19,11 +25,16 @@ export const DEFAULT_SETTINGS: DialoguePluginSettings = { defaultLeftTitle: '', defaultRightTitle: '', defaultCenterTitle: '', + defaultLeftFooter: '', + defaultRightFooter: '', + defaultCenterFooter: '', defaultClean: true, + defaultRenderMarkdownTitle: true, defaultRenderMarkdownContent: true, + defaultRenderMarkdownFooter: true, defaultRenderMarkdownComment: true, - defaultRenderMarkdownTitle: true, defaultTitleMode: DialogueTitleMode.First, + defaultFooterMode: DialogueFooterMode.Disabled, defaultMessageMaxWidth: '60%', defaultCommentMaxWidth: '60%', } @@ -106,6 +117,55 @@ export class DialogueSettingTab extends PluginSettingTab { await this.plugin.saveSettings(); }); }); + + new Setting(containerEl) + .setName('Default left footer') + .setDesc('Default value for left footer in all dialogues.') + .addText(text => + text.setPlaceholder('Enter default left footer') + .setValue(this.plugin.settings.defaultLeftFooter) + .onChange(async (value) => { + this.plugin.settings.defaultLeftFooter = value; + await this.plugin.saveSettings(); + })); + + new Setting(containerEl) + .setName('Default right footer') + .setDesc('Default value for right footer in all dialogues.') + .addText(text => + text.setPlaceholder('Enter default right footer') + .setValue(this.plugin.settings.defaultRightFooter) + .onChange(async (value) => { + this.plugin.settings.defaultRightFooter = value; + await this.plugin.saveSettings(); + })); + + new Setting(containerEl) + .setName('Default center footer') + .setDesc('Default value for center footer in all dialogues.') + .addText(text => + text.setPlaceholder('Enter default center footer') + .setValue(this.plugin.settings.defaultCenterFooter) + .onChange(async (value) => { + this.plugin.settings.defaultCenterFooter = value; + await this.plugin.saveSettings(); + })); + + new Setting(containerEl) + .setName('Default footer mode') + .setDesc('Default footer mode in all dialogues.') + .addDropdown(cb => { + Object.values(DialogueFooterMode).forEach(footerMode => { + const mode = footerMode.toString(); + cb.addOption(mode, mode.charAt(0).toUpperCase() + mode.slice(1)); + }); + + cb.setValue(this.plugin.settings.defaultFooterMode) + .onChange(async (value) => { + this.plugin.settings.defaultFooterMode = value as DialogueFooterMode; + await this.plugin.saveSettings(); + }); + }); new Setting(containerEl) .setName('Default max message width') @@ -159,6 +219,16 @@ export class DialogueSettingTab extends PluginSettingTab { await this.plugin.saveSettings(); })); + new Setting(containerEl) + .setName('Default render markdown footer') + .setDesc('Default value for rendering markdown in footer.') + .addToggle(toggle => + toggle.setValue(this.plugin.settings.defaultRenderMarkdownFooter) + .onChange(async (value) => { + this.plugin.settings.defaultRenderMarkdownFooter = value; + await this.plugin.saveSettings(); + })); + new Setting(containerEl) .setName('Default render markdown comment') .setDesc('Default value for rendering markdown in comment.') diff --git a/src/types/dialogueFooterMode.ts b/src/types/dialogueFooterMode.ts new file mode 100644 index 0000000..99ce72d --- /dev/null +++ b/src/types/dialogueFooterMode.ts @@ -0,0 +1,4 @@ +export enum DialogueFooterMode { + Disabled = 'disabled', + All = 'all', +} diff --git a/styles.css b/styles.css index d848246..cbcc049 100644 --- a/styles.css +++ b/styles.css @@ -35,6 +35,13 @@ padding: 5px 10px; } +.dialogue-plugin-message-footer { + padding: 5px 10px; + font-weight: lighter; + font-size: smaller; + background-color: rgba(0, 0, 0, 0.1); +} + .dialogue-plugin-delimiter-wrapper { justify-content: center; } From 8b8f20688b6d511735a79f14f601402f81e6a34b Mon Sep 17 00:00:00 2001 From: Twiddly Date: Sat, 8 Jul 2023 21:16:54 +0000 Subject: [PATCH 6/8] update manifest; --- README.md | 3 ++- manifest-beta.json | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index ccb1e88..35b0ede 100644 --- a/README.md +++ b/README.md @@ -56,7 +56,7 @@ The message in the dialogue must be prefixed with The message must be exactly one paragraph. -To add a footer to a dialogue, use `::` right after the dialogue message. +To add a footer to a dialogue, use the prefix `::` after the dialogue. ```` ```dialogue @@ -67,6 +67,7 @@ To add a footer to a dialogue, use `::` right after the dialogue message. :: 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. ``` diff --git a/manifest-beta.json b/manifest-beta.json index d2f8f02..2601db7 100644 --- a/manifest-beta.json +++ b/manifest-beta.json @@ -1,7 +1,7 @@ { "id": "obsidian-dialogue-plugin", "name": "Dialogue", - "version": "1.1.0-pre1", + "version": "1.1.0", "minAppVersion": "0.12.0", "description": "Create dialogues in Markdown.", "author": "Twiddly", From 7201e8568c72234f87becf73134068467a17a603 Mon Sep 17 00:00:00 2001 From: Twiddly Date: Sat, 8 Jul 2023 21:23:10 +0000 Subject: [PATCH 7/8] fix: make all option for footer mode default --- src/settings.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/settings.ts b/src/settings.ts index a250911..3bbc53c 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -34,7 +34,7 @@ export const DEFAULT_SETTINGS: DialoguePluginSettings = { defaultRenderMarkdownFooter: true, defaultRenderMarkdownComment: true, defaultTitleMode: DialogueTitleMode.First, - defaultFooterMode: DialogueFooterMode.Disabled, + defaultFooterMode: DialogueFooterMode.All, defaultMessageMaxWidth: '60%', defaultCommentMaxWidth: '60%', } From 32fc29e1ac8c3fd0f96d795621d66158443f8901 Mon Sep 17 00:00:00 2001 From: Twiddly Date: Sat, 8 Jul 2023 21:49:49 +0000 Subject: [PATCH 8/8] fix: make all option for footer mode default --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 35b0ede..093f7fb 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ Parameters can be set using commands inside the dialogue. All available paramete | `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. | `disabled` | +| `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` |