Ability to render MetaBind fields in a Note Toolbar modal

[chrisgurney]

Per @azaol-aegnor on Discord:

I want to show a MB field in a NTB modal. I tried simply feeding the NTB modal with a MD file that contains the field definition, but the field does not show up (because it's not bound to the file currently focus when it's included in the modal). So I figure I'd use MB API to create the field instead, but I'm getting an error because the Modal I get from await ntb.modal extends Obsidian's Modal, which does not have the addChild method that Component have

MetaBind asks for a component in the signature, it's to ensure the field created is linked to a parent entity for life cycle management: https://www.moritzjung.dev/obsidian-meta-bind-plugin-docs/guides/api/#input-fields

On Discord, mnaoumov suggests an implementation for modals in which a component is passed created in the constructor:
https://discord.com/channels/686053708261228577/840286264964022302/1470876274426773525

Here is Note Toolbar's ntb.modal() API implementation:
https://github.com/chrisgurney/obsidian-note-toolbar/blob/master/src/Api/NtbModal.ts

[mnaoumov]

On Discord, mnaoumov suggests an implementation for modals in which a component is passed in the constructor:

To be precise, my suggestion was NOT about passing to the constructor, but creating it within the modal itself. Passing external component raises questions about who manages its lifecycle...

[chrisgurney]

@mnaoumov Sorry I should have read your code more. 😆

[chrisgurney]

@azaol-aegnor Can you please provide more detail about what you tried to pass into ntb.modal() and what the result should be? A simple example would be helpful so I can reproduce it locally.

[azaol-aegnor]

Ahoy!

Thanks for your motivation to investigate it in your plugin!

Where is the Component missing

To second what @mnaoumov said just up there, the question is about who handles the life cycle of the component. Initially, I was expecting Obsidian's Modal to inherit from Component because it implements CloseableComponent. Meaning it was a Component itself, and it would be destroyed/cleared on closing.

To come back to the problem, MetaBind is requiring a component in the first link you provided. Because the Modal itself does not inherits from Component, I can't just forward it directly (as I feel we should, but that's a "problem" from Obsidian's API, not NotetoolBar).

So the second best solution would be for the Modal itself to hold a Component instance that scripts who create a Modal could reference to, deleguating its lifecycle management to the Modal (that would call unload() when the Modal is closed/destroyed).

Introduction to the problem

Here's how I was trying to use it:

// MARK: Imports (sort of)
/**
* NoteToolbar's JS script context
* @external INoteToolbarApi
* @see {@link https://github.com/chrisgurney/obsidian-note-toolbar|obsidian-note-toolbar}
*/
// @ts-ignore TS2304
const context = ntb

/**
* Obsidian API
* @external Obsidian
* @see {@link https://github.com/obsidianmd/obsidian-api/blob/master/obsidian.d.ts|obsidian.d.ts}
*/
const obsidian = context.o

/**
* Obsidian's App instance (not from global scope)
* @external Obsidian.App
* @see {@link https://github.com/obsidianmd/obsidian-api/blob/master/obsidian.d.ts#L406|obsidian.d.ts#App}
*/
const lapp = context.app


// MARK: Script
const currFile = lapp.workspace.getActiveFileView()?.file
const textContent = `Hi!

Simple demo of a field to edit the dueDate property:

~~~meta-bind
INPUT[datePicker:${currFile.path}#dueDate]
~~~

This text is displayed, but the field is not.
`

const modal = await ntb.modal(textContent , {
    title: `**${currFile.basename} quick properties form**`
})

For some reason, the field does not show up. If you copy the textContent variable to a file, replace ${currFile.path} with the result of the Copy current file path from vault folder command to better emulate what the content of the modal is.

The problem itself

Now we're getting to the point. Because the Modal coudn't show the field directly (and/or if I wanted to do advanced things), I tried using MetaBind's API to build the field. Here's what the same block as above looks like (spiking my first three fake imports):

// MARK: Script
const currFile = lapp.workspace.getActiveFileView()?.file
const textContent = `Hi!\n\n`

const modal = await ntb.modal(textContent , {
    title: `**${currFile.basename} quick properties form**`
})

const mb = lapp.plugins.getPlugin('obsidian-meta-bind-plugin').api
const opts = {
    declaration: {
        inputFieldType: 'number',
    },
    renderChildType: 'block',
}
const inputField = mb.createInputFieldMountable(currFile.path, opts)
mb.wrapInMDRC(inputField, modal.contentEl, modal)

The last line throws an exception, basically because modal is not a Component.

With our suggestion of the NtbModal holding a component for us, I'd expect the last line to become one of:

mb.wrapInMDRC(inputField, modal.contentEl, modal.component)
mb.wrapInMDRC(inputField, modal.contentEl, modal.getReferenceToComponent())

Feel free to ping me on Discord (and/or DM), plan a quick call, ask for demo files to be attached or ask any follow-up questions!

[chrisgurney]

@azaol-aegnor Before digging deeper, can you give this a try?

Create a JavaScript item, select Evaluate JavaScript, and paste in this script. Change the fn variable to use a file that has a MetaBind field.

const fn = "Readme.md";
const f = ntb.app.vault.getAbstractFileByPath(fn);
if (f) await ntb.modal(f, { editable: true });

This will open the provided file in an editable modal, and should render everything in the note.

• The key here is the undocumented editable: true option, which instead of just rendering the provided file as HTML, it opens the given file in a leaf and sticks it in a modal.
• The reason it’s undocumented is various edge cases I ran into with it… that I can’t recall off the top of my head. One thing it does is show toolbars, which you may not want to do. It’s also completely editable, which may not be desired behavior, but may be required in this instance.

Let me know if this works, and we can perhaps explore this option further if needed.

[azaol-aegnor]

This shows the raw content of the file in an editor. Bold is shown as **bold**, and the codeblock is just a regular codeblock. It's a source-mode editor for the file basically!

[azaol-aegnor]

Here are a few files to demo the usage a little.

• my-cool-trip.md is the file I want to edit using a MetaBind field
• bound to cool-trip no matter what.md display a field that edits the property of the file mentioned above no matter where the file is used (read mode directly, or included in another file)
• bound to file including this one.md displays a field that edits the property "startDate" of itself if embed using the regular Obsidian syntax, or the file it is included in if embedded using a meta-bind-embed codeblock

I added the two working embeds in my-cool-trip.md, as well as a NoteToolbar using a callout, so you can click and interactively see what happens.

I basically try to embed the third file in a modal when clicking a NTB button in the first (my-cool-trip).