Cleanup
This commit is contained in:
Zef Hemel
parent
48e147d0b2
commit
9403fd2cd9
@ -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%;
|
||||
}
|
||||
@ -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);
|
||||
@ -3,8 +3,6 @@ assets:
|
||||
- "assets/*"
|
||||
functions:
|
||||
# API
|
||||
markdownContentWidget:
|
||||
path: markdown_content_widget.ts:markdownContentWidget
|
||||
expandCodeWidgets:
|
||||
path: api.ts:expandCodeWidgets
|
||||
markdownToHtml:
|
||||
|
||||
@ -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<WidgetContent> {
|
||||
// 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<string> {
|
||||
const css = await asset.readAsset("assets/markdown_widget.css");
|
||||
|
||||
return `
|
||||
<!-- In addition to some custom CSS -->
|
||||
<style>${css}</style>
|
||||
<!-- Wrap the whole thing in something SB-like to get access to styles -->
|
||||
<div id="sb-main"><div id="sb-editor"><div class="cm-editor">
|
||||
<!-- And add an edit button -->
|
||||
<div id="button-bar">
|
||||
<button id="source-button" title="Show Markdown source"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-code"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg></button>
|
||||
<button id="reload-button" title="Reload"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></button>
|
||||
<button id="edit-button" title="Edit"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" 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></button>
|
||||
</div>
|
||||
<div id="body-content">
|
||||
${html}
|
||||
</div>
|
||||
</div></div></div>
|
||||
`;
|
||||
}
|
||||
@ -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<string[]> {
|
||||
const allObjectTypes: string[] = (await events.dispatchEvent("query_", {}))
|
||||
.flat();
|
||||
|
||||
// console.log("All object types", allObjectTypes);
|
||||
|
||||
return [...allSources, ...allObjectTypes];
|
||||
}
|
||||
|
||||
@ -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}`,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user