editor input

Author: mProjectsCode

exampleVault/examples fg.md

@@ -3,7 +3,7 @@ rating: 31
 title: test title test test
 completed: false
 toggle1: true
-slider1: 9
+slider1: 71
 slider2: 8
 text1: Testa
 text_area1: test test test
@@ -13,9 +13,20 @@ nested:
   object: dfgdf
 multi_select:
   - option b
-  - option d
 time1: 10:17
 suggest: test
+editor: |-
+  test **test**
+  [[other note]]
+
+  ## test
+
+  > [!INFO]
+  > this is an info
+
+  `INPUT[slider(addLabels):slider1]`
+
+  `$= dv.current().rating`
 ---
 
 ## Components
@@ -84,6 +95,9 @@ option(option d)
 ### Suggester
 `INPUT[suggester(suggestOption(test), suggestOptionQuery(#test)):suggest]`
 
+### Editor
+`INPUT[editor:editor]`
+
 ## In callouts
 > quote
 > `INPUT[slider(addLabels, minValue(1), maxValue(10)):slider1]`

src/inputFields/Editor/EditorInput.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import {MarkdownRenderer} from 'obsidian';
+	import {EditorInputField} from './EditorInputField';
+	import {onMount} from 'svelte';
+
+	export let onValueChange: (value: any) => void;
+	export let editorInput: EditorInputField;
+
+	let value: string;
+	let focus: boolean = false;
+	let renderEl: HTMLElement;
+	let inputEl: HTMLElement;
+
+	$: onValueChange(value) && render();
+
+	onMount(() => {
+		renderEl.toggleVisibility(true);
+		inputEl.toggleVisibility(false);
+	});
+
+	export function updateValue(v: string): void {
+		value = v;
+		renderEl.innerHTML = '';
+		render();
+	}
+
+	function render() {
+		MarkdownRenderer.renderMarkdown(value, renderEl, editorInput.inputFieldMarkdownRenderChild.filePath, editorInput.inputFieldMarkdownRenderChild);
+	}
+
+	function focusOut(event: MouseEvent) {
+		renderEl.toggleVisibility(true);
+		inputEl.toggleVisibility(false);
+		renderEl.innerHTML = '';
+		render();
+	}
+
+	function focusIn(event: MouseEvent) {
+		console.log('focus in');
+		renderEl.toggleVisibility(false);
+		inputEl.toggleVisibility(true);
+		inputEl.focus();
+	}
+
+	function log() {
+		console.log('focus');
+	}
+</script>
+
+<style>
+	.editor-input {
+		width:    100%;
+		height:   500px;
+		padding:  0;
+		position: relative;
+	}
+
+	.editor-input > textarea {
+		background: var(--background-secondary);
+		border:     none;
+		padding:    var(--size-4-4) var(--size-4-8);
+		margin:     0;
+		position:   absolute;
+		inset:      0;
+		resize:     none;
+	}
+
+	.editor-input > div {
+		padding:  var(--size-4-4) var(--size-4-8);
+		position: absolute;
+		inset:    0;
+	}
+</style>
+
+<div class="editor-input card" on:click={(event) => focusIn(event)}>
+	<textarea bind:this={inputEl} bind:value={value} on:focusout={(event) => focusOut(event)}></textarea>
+	<div bind:this={renderEl}></div>
+</div>
+

src/inputFields/Editor/EditorInputField.ts

@@ -0,0 +1,59 @@
+import { AbstractInputField } from '../AbstractInputField';
+import EditorInput from './EditorInput.svelte';
+import { InputFieldMarkdownRenderChild } from '../../InputFieldMarkdownRenderChild';
+import { MetaBindInternalError } from '../../utils/MetaBindErrors';
+
+export class EditorInputField extends AbstractInputField {
+	container: HTMLDivElement | undefined;
+	component: EditorInput | undefined;
+	value: string;
+
+	constructor(inputFieldMarkdownRenderChild: InputFieldMarkdownRenderChild, onValueChange: (value: any) => void | Promise<void>) {
+		super(inputFieldMarkdownRenderChild, onValueChange);
+
+		this.value = '';
+	}
+
+	getValue(): string {
+		return this.value;
+	}
+
+	setValue(value: any): void {
+		this.value = value;
+		this.component?.updateValue(value);
+	}
+
+	isEqualValue(value: any): boolean {
+		return this.value == value;
+	}
+
+	getDefaultValue(): any {
+		return '';
+	}
+
+	getHtmlElement(): HTMLElement {
+		if (!this.container) {
+			throw new MetaBindInternalError('');
+		}
+
+		return this.container;
+	}
+
+	render(container: HTMLDivElement): void {
+		console.debug(`meta-bind | EditorInputField >> render ${this.inputFieldMarkdownRenderChild.uuid}`);
+
+		this.container = container;
+
+		this.value = this.inputFieldMarkdownRenderChild.getInitialValue();
+
+		this.component = new EditorInput({
+			target: container,
+			props: {
+				onValueChange: this.onValueChange.bind(this),
+				editorInput: this,
+			},
+		});
+
+		this.component.updateValue(this.value);
+	}
+}

src/inputFields/InputFieldFactory.ts

@@ -13,6 +13,7 @@ import { DatePickerInputField } from './DatePicker/DatePickerInputField';
 import { NumberInputField } from './NumberInputField';
 import { SuggestInputField } from './Suggest/SuggestInputField';
 import { MetaBindParsingError } from '../utils/MetaBindErrors';
+import { EditorInputField } from './Editor/EditorInputField';
 
 export class InputFieldFactory {
 	static allowCodeBlockMap: Record<string, { codeBlock: boolean; inlineCodeBlock: boolean }> = {
@@ -60,6 +61,10 @@ export class InputFieldFactory {
 			codeBlock: SuggestInputField.allowCodeBlock,
 			inlineCodeBlock: SuggestInputField.allowInlineCodeBlock,
 		},
+		[InputFieldType.EDITOR]: {
+			codeBlock: EditorInputField.allowCodeBlock,
+			inlineCodeBlock: EditorInputField.allowInlineCodeBlock,
+		},
 	};
 
 	static createInputField(
@@ -99,6 +104,9 @@ export class InputFieldFactory {
 		} else if (inputFieldType === InputFieldType.SUGGESTER) {
 			InputFieldFactory.checkInputFieldMarkdownRenderChildTypeAllowed(inputFieldType, args.type);
 			return new SuggestInputField(args.inputFieldMarkdownRenderChild, args.onValueChanged);
+		} else if (inputFieldType === InputFieldType.EDITOR) {
+			InputFieldFactory.checkInputFieldMarkdownRenderChildTypeAllowed(inputFieldType, args.type);
+			return new EditorInputField(args.inputFieldMarkdownRenderChild, args.onValueChanged);
 		}
 
 		return undefined;

src/inputFields/Suggest/Suggest.svelte renamed to src/inputFields/Suggest/SuggestInput.svelte

@@ -1,6 +1,6 @@
 import { InputFieldMarkdownRenderChild } from '../../InputFieldMarkdownRenderChild';
 import { AbstractInputField } from '../AbstractInputField';
-import Suggest from './Suggest.svelte';
+import SuggestInput from './SuggestInput.svelte';
 import { InputFieldArgumentType } from '../../parsers/InputFieldDeclarationParser';
 import { DataArray, getAPI, Literal } from 'obsidian-dataview';
 import { AbstractInputFieldArgument } from '../../inputFieldArguments/AbstractInputFieldArgument';
@@ -15,7 +15,7 @@ export interface SuggestOption {
 
 export class SuggestInputField extends AbstractInputField {
 	container: HTMLDivElement | undefined;
-	component: Suggest | undefined;
+	component: SuggestInput | undefined;
 	value: string;
 	options: SuggestOption[];
 
@@ -33,7 +33,7 @@ export class SuggestInputField extends AbstractInputField {
 	}
 
 	getValue(): string {
-		return '';
+		return this.value;
 	}
 
 	setValue(value: any): void {
@@ -111,7 +111,7 @@ export class SuggestInputField extends AbstractInputField {
 
 		this.value = this.inputFieldMarkdownRenderChild.getInitialValue();
 
-		this.component = new Suggest({
+		this.component = new SuggestInput({
 			target: container,
 			props: {
 				showSuggest: () => this.showSuggest(),

src/inputFields/Suggest/SuggestInputField.ts

@@ -16,6 +16,7 @@ export enum InputFieldType {
 	DATE_PICKER = 'date_picker',
 	NUMBER = 'number',
 	SUGGESTER = 'suggester',
+	EDITOR = 'editor',
 
 	INVALID = 'invalid',
 }