mingzailao
/
silverbullet
mirror of https://github.com/silverbulletmd/silverbullet.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Bake live blocks (#719)

pull/751/head
Marek S. Łukasiewicz 2024-02-24 15:51:55 +01:00 committed by GitHub
parent cafe39135e
commit e63c6c1993
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 170 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
plugs/index/toc.ts
View File

@ -73,6 +73,12 @@ export async function widget(
return {
markdown: renderedMd,
buttons: [
{
description: "Bake result",
svg:
`<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-left"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg>`,
invokeFunction: "query.bakeButton",
},
{
description: "Edit",
svg:

15
plugs/query/query.plug.yaml
View File

@ -17,25 +17,28 @@ functions:
editButton:
path: widget.ts:editButton
bakeButton:
path: widget.ts:bakeButton
lintQuery:
path: lint.ts:lintQuery
events:
- editor:lint
- editor:lint
queryComplete:
path: complete.ts:queryComplete
events:
- editor:complete
- editor:complete
queryAttributeComplete:
path: complete.ts:queryAttributeComplete
events:
- editor:complete
- editor:complete
languageComplete:
path: complete.ts:languageComplete
events:
- editor:complete
- editor:complete
refreshAllWidgets:
path: widget.ts:refreshAllWidgets
@ -43,3 +46,7 @@ functions:
name: "Live Queries and Templates: Refresh All"
key: "Alt-q"
bakeAllWidgets:
path: widget.ts:bakeAllWidgets
command:
name: "Page: Bake live blocks"

110
plugs/query/widget.ts
View File

@ -1,10 +1,20 @@
import { codeWidget, editor, events } from "$sb/syscalls.ts";
import { codeWidget, editor, markdown } from "$sb/syscalls.ts";
import {
addParentPointers,
collectNodesOfType,
findNodeMatching,
findNodeOfType,
findParentMatching,
ParseTree,
removeParentPointers,
renderToText,
} from "$lib/tree.ts";
import { parseQuery } from "$sb/lib/parse-query.ts";
import { loadPageObject, replaceTemplateVars } from "../template/page.ts";
import { resolvePath } from "$sb/lib/resolve.ts";
import { CodeWidgetContent } from "../../type/types.ts";
import { jsonToMDTable, renderQueryTemplate } from "../template/util.ts";
import { CodeWidgetContent } from "$type/types.ts";
import { jsonToMDTable } from "../template/util.ts";
import { renderQuery } from "./api.ts";
import { ChangeSpec } from "../../web/deps.ts";
export async function widget(
bodyText: string,
@ -27,6 +37,12 @@ export async function widget(
return {
markdown: resultMarkdown,
buttons: [
{
description: "Bake result",
svg:
`<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-left"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg>`,
invokeFunction: "query.bakeButton",
},
{
description: "Edit",
svg:
@ -52,7 +68,7 @@ export function refreshAllWidgets() {
export async function editButton(bodyText: string) {
const text = await editor.getText();
// This is a it of a heuristic and will point to the wrong place if the same body text appears in multiple places, which is easy to replicate but unlikely to happen in the real world
// This is a bit of a heuristic and will point to the wrong place if the same body text appears in multiple places, which is easy to replicate but unlikely to happen in the real world
// A more accurate fix would be to update the widget (and therefore the index of where this widget appears) on every change, but this would be rather expensive. I think this is good enough.
const bodyPos = text.indexOf("\n" + bodyText + "\n");
if (bodyPos === -1) {
@ -61,3 +77,87 @@ export async function editButton(bodyText: string) {
}
await editor.moveCursor(bodyPos + 1);
}
export async function bakeButton(bodyText: string) {
try {
const text = await editor.getText();
const tree = await markdown.parseMarkdown(text);
addParentPointers(tree);
// Need to find it in page to make the replacement, see editButton for comment about finding by content
const textNode = findNodeMatching(tree, (n) => n.text === bodyText);
if (!textNode) {
throw new Error(`Could not find node to bake`);
}
const blockNode = findParentMatching(
textNode,
(n) => n.type === "FencedCode",
);
if (!blockNode) {
removeParentPointers(textNode);
console.error("baked node", textNode);
throw new Error("Could not find FencedCode above baked node");
}
const changes = await changeForBake(blockNode);
if (changes) {
await editor.dispatch({ changes });
} else {
// Either something failed, or this widget does not meet requirements for baking and shouldn't show the button at all
throw new Error("Baking with button didn't produce any changes");
}
} catch (error) {
console.error(error);
await editor.flashNotification("Could not bake widget", "error");
}
}
export async function bakeAllWidgets() {
const text = await editor.getText();
const tree = await markdown.parseMarkdown(text);
const changes = (await Promise.all(
collectNodesOfType(tree, "FencedCode").map(changeForBake),
)).filter((c): c is ChangeSpec => c !== null);
await editor.dispatch({ changes });
await editor.flashNotification(`Baked ${changes.length} live blocks`);
}
/**
* Create change description to replace a widget source with its markdown output
* @param codeBlockNode node of type FencedCode for a markdown widget (eg. query, template, toc)
* @returns single replacement for the editor, or null if the widget didn't render to markdown
*/
async function changeForBake(
codeBlockNode: ParseTree,
): Promise<ChangeSpec | null> {
const lang = renderToText(
findNodeOfType(codeBlockNode, "CodeInfo") ?? undefined,
);
const body = renderToText(
findNodeOfType(codeBlockNode, "CodeText") ?? undefined,
);
if (!lang || body === undefined) {
return null;
}
const content = await codeWidget.render(
lang,
body,
await editor.getCurrentPage(),
);
if (
!content || !content.markdown === undefined ||
codeBlockNode.from === undefined ||
codeBlockNode.to === undefined
) { // Check attributes for undefined because 0 or empty string could be valid
return null;
}
return {
from: codeBlockNode.from,
to: codeBlockNode.to,
insert: content.markdown,
};
}

62
plugs/template/widget.ts
View File

@ -81,17 +81,26 @@ export async function includeWidget(
return {
markdown: rendered,
buttons: [{
description: "Edit",
svg:
`<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>`,
invokeFunction: "query.editButton",
}, {
description: "Reload",
svg:
`<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-cw"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>`,
invokeFunction: "query.refreshAllWidgets",
}],
buttons: [
{
description: "Bake result",
svg:
`<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-left"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg>`,
invokeFunction: "query.bakeButton",
},
{
description: "Edit",
svg:
`<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>`,
invokeFunction: "query.editButton",
},
{
description: "Reload",
svg:
`<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-cw"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>`,
invokeFunction: "query.refreshAllWidgets",
},
],
};
} catch (e: any) {
return {
@ -132,17 +141,26 @@ export async function templateWidget(
return {
markdown: rendered,
buttons: [{
description: "Edit",
svg:
`<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>`,
invokeFunction: "query.editButton",
}, {
description: "Reload",
svg:
`<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-cw"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>`,
invokeFunction: "query.refreshAllWidgets",
}],
buttons: [
{
description: "Bake result",
svg:
`<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-left"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg>`,
invokeFunction: "query.bakeButton",
},
{
description: "Edit",
svg:
`<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>`,
invokeFunction: "query.editButton",
},
{
description: "Reload",
svg:
`<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-cw"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>`,
invokeFunction: "query.refreshAllWidgets",
},
],
};
} catch (e: any) {
return {

7
website/Live Queries.md
View File

@ -6,4 +6,9 @@ The syntax used is:
page limit 3
```
Queries are written using SilverBullet’s [[Query Language]].
Queries are written using SilverBullet’s [[Query Language]].
# Baking
A query block can be replaced with its current output by clicking the "Bake result" button in the top right corner. This will make it a regular part of page, which will not respond to changes in the data source anymore.
You can also use the {[Page: Bake live blocks]} command to do it in-place for every [[Blocks|block]] in this page which is rendered as Markdown (but not [[Live Template Widgets]]). You can undo the replacement with `Ctrl+Z`/`Cmd+Z` as usual, but if you want to keep your queries you shoud make a copy of the page first.

4
website/Live Templates.md
View File

@ -1,11 +1,11 @@
Live Templates are a type of [[Blocks|block]] that render [[Templates]] written in [[Template Language]] inline in a page.
Live Templates are a type of [[Blocks|block]] that render [[Templates]] written in [[Template Language]] inline in a page.
There are two variants of Live Templates:
* `template`: where the template is specified inline in a code block.
* `include`: where an external page (template) is _included_ and rendered.
Template blocks are specified using [[Markdown]]‘s fenced code block notation using either `template` or `include` as its language.
Template blocks are specified using [[Markdown]]‘s fenced code block notation using either `template` or `include` as its language. They can also be [[Live Queries#Baking|baked]].
# Template
To specify a template to render inline, you can use the `template` block. The body is written in [[Template Language]].