markdown builder list and clear all messages button

Author: mProjectsCode

README.md

@@ -4,8 +4,8 @@ This plugin for Obsidian allows you to run JavaScript from within your notes usi
 
 ## Usage
 
-Start by creating a code block with the `js-engine` plugin. 
-Inside the code block you can write what ever JavaScript code that you want. 
+Start by creating a code block with the `js-engine` plugin.
+Inside the code block you can write what ever JavaScript code that you want.
 The plugin will run the JavaScript and render the returned value in place of the code block.
 
 ## API Docs

exampleVault/Test.md

@@ -42,7 +42,26 @@ blockquote.createParagraph("This is another test paragraph.")
 callout.createTable(["Column 1", "Column 2"], [
 	["data 1", "**data 2**"],
 	["data 3", "data 4"],
-]);
+])
+
+callout.addText('And now a list.')
+
+let list = callout.createList(false)
+list.addText('test')
+list.createTable(["Column 1", "Column 2"], [
+	["data 1", "**data 2**"],
+	["data 3", "data 4"],
+])
+
+let sublist = list.createList(true)
+sublist.addText('sub list')
+sublist.addCode('this is some code')
+
+list.addText('another Element')
+
+let sublist2 = list.createList(false)
+sublist2.addText('another sub list')
+
 
 return markdownBuilder
 ```
@@ -166,5 +185,5 @@ return reactive;
 const el = container.createEl("button", {text: "Click me"})
 el.addEventListener("click", () => {
 	new obsidian.Notice("Hello")
-}); 
-```
+});
+```

jsEngine/api/MarkdownAPI.ts

@@ -6,6 +6,7 @@ import {
 	CodeBlockElement,
 	CodeElement,
 	HeadingElement,
+	ListElement,
 	ParagraphElement,
 	TableElement,
 	TextElement,
@@ -141,4 +142,13 @@ export class MarkdownAPI {
 	public createTable(header: string[], body: string[][]): TableElement {
 		return new TableElement(header, body);
 	}
+
+	/**
+	 * Creates a new markdown list element.
+	 *
+	 * @param ordered whether the list should be ordered or not (use 1. or -)
+	 */
+	createList(ordered: boolean): ListElement {
+		return new ListElement(ordered);
+	}
 }

jsEngine/api/markdown/AbstractMarkdownElementContainer.ts

@@ -102,6 +102,12 @@ export abstract class AbstractMarkdownElementContainer extends AbstractMarkdownE
 		this.addElement(element);
 		return element;
 	}
+
+	createList(ordered: boolean): ListElement {
+		const element = new ListElement(ordered);
+		this.addElement(element);
+		return element;
+	}
 }
 
 // --------------------------------------------
@@ -166,6 +172,85 @@ export class CodeElement extends AbstractMarkdownLiteral {
 	}
 }
 
+/**
+ * Represents a markdown table.
+ */
+export class TableElement extends AbstractMarkdownLiteral {
+	header: string[];
+	body: string[][];
+
+	constructor(header: string[], body: string[][]) {
+		super();
+
+		this.header = header;
+		this.body = body;
+	}
+
+	public toString(): string {
+		const rows = this.body.length;
+		if (rows === 0) {
+			return '';
+		}
+
+		const columns = this.header.length;
+		if (columns === 0) {
+			return '';
+		}
+		for (const row of this.body) {
+			if (row.length !== columns) {
+				throw new Error('Table rows are do not contain the same number of columns.');
+			}
+		}
+
+		const longestStringInColumns: number[] = [];
+
+		for (let i = 0; i < columns; i++) {
+			let longestStringInColumn = 0;
+
+			if (this.header[i].length > longestStringInColumn) {
+				longestStringInColumn = this.header[i].length;
+			}
+			for (const row of this.body) {
+				if (row[i].length > longestStringInColumn) {
+					longestStringInColumn = row[i].length;
+				}
+			}
+
+			longestStringInColumns.push(longestStringInColumn);
+		}
+
+		let table = '';
+
+		// build header
+		table += '|';
+		for (let j = 0; j < columns; j++) {
+			let element = this.header[j];
+			element += ' '.repeat(longestStringInColumns[j] - element.length);
+			table += ' ' + element + ' |';
+		}
+		table += '\n';
+		// build divider
+		table += '|';
+		for (let j = 0; j < columns; j++) {
+			table += ' ' + '-'.repeat(longestStringInColumns[j]) + ' |';
+		}
+		table += '\n';
+
+		// build body
+		for (let i = 0; i < rows; i++) {
+			table += '|';
+			for (let j = 0; j < columns; j++) {
+				let element = this.body[i][j];
+				element += ' '.repeat(longestStringInColumns[j] - element.length);
+				table += ' ' + element + ' |';
+			}
+			table += '\n';
+		}
+
+		return table;
+	}
+}
+
 // --------------------------------------------
 // NON LITERALS
 // --------------------------------------------
@@ -271,85 +356,36 @@ export class CalloutElement extends AbstractMarkdownElementContainer {
 	}
 }
 
-/**
- * Represents a markdown table.
- */
-export class TableElement extends AbstractMarkdownElementContainer {
-	header: string[];
-	body: string[][];
+export class ListElement extends AbstractMarkdownElementContainer {
+	ordered: boolean;
 
-	constructor(header: string[], body: string[][]) {
+	constructor(ordered: boolean) {
 		super();
 
-		this.header = header;
-		this.body = body;
+		this.ordered = ordered;
 	}
 
 	public allowElement(_: AbstractMarkdownElement): boolean {
 		return true;
 	}
 
-	public toString(): string {
-		const rows = this.body.length;
-		if (rows === 0) {
-			return '';
-		}
-
-		const columns = this.header.length;
-		if (columns === 0) {
-			return '';
-		}
-		for (const row of this.body) {
-			if (row.length !== columns) {
-				throw new Error('Table rows are do not contain the same number of columns.');
-			}
+	private getPrefix(i: number): string {
+		if (this.ordered) {
+			return `${i + 1}. `;
+		} else {
+			return `- `;
 		}
+	}
 
-		const longestStringInColumns: number[] = [];
-
-		for (let i = 0; i < columns; i++) {
-			let longestStringInColumn = 0;
-
-			if (this.header[i].length > longestStringInColumn) {
-				longestStringInColumn = this.header[i].length;
-			}
-			for (const row of this.body) {
-				if (row[i].length > longestStringInColumn) {
-					longestStringInColumn = row[i].length;
+	public toString(): string {
+		return this.markdownElements
+			.map((x, i) => {
+				if (x instanceof ListElement) {
+					return `\t${x.toString().replaceAll('\n', '\n\t')}`;
 				}
-			}
-
-			longestStringInColumns.push(longestStringInColumn);
-		}
-
-		let table = '';
 
-		// build header
-		table += '|';
-		for (let j = 0; j < columns; j++) {
-			let element = this.header[j];
-			element += ' '.repeat(longestStringInColumns[j] - element.length);
-			table += ' ' + element + ' |';
-		}
-		table += '\n';
-		// build divider
-		table += '|';
-		for (let j = 0; j < columns; j++) {
-			table += ' ' + '-'.repeat(longestStringInColumns[j]) + ' |';
-		}
-		table += '\n';
-
-		// build body
-		for (let i = 0; i < rows; i++) {
-			table += '|';
-			for (let j = 0; j < columns; j++) {
-				let element = this.body[i][j];
-				element += ' '.repeat(longestStringInColumns[j] - element.length);
-				table += ' ' + element + ' |';
-			}
-			table += '\n';
-		}
-
-		return table;
+				return `${this.getPrefix(i)}${x.toString().replaceAll('\n', '\n\t')}`;
+			})
+			.join('\n');
 	}
 }

jsEngine/messages/Button.svelte

@@ -0,0 +1,44 @@
+<!-- Inspired by https://github.com/marcusolsson/obsidian-svelte -->
+
+<script lang="ts">
+	import { ButtonStyleType } from '../utils/Util';
+
+	export let variant: ButtonStyleType = ButtonStyleType.DEFAULT;
+	export let disabled: boolean = false;
+	export let tooltip: string = '';
+</script>
+
+<button
+	class:mod-cta={variant === 'primary'}
+	class:mod-warning={variant === 'destructive'}
+	class:mod-plain={variant === 'plain'}
+	class:disabled={disabled}
+	aria-label={tooltip}
+	on:click
+	disabled={disabled}
+>
+	<slot />
+</button>
+
+<style>
+	button {
+		/* Add a gap between text and icons. */
+		gap: var(--size-4-1);
+	}
+
+	.mod-plain {
+		background: none;
+		box-shadow: none;
+		border: none;
+
+		color: var(--text-muted);
+	}
+
+	.mod-plain:hover {
+		color: var(--text-normal);
+	}
+
+	.disabled {
+		opacity: 0.6;
+	}
+</style>

jsEngine/messages/MessageDisplayComponent.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
 	import { MessageManager } from './MessageManager';
 	import MessageComponent from './MessageComponent.svelte';
+	import { Button } from 'obsidian-svelte';
 
 	export let messageManager: MessageManager;
 	let messages = messageManager.messages;
 </script>
 
 <h2>Messages</h2>
 
+<Button variant="destructive" on:click={() => messageManager.removeAllMessages()}>Clear All Messages</Button>
+
 <div>
 	{#each $messages as [id, message]}
 		<MessageComponent bind:messageWrapper={message} messageManager={messageManager}></MessageComponent>

jsEngine/messages/MessageManager.ts

@@ -117,6 +117,11 @@ export class MessageManager {
 		this.messages.notify();
 	}
 
+	removeAllMessages(): void {
+		this.messages.get().clear();
+		this.messages.notify();
+	}
+
 	private updateStatusBarItem(): void {
 		if (!this.statusBarItem) {
 			return;

jsEngine/utils/Util.ts

@@ -1,3 +1,10 @@
 export function iteratorToArray<T>(iterator: Iterable<T>): T[] {
 	return [...iterator];
 }
+
+export enum ButtonStyleType {
+	DEFAULT = 'default',
+	PRIMARY = 'primary',
+	DESTRUCTIVE = 'destructive',
+	PLAIN = 'plain',
+}