From 9403fd2cd93788a8d57f8107bdad572005e63a82 Mon Sep 17 00:00:00 2001 From: Zef Hemel Date: Wed, 27 Dec 2023 13:46:45 +0100 Subject: [PATCH] Cleanup --- plugs/markdown/assets/markdown_widget.css | 115 ---------------------- plugs/markdown/assets/markdown_widget.js | 107 -------------------- plugs/markdown/markdown.plug.yaml | 2 - plugs/markdown/markdown_content_widget.ts | 51 ---------- plugs/query/query.ts | 17 +--- plugs/query/template.ts | 14 +-- 6 files changed, 9 insertions(+), 297 deletions(-) delete mode 100644 plugs/markdown/assets/markdown_widget.css delete mode 100644 plugs/markdown/assets/markdown_widget.js delete mode 100644 plugs/markdown/markdown_content_widget.ts diff --git a/plugs/markdown/assets/markdown_widget.css b/plugs/markdown/assets/markdown_widget.css deleted file mode 100644 index fb28cab3..00000000 --- a/plugs/markdown/assets/markdown_widget.css +++ /dev/null @@ -1,115 +0,0 @@ -/* Reset SB styles */ - -body { - font-family: var(--editor-font); - color: var(--root-color); -} - -#sb-main { - height: initial !important; - display: initial !important; -} - -#sb-root { - display: block !important; - width: initial !important; - height: initial !important; -} - -#sb-editor { - flex: initial !important; - height: initial !important; -} - -.cm-editor { - height: initial !important; -} - -ul, -ol { - margin-top: 0; - margin-bottom: 0; -} - -ul { - list-style: none; - padding-left: 1ch; -} - -ul li::before { - content: "\2022"; - /* Add content: \2022 is the CSS Code/unicode for a bullet */ - color: var(--editor-list-bullet-color); - display: inline-block; - /* Needed to add space between the bullet and the text */ - width: 1em; - /* Also needed for space (tweak if needed) */ - margin-left: -1em; - /* Also needed for space (tweak if needed) */ -} - -h1, -h2, -h3, -h4, -h5 { - margin: 0; -} - -a.wiki-link { - border-radius: 5px; - padding: 0 5px; - color: var(--editor-wiki-link-page-color); - background-color: var(--editor-wiki-link-page-background-color); - text-decoration: none; -} - -span.task-deadline { - background-color: rgba(22, 22, 22, 0.07); -} - -tt { - background-color: var(--editor-code-background-color); -} - -body:hover #button-bar, -body:active #button-bar { - display: block; -} - -#button-bar { - position: absolute; - right: 6px; - top: 6px; - display: none; - background: var(--editor-directive-background-color); - padding-inline: 3px; - padding-bottom: 1px; - border-radius: 5px; -} - -.cm-editor { - padding-left: 10px; -} - -#button-bar button { - border: none; - background: none; - cursor: pointer; - color: var(--root-color); -} - -#edit-button, -#reload-button { - margin-left: -10px; -} - -li code { - font-size: 80%; - color: #a5a4a4; -} - -iframe { - border: none; - width: 100%; -} \ No newline at end of file diff --git a/plugs/markdown/assets/markdown_widget.js b/plugs/markdown/assets/markdown_widget.js deleted file mode 100644 index 1bb29250..00000000 --- a/plugs/markdown/assets/markdown_widget.js +++ /dev/null @@ -1,107 +0,0 @@ -async function init() { - // Make edit button send the "blur" API call so that the MD code is visible - document.getElementById("edit-button").addEventListener("click", () => { - api({ type: "blur" }); - }); - document.getElementById("reload-button").addEventListener("click", () => { - api({ type: "reload" }); - }); - document.getElementById("source-button").addEventListener("click", () => { - document.getElementById("body-content").innerText = originalMarkdown; - }); - - document.querySelectorAll("a[data-ref]").forEach((el) => { - el.addEventListener("click", (e) => { - e.preventDefault(); - syscall("editor.navigate", el.dataset.ref); - }); - }); - - // Find all fenced code blocks and replace them with iframes (if a code widget is defined for them) - const allWidgets = document.querySelectorAll("pre[data-lang]"); - for (const widget of allWidgets) { - const lang = widget.getAttribute("data-lang"); - const body = widget.innerText; - - try { - const result = await syscall("codeWidget.render", lang, body, pageName); - const iframe = document.createElement("iframe"); - iframe.src = "about:blank"; - - iframe.onload = () => { - iframe.contentDocument.write(panelHtml); - iframe.contentWindow.postMessage({ - type: "html", - theme: document.getElementsByTagName("html")[0].getAttribute( - "data-theme", - ), - ...result, - }, "*"); - }; - widget.parentNode.replaceChild(iframe, widget); - - globalThis.addEventListener("message", (e) => { - if (e.source !== iframe.contentWindow) { - return; - } - const messageData = e.data; - switch (messageData.type) { - case "setHeight": - iframe.height = messageData.height + "px"; - // Propagate height setting to parent - updateHeight(); - break; - case "syscall": { - // Intercept syscall messages and send them to the parent - const { id, name, args } = messageData; - syscall(name, ...args).then((result) => { - iframe.contentWindow.postMessage( - { id, type: "syscall-response", result }, - "*", - ); - }).catch((error) => { - iframe.contentWindow.postMessage({ - id, - type: "syscall-response", - error, - }, "*"); - }); - break; - } - default: - // Bubble up any other messages to parent iframe - window.parent.postMessage(messageData, "*"); - } - }); - } catch (e) { - if (e.message.includes("not found")) { - // Not a code widget, ignore - } else { - console.error("Error rendering widget", e); - } - } - } - - // Find all task toggles and propagate their state - document.querySelectorAll("span[data-external-task-ref]").forEach((el) => { - const taskRef = el.dataset.externalTaskRef; - el.querySelector("input[type=checkbox]").addEventListener("change", (e) => { - const oldState = e.target.dataset.state; - const newState = oldState === " " ? "x" : " "; - // Update state in DOM as well for future toggles - e.target.dataset.state = newState; - console.log("Toggling task", taskRef); - syscall( - "system.invokeFunction", - "tasks.updateTaskState", - taskRef, - oldState, - newState, - ).catch( - console.error, - ); - }); - }); -} - -init().catch(console.error); diff --git a/plugs/markdown/markdown.plug.yaml b/plugs/markdown/markdown.plug.yaml index b9cfeb53..ecde3a78 100644 --- a/plugs/markdown/markdown.plug.yaml +++ b/plugs/markdown/markdown.plug.yaml @@ -3,8 +3,6 @@ assets: - "assets/*" functions: # API - markdownContentWidget: - path: markdown_content_widget.ts:markdownContentWidget expandCodeWidgets: path: api.ts:expandCodeWidgets markdownToHtml: diff --git a/plugs/markdown/markdown_content_widget.ts b/plugs/markdown/markdown_content_widget.ts deleted file mode 100644 index 854cdd27..00000000 --- a/plugs/markdown/markdown_content_widget.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { WidgetContent } from "$sb/app_event.ts"; -import { asset, markdown } from "$sb/syscalls.ts"; -import { panelHtml } from "../../web/components/panel_html.ts"; -import { renderMarkdownToHtml } from "./markdown_render.ts"; - -export async function markdownContentWidget( - markdownText: string, - pageName: string, -): Promise { - // Parse markdown to a ParseTree - const mdTree = await markdown.parseMarkdown(markdownText); - // And then render it to HTML - const html = renderMarkdownToHtml(mdTree, { smartHardBreak: true }); - return { - html: await wrapHTML(html), - script: await prepareJS(pageName, markdownText), - // And add back the markdown text so we can render it in a different way if desired - markdown: markdownText, - }; -} - -export async function prepareJS(pageName: string, originalMarkdown: string) { - const iframeJS = await asset.readAsset("assets/markdown_widget.js"); - return ` - const panelHtml = ${JSON.stringify(panelHtml)}; - const pageName = ${JSON.stringify(pageName)}; - const originalMarkdown = ${JSON.stringify(originalMarkdown)}; - ${iframeJS} - `; -} - -export async function wrapHTML(html: string): Promise { - const css = await asset.readAsset("assets/markdown_widget.css"); - - return ` - - - -
- -
- - - -
-
- ${html} -
-
- `; -} diff --git a/plugs/query/query.ts b/plugs/query/query.ts index 410d393b..e4e94477 100644 --- a/plugs/query/query.ts +++ b/plugs/query/query.ts @@ -1,5 +1,5 @@ import type { LintEvent, WidgetContent } from "$sb/app_event.ts"; -import { events, language, space, system } from "$sb/syscalls.ts"; +import { events, language, space } from "$sb/syscalls.ts"; import { findNodeOfType, parseTreeToAST, @@ -70,16 +70,11 @@ export async function widget( } } - return system.invokeFunction( - "markdown.markdownContentWidget", - resultMarkdown, - pageName, - ); + return { + markdown: resultMarkdown, + }; } catch (e: any) { - return system.invokeFunction( - "markdown.markdownContentWidget", - `**Error:** ${e.message}`, - ); + return { markdown: `**Error:** ${e.message}` }; } } @@ -167,7 +162,5 @@ async function allQuerySources(): Promise { const allObjectTypes: string[] = (await events.dispatchEvent("query_", {})) .flat(); - // console.log("All object types", allObjectTypes); - return [...allSources, ...allObjectTypes]; } diff --git a/plugs/query/template.ts b/plugs/query/template.ts index 85db2fa8..7bea41bb 100644 --- a/plugs/query/template.ts +++ b/plugs/query/template.ts @@ -59,16 +59,10 @@ export async function widget( rendered = renderToText(parsedMarkdown); } - return system.invokeFunction( - "markdown.markdownContentWidget", - rendered, - pageName, - ); + return { markdown: rendered }; } catch (e: any) { - return system.invokeFunction( - "markdown.markdownContentWidget", - `**Error:** ${e.message}`, - pageName, - ); + return { + markdown: `**Error:** ${e.message}`, + }; } }