From e17d6b7bb7c6e4c664deaad40fb4e71cc35df318 Mon Sep 17 00:00:00 2001 From: Zef Hemel Date: Tue, 17 Jun 2025 11:11:59 +0200 Subject: [PATCH] Removed markdown plug with markdown preview --- plugs/builtin_plugs.ts | 1 - plugs/markdown/api.ts | 13 --- plugs/markdown/assets/preview.css | 76 -------------- plugs/markdown/assets/preview.js | 15 --- plugs/markdown/markdown.plug.yaml | 32 ------ plugs/markdown/markdown.ts | 16 --- plugs/markdown/markdown_render.test.ts | 67 ------------ plugs/markdown/preview.ts | 75 -------------- plugs/markdown/test/example.md | 82 --------------- plugs/markdown/util.ts | 63 ----------- server/http_server.ts | 4 +- web/cm_plugins/lua_widget.ts | 2 +- web/cm_plugins/table.ts | 2 +- {plugs => web}/markdown/html_render.test.ts | 0 {plugs => web}/markdown/html_render.ts | 0 web/markdown/markdown_render.test.ts | 109 ++++++++++++++++++++ {plugs => web}/markdown/markdown_render.ts | 0 web/syscalls/markdown.ts | 12 +++ 18 files changed, 125 insertions(+), 444 deletions(-) delete mode 100644 plugs/markdown/api.ts delete mode 100644 plugs/markdown/assets/preview.css delete mode 100644 plugs/markdown/assets/preview.js delete mode 100644 plugs/markdown/markdown.plug.yaml delete mode 100644 plugs/markdown/markdown.ts delete mode 100644 plugs/markdown/markdown_render.test.ts delete mode 100644 plugs/markdown/preview.ts delete mode 100644 plugs/markdown/test/example.md delete mode 100644 plugs/markdown/util.ts rename {plugs => web}/markdown/html_render.test.ts (100%) rename {plugs => web}/markdown/html_render.ts (100%) create mode 100644 web/markdown/markdown_render.test.ts rename {plugs => web}/markdown/markdown_render.ts (100%) diff --git a/plugs/builtin_plugs.ts b/plugs/builtin_plugs.ts index 6d4c359e..dc94447f 100644 --- a/plugs/builtin_plugs.ts +++ b/plugs/builtin_plugs.ts @@ -6,7 +6,6 @@ export const builtinPlugNames = [ "sync", "plug-manager", "emoji", - "markdown", "tasks", "search", "image-viewer", diff --git a/plugs/markdown/api.ts b/plugs/markdown/api.ts deleted file mode 100644 index 9f90c7c8..00000000 --- a/plugs/markdown/api.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { parseMarkdown } from "../../plug-api/syscalls/markdown.ts"; -import { - type MarkdownRenderOptions, - renderMarkdownToHtml, -} from "./markdown_render.ts"; - -export async function markdownToHtml( - markdown: string, - options: MarkdownRenderOptions = {}, -) { - const mdTree = await parseMarkdown(markdown); - return renderMarkdownToHtml(mdTree, options); -} diff --git a/plugs/markdown/assets/preview.css b/plugs/markdown/assets/preview.css deleted file mode 100644 index a6aa8127..00000000 --- a/plugs/markdown/assets/preview.css +++ /dev/null @@ -1,76 +0,0 @@ -html, -html { - overflow-y: scroll !important; - width: 90% !important; -} - -body { - overflow: initial !important; - color: var(--top-color); - font-family: georgia, times, serif; - font-size: 14pt; - max-width: 800px; - margin-left: auto; - margin-right: auto; - margin-top: revert; - margin-bottom: revert; - padding-left: 20px; - padding-right: 20px; -} - -img { - max-width: 100%; -} - -table { - width: 100%; - border-spacing: 0; -} - -ul li p { - margin: 0; -} - -thead tr { - background-color: var(--editor-table-head-background-color); - color: var(--editor-table-head-color); -} - -th, -td { - padding: 8px; -} - -tbody tr:nth-of-type(even) { - background-color: var(--editor-table-even-background-color); -} - -a[href] { - text-decoration: none; - color: var(--link-color); -} - -blockquote { - border-left: 1px solid var(--editor-blockquote-border-color); - margin-left: 2px; - padding-left: 10px; - background-color: var(--editor-blockquote-background-color); - color: var(--editor-blockquote-color); -} - -hr { - margin: 1em 0 1em 0; - text-align: center; - border-color: var(--editor-ruler-color); - border-width: 0; - border-style: dotted; -} - -hr:after { - content: "ยทยทยท"; - letter-spacing: 1em; -} - -span.highlight { - background-color: var(--highlight-color); -} diff --git a/plugs/markdown/assets/preview.js b/plugs/markdown/assets/preview.js deleted file mode 100644 index f599a406..00000000 --- a/plugs/markdown/assets/preview.js +++ /dev/null @@ -1,15 +0,0 @@ -document.getElementById("root").addEventListener("click", (e) => { - // console.log("Got click", e.target) - const dataSet = e.target.dataset; - if (dataSet["onclick"]) { - syscall("event.dispatch", "preview:click", dataSet["onclick"]).catch((e) => - console.log("Error", e) - ); - } else if (dataSet["pos"]) { - syscall( - "event.dispatch", - "preview:click", - JSON.stringify(["pos", dataSet["pos"]]), - ).catch((e) => console.log("Error", e)); - } -}); diff --git a/plugs/markdown/markdown.plug.yaml b/plugs/markdown/markdown.plug.yaml deleted file mode 100644 index fc9f9b8f..00000000 --- a/plugs/markdown/markdown.plug.yaml +++ /dev/null @@ -1,32 +0,0 @@ -name: markdown -assets: - - "assets/*" -functions: - # API - markdownToHtml: - path: api.ts:markdownToHtml - syscall: markdown.markdownToHtml - - # User facing - - toggle: - path: "./markdown.ts:togglePreview" - command: - name: "Markdown Preview: Toggle" - key: Ctrl-p - mac: Cmd-p - requireEditor: page - - preview: - path: "./preview.ts:updateMarkdownPreview" - env: client - events: - - plug:load - - editor:updated - - editor:pageLoaded - - editor:pageReloaded - - previewClickHandler: - path: "./preview.ts:previewClickHandler" - events: - - preview:click diff --git a/plugs/markdown/markdown.ts b/plugs/markdown/markdown.ts deleted file mode 100644 index f4e90f51..00000000 --- a/plugs/markdown/markdown.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { clientStore, editor } from "@silverbulletmd/silverbullet/syscalls"; -import { updateMarkdownPreview } from "./preview.ts"; - -export async function togglePreview() { - const currentValue = !!(await clientStore.get("enableMarkdownPreview")); - await clientStore.set("enableMarkdownPreview", !currentValue); - if (!currentValue) { - await updateMarkdownPreview(); - } else { - await hideMarkdownPreview(); - } -} - -async function hideMarkdownPreview() { - await editor.hidePanel("rhs"); -} diff --git a/plugs/markdown/markdown_render.test.ts b/plugs/markdown/markdown_render.test.ts deleted file mode 100644 index a8b4dd62..00000000 --- a/plugs/markdown/markdown_render.test.ts +++ /dev/null @@ -1,67 +0,0 @@ -import { parse } from "../../web/markdown_parser/parse_tree.ts"; -import { System } from "../../lib/plugos/system.ts"; - -import { createSandbox } from "../../lib/plugos/sandboxes/deno_worker_sandbox.ts"; -import { renderMarkdownToHtml } from "./markdown_render.ts"; -import { extendedMarkdownLanguage } from "../../web/markdown_parser/parser.ts"; -import { assertEquals } from "@std/assert"; -import { fileURLToPath } from "node:url"; - -Deno.test("Markdown render", async () => { - const system = new System("server"); - await system.load( - "editor", - createSandbox( - new URL("../../dist_plug_bundle/_plug/editor.plug.js", import.meta.url), - ), - ); - await system.load( - "tasks", - createSandbox( - new URL("../../dist_plug_bundle/_plug/tasks.plug.js", import.meta.url), - ), - ); - const testFile = Deno.readTextFileSync( - fileURLToPath(new URL("test/example.md", import.meta.url)), - ); - const tree = parse(extendedMarkdownLanguage, testFile); - renderMarkdownToHtml(tree, { - failOnUnknown: true, - }); - // console.log("HTML", html); - await system.unloadAll(); -}); - -Deno.test("Smart hard break test", () => { - const example = `**Hello** -*world!*`; - const tree = parse(extendedMarkdownLanguage, example); - const html = renderMarkdownToHtml(tree, { - failOnUnknown: true, - smartHardBreak: true, - }); - assertEquals( - html, - `Hello
world!`, - ); - - const example2 = `This is going to be a text. With a new line. - -And another - -* and a list -* with a second item - -### [[Bla]] - Url: something - Server: something else - ๐Ÿ“… last_updated - [Release notes](release_notes_url)`; - - const tree2 = parse(extendedMarkdownLanguage, example2); - const html2 = renderMarkdownToHtml(tree2, { - failOnUnknown: true, - smartHardBreak: true, - }); - - console.log(html2); -}); diff --git a/plugs/markdown/preview.ts b/plugs/markdown/preview.ts deleted file mode 100644 index 8f11df4a..00000000 --- a/plugs/markdown/preview.ts +++ /dev/null @@ -1,75 +0,0 @@ -import { - asset, - clientStore, - editor, - markdown, -} from "@silverbulletmd/silverbullet/syscalls"; -import { renderMarkdownToHtml } from "./markdown_render.ts"; -import { - isLocalPath, - resolvePath, -} from "@silverbulletmd/silverbullet/lib/resolve"; - -export async function updateMarkdownPreview() { - if (!(await clientStore.get("enableMarkdownPreview"))) { - return; - } - const currentPage = await editor.getCurrentPage(); - const text = await editor.getText(); - let mdTree = await markdown.parseMarkdown(text); - const css = await asset.readAsset("markdown", "assets/preview.css"); - const js = await asset.readAsset("markdown", "assets/preview.js"); - - mdTree = await markdown.expandMarkdown(mdTree); - const html = renderMarkdownToHtml(mdTree, { - smartHardBreak: true, - annotationPositions: true, - translateUrls: (url) => { - if (isLocalPath(url)) { - url = resolvePath(currentPage, decodeURI(url)); - } - return url; - }, - }); - const customStyles = await editor.getUiOption("customStyles"); - const toolbar = renderToolbar(); - await editor.showPanel( - "rhs", - 2, - ` - - - -
${toolbar}${html}
- `, - js, - ); -} - -function renderToolbar(): string { - return `
- -
`; -} - -export async function previewClickHandler(e: any) { - const [eventName, arg] = JSON.parse(e); - switch (eventName) { - case "pos": - // console.log("Moving cursor to", +arg); - await editor.moveCursor(+arg, true); - break; - } -} diff --git a/plugs/markdown/test/example.md b/plugs/markdown/test/example.md deleted file mode 100644 index 36e1875f..00000000 --- a/plugs/markdown/test/example.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -name: Sup ---- - -# Hello world - -This is **bold** and _italic_, or _italic_. And a **_mix_**. And ==highlight==! - -This is one line and this another. - -Lists: - -- This -- Is a -- list -- And here we go nested - 1. This is a numbered - 2. Two -- And different - - Bla - - More bla - -And: - -1. Numbered -2. Two - -## Second heading - -And some - -``` -Code -bla -bla - -bla -``` - -And like this: - - More code - Bla - -And a blockquote: - -> Sup yo Empty line\ -> Second part - - - -And more custom stuff [[Page link]] - -{[Command button]} - -- [ ] #next Task -- [x] #next Task 2 -- [ ] Task with dealine ๐Ÿ“… 2022-05-06 fef - -https://community.mattermost.com - -[A link](https://silverbullet.md) - -## Tables - -| type | actor_login | created_at | payload_ref | -| --------- | ----------- | -------------------- | ---------------------- | -| PushEvent | avb | 2022-10-27T08:27:48Z | refs/heads/master | -| PushEvent | avb | 2022-10-27T04:31:27Z | refs/heads/jitterSched | - -Here is something - ---- - -A new thing. - -![alt text](https:/ - -## Weird stuff - -- [{{#if done}}x{{else}} {{/if}}] [[{{page}}@{{pos}}]] {{name}} {{#if - deadline}}๐Ÿ“… {{deadline}}{{/if}} {{#each tags}}{{.}} {{/each}} diff --git a/plugs/markdown/util.ts b/plugs/markdown/util.ts deleted file mode 100644 index 66496021..00000000 --- a/plugs/markdown/util.ts +++ /dev/null @@ -1,63 +0,0 @@ -import { - findNodeOfType, - renderToText, - replaceNodesMatching, -} from "@silverbulletmd/silverbullet/lib/tree"; -import { markdown } from "@silverbulletmd/silverbullet/syscalls"; -import { isLocalPath } from "@silverbulletmd/silverbullet/lib/resolve"; - -export function encodePageUrl(name: string): string { - return name; -} - -export async function cleanMarkdown( - text: string, - validPages?: string[], -): Promise { - const mdTree = await markdown.parseMarkdown(text); - replaceNodesMatching(mdTree, (n) => { - if (n.type === "WikiLink") { - const page = n.children![1].children![0].text!; - if (validPages && !validPages.includes(page)) { - return { - // HACK - text: `_${page}_`, - }; - } - return { - // HACK - text: `[${page}](/${encodePageUrl(page)})`, - }; - } - // Simply get rid of these - if ( - n.type === "CommentBlock" || - n.type === "Comment" || - n.type === "NamedAnchor" - ) { - return null; - } - if (n.type === "Hashtag") { - return { - text: `__${n.children![0].text}__`, - }; - } - if (n.type === "URL") { - const url = n.children![0].text!; - if (isLocalPath(url)) { - n.children![0].text = `fs/${url}`; - } - console.log("Link", url); - } - if (n.type === "FencedCode") { - const codeInfoNode = findNodeOfType(n, "CodeInfo"); - if (!codeInfoNode) { - return; - } - if (codeInfoNode.children![0].text === "meta") { - return null; - } - } - }); - return renderToText(mdTree); -} diff --git a/server/http_server.ts b/server/http_server.ts index 9d6c110c..c05bb053 100644 --- a/server/http_server.ts +++ b/server/http_server.ts @@ -11,7 +11,7 @@ import { SpaceServer } from "./space_server.ts"; import type { KvPrimitives } from "../lib/data/kv_primitives.ts"; import { extendedMarkdownLanguage } from "../web/markdown_parser/parser.ts"; import { parse } from "../web/markdown_parser/parse_tree.ts"; -import { renderMarkdownToHtml } from "../plugs/markdown/markdown_render.ts"; +import { renderMarkdownToHtml } from "../web/markdown/markdown_render.ts"; import { decodePageURI, looksLikePathWithExtension, @@ -19,7 +19,7 @@ import { import { LockoutTimer } from "./lockout.ts"; import type { AuthOptions } from "../cmd/server.ts"; import type { ClientConfig } from "../web/client.ts"; -import { htmlEscape } from "../plugs/markdown/html_render.ts"; +import { htmlEscape } from "../web/markdown/html_render.ts"; import { applyUrlPrefix, removeUrlPrefix } from "../lib/url_prefix.ts"; const authenticationExpirySeconds = 60 * 60 * 24 * 7; // 1 week diff --git a/web/cm_plugins/lua_widget.ts b/web/cm_plugins/lua_widget.ts index 48aba7c5..bcf22f25 100644 --- a/web/cm_plugins/lua_widget.ts +++ b/web/cm_plugins/lua_widget.ts @@ -1,6 +1,6 @@ import { WidgetType } from "@codemirror/view"; import type { Client } from "../client.ts"; -import { renderMarkdownToHtml } from "../../plugs/markdown/markdown_render.ts"; +import { renderMarkdownToHtml } from "../markdown/markdown_render.ts"; import { isLocalPath, resolvePath, diff --git a/web/cm_plugins/table.ts b/web/cm_plugins/table.ts index d6600470..9e589a21 100644 --- a/web/cm_plugins/table.ts +++ b/web/cm_plugins/table.ts @@ -7,7 +7,7 @@ import { isCursorInRange, } from "./util.ts"; -import { renderMarkdownToHtml } from "../../plugs/markdown/markdown_render.ts"; +import { renderMarkdownToHtml } from "../markdown/markdown_render.ts"; import { type ParseTree, renderToText } from "../../plug-api/lib/tree.ts"; import { lezerToParseTree } from "../markdown_parser/parse_tree.ts"; import type { Client } from "../client.ts"; diff --git a/plugs/markdown/html_render.test.ts b/web/markdown/html_render.test.ts similarity index 100% rename from plugs/markdown/html_render.test.ts rename to web/markdown/html_render.test.ts diff --git a/plugs/markdown/html_render.ts b/web/markdown/html_render.ts similarity index 100% rename from plugs/markdown/html_render.ts rename to web/markdown/html_render.ts diff --git a/web/markdown/markdown_render.test.ts b/web/markdown/markdown_render.test.ts new file mode 100644 index 00000000..4b4118be --- /dev/null +++ b/web/markdown/markdown_render.test.ts @@ -0,0 +1,109 @@ +import { parse } from "../markdown_parser/parse_tree.ts"; + +import { renderMarkdownToHtml } from "./markdown_render.ts"; +import { extendedMarkdownLanguage } from "../markdown_parser/parser.ts"; +import { assertEquals } from "@std/assert"; + +const sampleMarkdown = `--- +name: Sup +--- + +# Hello world + +This is **bold** and _italic_, or _italic_. And a **_mix_**. And ==highlight==! + +Lists: + +- This +- Is a +- list +- And here we go nested +1. This is a numbered +2. Two +- And different +- Bla +- More bla + +And: + +1. Numbered +2. Two + +## Second heading + +And some + +And like this: + + More code + Bla + +And a blockquote: + +> Sup yo Empty line\ +> Second part + + + +And more custom stuff [[Page link]] + +{[Command button]} + +- [ ] #next Task +- [x] #next Task 2 + + +## Tables + +| type | actor_login | created_at | payload_ref | +| --------- | ----------- | -------------------- | ---------------------- | +| PushEvent | avb | 2022-10-27T08:27:48Z | refs/heads/master | +| PushEvent | avb | 2022-10-27T04:31:27Z | refs/heads/jitterSched | + +Here is something + +--- + +A new thing. +`; + +Deno.test("Markdown render", () => { + const tree = parse(extendedMarkdownLanguage, sampleMarkdown); + renderMarkdownToHtml(tree, { + failOnUnknown: true, + }); +}); + +Deno.test("Smart hard break test", () => { + const example = `**Hello** +*world!*`; + const tree = parse(extendedMarkdownLanguage, example); + const html = renderMarkdownToHtml(tree, { + failOnUnknown: true, + smartHardBreak: true, + }); + assertEquals( + html, + `Hello
world!`, + ); + + const example2 = `This is going to be a text. With a new line. + +And another + +* and a list +* with a second item + +### [[Bla]] + Url: something + Server: something else + ๐Ÿ“… last_updated - [Release notes](release_notes_url)`; + + const tree2 = parse(extendedMarkdownLanguage, example2); + const html2 = renderMarkdownToHtml(tree2, { + failOnUnknown: true, + smartHardBreak: true, + }); + + console.log(html2); +}); diff --git a/plugs/markdown/markdown_render.ts b/web/markdown/markdown_render.ts similarity index 100% rename from plugs/markdown/markdown_render.ts rename to web/markdown/markdown_render.ts diff --git a/web/syscalls/markdown.ts b/web/syscalls/markdown.ts index c0e51d54..efd611fe 100644 --- a/web/syscalls/markdown.ts +++ b/web/syscalls/markdown.ts @@ -5,6 +5,10 @@ import { extendedMarkdownLanguage } from "../markdown_parser/parser.ts"; import { expandMarkdown } from "../markdown.ts"; import type { Client } from "../client.ts"; import { LuaStackFrame } from "../../lib/space_lua/runtime.ts"; +import { + type MarkdownRenderOptions, + renderMarkdownToHtml, +} from "../markdown/markdown_render.ts"; export function markdownSyscalls(client: Client): SysCallMapping { return { @@ -22,5 +26,13 @@ export function markdownSyscalls(client: Client): SysCallMapping { LuaStackFrame.lostFrame, ); }, + "markdown.markdownToHtml": ( + _ctx, + text: string, + options: MarkdownRenderOptions = {}, + ) => { + const mdTree = parse(extendedMarkdownLanguage, text); + return renderMarkdownToHtml(mdTree, options); + }, }; }