fix #35 + codemirror experiments

Author: mProjectsCode

exampleVault/Input Fields/Editor.md

@@ -1,5 +1,5 @@
 ---
-editor: |--
+editor: |-
   test
 
   **test**

exampleVault/Input Fields/Image Suggester.md

@@ -1,7 +1,4 @@
 ---
-image: Other/Images/img_butterfly.webp
----
----
 image: Other/Images/img_flower.webp
 ---
 

package-lock.json

@@ -20,6 +20,7 @@
 		"@types/node": "^16.11.6",
 		"@typescript-eslint/eslint-plugin": "^5.30.0",
 		"@typescript-eslint/parser": "^5.30.0",
+		"@codemirror/view": "^6.7.2",
 		"builtin-modules": "^3.3.0",
 		"esbuild": "^0.14.47",
 		"esbuild-plugin-copy-watch": "^0.0.7",

package.json

@@ -0,0 +1,29 @@
+import { Decoration, DecorationSet, EditorView, PluginSpec, PluginValue, ViewPlugin, ViewUpdate } from '@codemirror/view';
+import { FrontmatterWidget } from './FrontmatterWidget';
+
+class CmPlugin implements PluginValue {
+	decorations: DecorationSet;
+
+	constructor(view: EditorView) {
+		this.decorations = this.buildDecorations(view);
+		console.log(view);
+	}
+
+	public update(update: ViewUpdate): void {}
+
+	public destroy(): void {}
+
+	buildDecorations(view: EditorView): DecorationSet {
+		const widgets: Decoration[] = [];
+
+		widgets.push(Decoration.widget({ widget: new FrontmatterWidget() }));
+
+		return Decoration.set(widgets.map(x => x.range(0)));
+	}
+}
+
+const pluginSpec: PluginSpec<CmPlugin> = {
+	decorations: (value: CmPlugin) => value.decorations,
+};
+
+export const cmPlugin = ViewPlugin.fromClass(CmPlugin, pluginSpec);

src/frontmatterDisplay/CmPlugin.ts

@@ -0,0 +1,7 @@
+<script lang="ts">
+	export let frontmatter: Record<string, any>;
+</script>
+
+<div class="meta-bind-plugin-card">
+
+</div>

src/frontmatterDisplay/FrontmatterDisplay.svelte

@@ -0,0 +1,17 @@
+import { EditorView, WidgetType } from '@codemirror/view';
+import FrontmatterDisplay from './FrontmatterDisplay.svelte';
+
+export class FrontmatterWidget extends WidgetType {
+	toDOM(view: EditorView): HTMLElement {
+		const el = document.documentElement.createDiv();
+
+		new FrontmatterDisplay({
+			target: el,
+			props: {
+				frontmatter: {},
+			},
+		});
+
+		return el;
+	}
+}

src/frontmatterDisplay/FrontmatterWidget.ts

@@ -1,14 +1,65 @@
 import { moment } from 'obsidian';
+import { mod } from '../../utils/Utils';
 
 const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 
+export interface Weekday {
+	index: number;
+	name: string;
+	shortName: string;
+}
+
+export const weekdays: Weekday[] = [
+	{
+		index: 0,
+		name: 'Sunday',
+		shortName: 'Su',
+	},
+	{
+		index: 1,
+		name: 'Monday',
+		shortName: 'Mo',
+	},
+	{
+		index: 2,
+		name: 'Tuesday',
+		shortName: 'Tu',
+	},
+	{
+		index: 3,
+		name: 'Wednesday',
+		shortName: 'We',
+	},
+	{
+		index: 4,
+		name: 'Thursday',
+		shortName: 'Th',
+	},
+	{
+		index: 5,
+		name: 'Friday',
+		shortName: 'Fr',
+	},
+	{
+		index: 6,
+		name: 'Saturday',
+		shortName: 'Sa',
+	},
+];
+
+export let firstWeekday: Weekday = weekdays[1];
+
+export function setFirstWeekday(w: Weekday) {
+	firstWeekday = w;
+}
+
 export function getMonthName(index: number): string {
 	return monthNames[index];
 }
 
 export function getDateRows(monthIndex: number, year: number): number[] {
 	const days: number = moment(new Date(year, monthIndex)).daysInMonth(); // amount of days in month
-	let rows: number[] = new Array(42).fill(undefined); // empty 42 long array
+	let rows: number[] = new Array(42).fill(undefined); // empty 42 long array (28 + 7 + 7)
 	const startIndex: number = getWeekDay(new Date(year, monthIndex, 1)); // index offset based on weekday of first day in month
 
 	for (let i = 0; i < days; i++) {
@@ -23,12 +74,22 @@ export function getDateRows(monthIndex: number, year: number): number[] {
 
 // first day of the week is monday where I live
 export function getWeekDay(date: Date): number {
-	return date.getDay() === 0 ? 6 : date.getDay() - 1;
+	return mod(date.getDay() - firstWeekday.index, 7);
 }
 
 // first day of the week is monday where I live
 export function getWeekDays(): string[] {
-	return ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+	const sortedWeekdays: Weekday[] = weekdays
+		.map(x => ({
+			index: mod(x.index - firstWeekday.index, 7),
+			name: x.name,
+			shortName: x.shortName,
+		}))
+		.sort((a, b) => {
+			return a.index - b.index;
+		});
+	console.log(sortedWeekdays);
+	return sortedWeekdays.map(x => x.shortName);
 }
 
 export function uuid(): () => number {

src/inputFields/DatePicker/DatePickerInputSvelteHelpers.ts

@@ -9,6 +9,9 @@ import { MetaBindBindTargetError } from './utils/MetaBindErrors';
 import { API } from './API';
 import { ScriptMarkdownRenderChild } from './ScriptMarkdownRenderChild';
 import { plugins } from 'pretty-format';
+import { Extension } from '@codemirror/state';
+import { cmPlugin } from './frontmatterDisplay/CmPlugin';
+import { setFirstWeekday } from './inputFields/DatePicker/DatePickerInputSvelteHelpers';
 
 export default class MetaBindPlugin extends Plugin {
 	// @ts-ignore defined in `onload`
@@ -23,6 +26,9 @@ export default class MetaBindPlugin extends Plugin {
 	// @ts-ignore defined in `onload`
 	api: API;
 
+	// @ts-ignore defined in `onload`
+	editorExtensions: Extension[];
+
 	async onload(): Promise<void> {
 		console.log(`meta-bind | Main >> load`);
 
@@ -32,6 +38,7 @@ export default class MetaBindPlugin extends Plugin {
 
 		DateParser.dateFormat = this.settings.preferredDateFormat;
 		this.api.parser.parseTemplates(this.settings.inputTemplates);
+		setFirstWeekday(this.settings.firstWeekday);
 
 		this.activeMarkdownInputFields = [];
 		this.metadataManager = new MetadataManager(this);
@@ -63,72 +70,11 @@ export default class MetaBindPlugin extends Plugin {
 			ctx.addChild(new ScriptMarkdownRenderChild(el, source, ctx, this));
 		});
 
+		// this.registerEditorExtension(cmPlugin);
+
 		this.addSettingTab(new MetaBindSettingTab(this.app, this));
 	}
 
-	/**
-	 * Accessible function for building an input field.
-	 *
-	 * @param {string|InputFieldDeclaration} declaration The input field declaration as a string or object.
-	 * @param {string} sourcePath The path of the file the element will be inserted into.
-	 * @param {HTMLElement} container The container element for the input element.
-	 * @param {RenderChildType} renderType Inline or Code Block.
-	 *
-	 * @returns The render child produced.
-	 */
-	// buildInputFieldMarkdownRenderChild(
-	// 	declaration: string | InputFieldDeclaration,
-	// 	sourcePath: string,
-	// 	container: HTMLElement,
-	// 	renderType: InputFieldMarkdownRenderChildType = InputFieldMarkdownRenderChildType.INLINE_CODE_BLOCK
-	// ): InputFieldMarkdownRenderChild {
-	// 	if (typeof declaration === 'string') {
-	// 		declaration = InputFieldDeclarationParser.parseString(declaration);
-	// 	} else {
-	// 		declaration = InputFieldDeclarationParser.parseDeclaration(declaration);
-	// 	}
-	//
-	// 	return new InputFieldMarkdownRenderChild(container, renderType, declaration, this, sourcePath, crypto.randomUUID());
-	// }
-
-	/**
-	 * Helper method to build a declaration from some initial data or a string.
-	 *
-	 * @param {string | InputFieldDeclaration | {}} declarationData The base declaration data or a string to parse for it. Can also be an empty object with the other arguments provided to fill it.
-	 * @param {Record<InputFieldArgumentType, string> | {} | undefined} inputFieldArguments (Optional) The input field arguments, indexed by argument name.
-	 * @param {InputFieldType | undefined} inputFieldType (Optional) The input field type if not provided in the base object.
-	 * @param {boolean | undefined} isBound (Optional) If the field should try to be bound to a bindTarget.
-	 * @param {string | undefined} bindTarget (Optional) The bind target of the field.
-	 * @param {string | undefined} templateName (Optional) A template to use.
-	 *
-	 * @returns A constructed InputFieldDeclaration.
-	 */
-	// buildDeclaration(
-	// 	declarationData: string | InputFieldDeclaration | {},
-	// 	inputFieldArguments?: Record<InputFieldArgumentType, string> | {},
-	// 	inputFieldType?: InputFieldType,
-	// 	isBound?: boolean,
-	// 	bindTarget?: string,
-	// 	templateName?: string
-	// ): InputFieldDeclaration {
-	// 	if (typeof declarationData === 'string') {
-	// 		return InputFieldDeclarationParser.parseString(declarationData);
-	// 	} else {
-	// 		const declarationBase = declarationData as InputFieldDeclaration;
-	// 		declarationBase.inputFieldType = inputFieldType ?? declarationBase.inputFieldType ?? InputFieldType.INVALID;
-	// 		declarationBase.isBound = isBound ?? declarationBase.isBound ?? false;
-	// 		declarationBase.bindTarget = bindTarget ?? declarationBase.bindTarget ?? undefined;
-	//
-	// 		// if the input field is bound should be determined by `isBound`
-	// 		// `isBound` is true, `bindTarget` must be set
-	// 		if (declarationBase.isBound && !declarationBase.bindTarget) {
-	// 			throw new MetaBindBindTargetError('input field declaration is bound but bind target is undefined');
-	// 		}
-	//
-	// 		return InputFieldDeclarationParser.parseDeclaration(declarationBase, inputFieldArguments, templateName);
-	// 	}
-	// }
-
 	onunload(): void {
 		console.log(`meta-bind | Main >> unload`);
 		for (const activeMarkdownInputField of this.activeMarkdownInputFields) {
@@ -179,6 +125,7 @@ export default class MetaBindPlugin extends Plugin {
 
 		DateParser.dateFormat = this.settings.preferredDateFormat;
 		this.api.parser.parseTemplates(this.settings.inputTemplates);
+		setFirstWeekday(this.settings.firstWeekday);
 		await this.saveData(this.settings);
 	}
 }

src/main.ts

@@ -230,7 +230,6 @@ export class InputFieldDeclarationParser {
 	}
 
 	parseArguments(inputFieldType: InputFieldType, inputFieldArguments?: { type: InputFieldArgumentType; value: string }[] | undefined): InputFieldArgumentContainer {
-		console.log('-> inputFieldArguments', inputFieldArguments);
 		const argumentContainer: InputFieldArgumentContainer = new InputFieldArgumentContainer();
 
 		if (inputFieldArguments) {