Fixed a lot of bugs with new widget rendering

This commit is contained in:
Zef Hemel
2023-12-28 16:14:30 +01:00
parent 4d66f23391
commit d43dbcacec
17 changed files with 212 additions and 142 deletions
+3
View File
@@ -178,6 +178,9 @@ functions:
env: client
panelWidget: top
refreshTOC:
path: toc.ts:refreshTOC
lintYAML:
path: lint.ts:lintYAML
events:
+14 -6
View File
@@ -1,4 +1,4 @@
import { clientStore, editor, system } from "$sb/silverbullet-syscall/mod.ts";
import { clientStore, codeWidget, editor, system } from "$sb/syscalls.ts";
import { CodeWidgetContent } from "$sb/types.ts";
import { queryObjects } from "./api.ts";
import { LinkObject } from "./page_links.ts";
@@ -9,14 +9,16 @@ export async function toggleMentions() {
let hideMentions = await clientStore.get(hideMentionsKey);
hideMentions = !hideMentions;
await clientStore.set(hideMentionsKey, hideMentions);
if (!hideMentions) {
await renderMentions();
} else {
await editor.dispatch({});
}
await codeWidget.refreshAll();
}
export async function renderMentions(): Promise<CodeWidgetContent | null> {
console.log("Hide mentions", await clientStore.get(hideMentionsKey));
if (await clientStore.get(hideMentionsKey)) {
return null;
}
console.log("Stil here");
const page = await editor.getCurrentPage();
const linksResult = await queryObjects<LinkObject>("link", {
// Query all links that point to this page, excluding those that are inside directives and self pointers.
@@ -41,6 +43,12 @@ export async function renderMentions(): Promise<CodeWidgetContent | null> {
}
return {
markdown: renderedMd,
buttons: [{
description: "Hide",
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-eye-off"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>`,
invokeFunction: "index.toggleMentions",
}],
};
}
}
+21 -12
View File
@@ -1,10 +1,10 @@
import {
clientStore,
codeWidget,
editor,
markdown,
system,
} from "$sb/silverbullet-syscall/mod.ts";
import { renderToText, traverseTree, traverseTreeAsync } from "$sb/lib/tree.ts";
import { renderToText, traverseTree } from "$sb/lib/tree.ts";
import { CodeWidgetContent } from "$sb/types.ts";
const hideTOCKey = "hideTOC";
@@ -16,23 +16,18 @@ type Header = {
level: number;
};
let cachedTOC: string | undefined;
export async function toggleTOC() {
cachedTOC = undefined;
let hideTOC = await clientStore.get(hideTOCKey);
hideTOC = !hideTOC;
await clientStore.set(hideTOCKey, hideTOC);
await renderTOC(); // This will hide it if needed
await codeWidget.refreshAll();
}
async function markdownToHtml(text: string): Promise<string> {
return system.invokeFunction("markdown.markdownToHtml", text);
export async function refreshTOC() {
await codeWidget.refreshAll();
}
export async function renderTOC(
reload = false,
): Promise<CodeWidgetContent | null> {
export async function renderTOC(): Promise<CodeWidgetContent | null> {
if (await clientStore.get(hideTOCKey)) {
return null;
}
@@ -40,7 +35,7 @@ export async function renderTOC(
const text = await editor.getText();
const tree = await markdown.parseMarkdown(text);
const headers: Header[] = [];
await traverseTreeAsync(tree, async (n) => {
traverseTree(tree, (n) => {
if (n.type?.startsWith("ATXHeading")) {
headers.push({
name: n.children!.slice(1).map(renderToText).join("").trim(),
@@ -66,5 +61,19 @@ export async function renderTOC(
// console.log("Markdown", renderedMd);
return {
markdown: renderedMd,
buttons: [
{
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: "index.refreshTOC",
},
{
description: "Hide",
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-eye-off"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>`,
invokeFunction: "index.toggleTOC",
},
],
};
}
+5 -1
View File
@@ -26,11 +26,15 @@ functions:
- editor:complete
refreshAllWidgets:
path: widget.ts:refreshAll
path: widget.ts:refreshAllWidgets
command:
name: "Live Queries and Templates: Refresh All"
key: "Alt-q"
# Query widget buttons
editButton:
path: widget.ts:editButton
# Slash commands
insertQuery:
redirect: template.insertTemplateText
+16 -2
View File
@@ -9,12 +9,12 @@ import { astToKvQuery } from "$sb/lib/parse-query.ts";
import { jsonToMDTable, renderQueryTemplate } from "../directive/util.ts";
import { loadPageObject, replaceTemplateVars } from "../template/template.ts";
import { cleanPageRef, resolvePath } from "$sb/lib/resolve.ts";
import { LintDiagnostic } from "$sb/types.ts";
import { CodeWidgetContent, LintDiagnostic } from "$sb/types.ts";
export async function widget(
bodyText: string,
pageName: string,
): Promise<WidgetContent> {
): Promise<CodeWidgetContent> {
const pageObject = await loadPageObject(pageName);
try {
@@ -72,6 +72,20 @@ export async function widget(
return {
markdown: resultMarkdown,
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",
},
],
};
} catch (e: any) {
return { markdown: `**Error:** ${e.message}` };
+6 -2
View File
@@ -1,5 +1,9 @@
import { codeWidget } from "$sb/syscalls.ts";
import { codeWidget, editor } from "$sb/syscalls.ts";
export function refreshAll() {
export function refreshAllWidgets() {
codeWidget.refreshAll();
}
export async function editButton(pos: number) {
await editor.moveCursor(pos);
}