Added "source" button for template debugging
This commit is contained in:
parent
b5f4fb603c
commit
0b9977a4c4
@ -56,7 +56,8 @@ body:active #button-bar {
|
||||
color: var(--root-color);
|
||||
}
|
||||
|
||||
#edit-button {
|
||||
#edit-button,
|
||||
#source-button {
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
|
@ -6,6 +6,9 @@ async function init() {
|
||||
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) => {
|
||||
|
@ -12,21 +12,23 @@ export async function markdownContentWidget(
|
||||
const html = renderMarkdownToHtml(mdTree, { smartHardBreak: true });
|
||||
return {
|
||||
html: await wrapHTML(html),
|
||||
script: await prepareJS(),
|
||||
script: await prepareJS(markdownText),
|
||||
// And add back the markdown text so we can render it in a different way if desired
|
||||
markdown: markdownText,
|
||||
};
|
||||
}
|
||||
|
||||
export async function prepareJS() {
|
||||
export async function prepareJS(originalMarkdown: string) {
|
||||
const iframeJS = await asset.readAsset("assets/markdown_widget.js");
|
||||
return `
|
||||
const panelHtml = \`${panelHtml}\`;
|
||||
const panelHtml = ${JSON.stringify(panelHtml)};
|
||||
const originalMarkdown = ${JSON.stringify(originalMarkdown)};
|
||||
${iframeJS}
|
||||
`;
|
||||
}
|
||||
|
||||
export async function wrapHTML(html: string): Promise<string> {
|
||||
export async function wrapHTML( html: string
|
||||
): Promise<string> {
|
||||
const css = await asset.readAsset("assets/markdown_widget.css");
|
||||
|
||||
return `
|
||||
@ -39,9 +41,12 @@ export async function wrapHTML(html: string): Promise<string> {
|
||||
<!-- And add an edit button -->
|
||||
<div id="button-bar">
|
||||
<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="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="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>
|
||||
`;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user