Ability to Create Dynamic Search Query Blocks Using JS Engine

@mProjectsCode

First of all, thanks for creating this amazing plugin! It's been a great addition to my Obsidian setup.

I wanted to ask if it's possible to dynamically generate native search query blocks using the js-engine plugin. I've been exploring different ways to use the plugin and found that generating JavaScript code blocks works perfectly. However, I'm struggling to create dynamic search query blocks that work in the same way.

Here's what I've tried so far:

let searchQuery = `~~~query
file:button
~~~`;
return engine.markdown.create(searchQuery);

And another attempt:

let markdownBuilder = engine.markdown.createBuilder();
let searchQuery = `file:button`;
markdownBuilder.createCodeBlock('query', searchQuery);
return markdownBuilder;

Unfortunately, neither of these attempts seems to render the search query block correctly in Obsidian.

The output is:

file:button

Instead of the search query result I would get using:

```query
file:button
```

However, this approach does work perfectly for JavaScript code blocks:

let jsCode = `~~~js
var foo = 'bar';
~~~`;
return engine.markdown.create(jsCode);

Or

let markdownBuilder = engine.markdown.createBuilder();
let jsCode = `var foo = 'bar';`;
markdownBuilder.createCodeBlock('js', jsCode);
return markdownBuilder;

I'm aware of the workaround using DataView or DataViewJS for similar tasks, but I'd prefer to use the native search query blocks directly if possible. My ultimate goal is to integrate this with a textarea using the Meta Bind Plugin, so that in reading mode, I can dynamically update and view search results in real-time.

Could you please let me know if it's possible to achieve this using the js-engine plugin? If not, any suggestions or workarounds would be greatly appreciated!

Thanks again for your work on this plugin!

Best regards,
CharlesHaanel

Not sure why the query code block does not work. This seems like an Obsidian bug to me. I will confirm that.

I found the same thing recently, and raised it in Discord

Unfortunately, neither of these attempts seems to render the search query block correctly in Obsidian.

I'm unsure what behaviour you see, but I found with this:

```js-engine
let markdownBuilder = engine.markdown.createBuilder();
markdownBuilder.createCodeBlock('query', `"#done 2023-11-08"`);
return markdownBuilder;
```

the result looks like this:

I got the same result with dataviewjs:

```dataviewjs
const query = `
~~~query
"#done 2023-11-08"
~~~
`;
dv.paragraph(query)
```

My assumption is that Obsidian does not implement the rendering of query code blocks the same way that plugins render them...

I've successfully implemented a solution using the Note Gallery plugin which uses Obsidian native search operators under the hood. While functional, it doesn't replicate the native Obsidian embed query's look and feel.

I've explored several alternative approaches, but none have yielded the desired results so far.

Despite these efforts, I haven't been able to achieve a result that closely mimics the native Obsidian embed query functionality.

If anyone has successfully implemented a solution that more closely resembles the native embed query or has additional suggestions, I'd greatly appreciate your input.

Here is the Note Gallery alternative:

---
textArea: file:button
---

```meta-bind
INPUT[textArea():textArea]
```

`VIEW[{textArea}][text]`


```js-engine
const mb = engine.getPlugin('obsidian-meta-bind-plugin').api;
const bindTarget = mb.parseBindTarget('textArea', context.file.path);

function render(value) {
  let markdownBuilder = engine.markdown.createBuilder();
  let searchQuery = `~~~note-gallery
query: '${value.replace(/\n/g, ' ')}'
sort: desc
limit: 9
~~~`;
  markdownBuilder.createParagraph(searchQuery);
  return markdownBuilder;
}

const reactive = engine.reactive(render, mb.getMetadata(bindTarget));

const subscription = mb.subscribeToMetadata(bindTarget, component, (value) => reactive.refresh(value));

return reactive;
```

Navigation Menu

Repository navigation

Ability to Create Dynamic Search Query Blocks Using JS Engine #25

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Ability to Create Dynamic Search Query Blocks Using JS Engine #25

Description

Activity

mProjectsCode commented on Aug 30, 2024

claremacrae commented on Aug 30, 2024

CharlesHaanel commented on Sep 5, 2024

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions