From 086fe54c7283359c170c7e9d1842117ef8da85c1 Mon Sep 17 00:00:00 2001 From: Raphael Forment Date: Sun, 5 Nov 2023 19:17:36 +0100 Subject: [PATCH] Folding now possible in documentation --- index.html | 24 +++++++++--------- src/Documentation.ts | 21 ++++++++------- src/DomElements.ts | 59 ++++++++++++++++++++++++------------------- src/InterfaceLogic.ts | 14 ++++++++-- 4 files changed, 69 insertions(+), 49 deletions(-) diff --git a/index.html b/index.html index 8ecd55f..b98fbe6 100644 --- a/index.html +++ b/index.html @@ -126,8 +126,8 @@
diff --git a/src/Documentation.ts b/src/Documentation.ts index a2dea88..0968d1a 100644 --- a/src/Documentation.ts +++ b/src/Documentation.ts @@ -24,14 +24,8 @@ import { bonus } from "./documentation/bonus"; // Setting up the Markdown converter with syntax highlighting import showdown from "showdown"; import showdownHighlight from "showdown-highlight"; +import { createDocumentationStyle } from "./DomElements"; showdown.setFlavor("github"); -import { classMap } from "./DomElements"; -const bindings = Object.keys(classMap).map((key) => ({ - type: "output", - regex: new RegExp(`<${key}([^>]*)>`, "g"), - //@ts-ignore - replace: (match, p1) => `<${key} class="${classMap[key]}" ${p1}>`, -})); export const key_shortcut = (shortcut: string): string => { return `${shortcut}`; @@ -64,6 +58,7 @@ export const makeExampleFactory = (application: Editor): Function => { }; export const documentation_factory = (application: Editor) => { + // Initialize a data structure to store code examples by their unique IDs application.api.codeExamples = {}; @@ -93,6 +88,7 @@ export const documentation_factory = (application: Editor) => { }; export const showDocumentation = (app: Editor) => { + if (document.getElementById("app")?.classList.contains("hidden")) { document.getElementById("app")?.classList.remove("hidden"); document.getElementById("documentation")?.classList.add("hidden"); @@ -101,7 +97,14 @@ export const showDocumentation = (app: Editor) => { document.getElementById("app")?.classList.add("hidden"); document.getElementById("documentation")?.classList.remove("hidden"); // Load and convert Markdown content from the documentation file - updateDocumentationContent(app); + let style = createDocumentationStyle(app); + let bindings = Object.keys(style).map((key) => ({ + type: "output", + regex: new RegExp(`<${key}([^>]*)>`, "g"), + //@ts-ignore + replace: (match, p1) => `<${key} class="${style[key]}" ${p1}>`, + })); + updateDocumentationContent(app, bindings); } }; @@ -112,7 +115,7 @@ export const hideDocumentation = () => { } }; -export const updateDocumentationContent = (app: Editor) => { +export const updateDocumentationContent = (app: Editor, bindings: any) => { const converter = new showdown.Converter({ emoji: true, moreStyling: true, diff --git a/src/DomElements.ts b/src/DomElements.ts index 964711c..8e095e1 100644 --- a/src/DomElements.ts +++ b/src/DomElements.ts @@ -1,3 +1,6 @@ +import { type Editor } from "./main"; + + export type ElementMap = { [key: string]: | HTMLElement @@ -58,29 +61,33 @@ export const buttonGroups = { clear_buttons: ["clear-button-1"], }; -export const classMap = { - h1: "text-white lg:text-4xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 bg-neutral-900 rounded-lg py-2 px-2", - h2: "text-white lg:text-3xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 bg-neutral-900 rounded-lg py-2 px-2", - h3: "text-white lg:text-2xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 bg-neutral-700 rounded-lg py-2 px-2 lg:mt-16", - ul: "text-underline pl-6", - li: "list-disc lg:text-2xl text-base text-white lg:mx-4 mx-2 my-4 my-2 leading-normal", - p: "lg:text-2xl text-base text-white lg:mx-6 mx-2 my-4 leading-normal", - warning: - "animate-pulse lg:text-2xl font-bold text-rose-600 lg:mx-6 mx-2 my-4 leading-normal", - a: "lg:text-2xl text-base text-orange-300", - code: "lg:my-4 sm:my-1 text-base lg:text-xl block whitespace-pre overflow-x-hidden", - icode: - "lg:my-1 my-1 lg:text-xl sm:text-xs text-white font-mono bg-neutral-600", - ic: "lg:my-1 my-1 lg:text-xl sm:text-xs text-white font-mono bg-neutral-600", - blockquote: "text-neutral-200 border-l-4 border-neutral-500 pl-4 my-4 mx-4", - details: - "lg:mx-12 py-2 px-6 lg:text-2xl text-white rounded-lg bg-neutral-600", - summary: "font-semibold text-xl", - table: - "justify-center lg:my-12 my-2 lg:mx-12 mx-2 lg:text-2xl text-base w-full text-left text-white border-collapse", - thead: - "text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400", - th: "", - td: "", - tr: "", -}; +export const createDocumentationStyle = (app: Editor) => { + return { + h1: "text-white lg:text-4xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 bg-neutral-900 rounded-lg underline underline-offset-8 pt-2 pb-3 px-2", + h2: "text-white lg:text-3xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 bg-neutral-900 rounded-lg underline underline-offset-8 pt-2 pb-3 px-2", + h3: "text-white lg:text-2xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 bg-neutral-900 rounded-lg underline underline-offset-8 pt-2 pb-3 px-2 lg:mt-16", + ul: "text-underline pl-6", + li: "list-disc lg:text-2xl text-base text-white lg:mx-4 mx-2 my-4 my-2 leading-normal", + p: "lg:text-2xl text-base text-white lg:mx-6 mx-2 my-4 leading-normal", + warning: + "animate-pulse lg:text-2xl font-bold text-rose-600 lg:mx-6 mx-2 my-4 leading-normal", + a: "lg:text-2xl text-base text-orange-300", + code: `lg:my-4 sm:my-1 text-base lg:text-xl block whitespace-pre overflow-x-hidden`, + icode: + "lg:my-1 my-1 lg:text-xl sm:text-xs text-white font-mono bg-neutral-600", + ic: "lg:my-1 my-1 lg:text-xl sm:text-xs text-white font-mono bg-neutral-600", + blockquote: "text-neutral-200 border-l-4 border-neutral-500 pl-4 my-4 mx-4", + details: + "lg:mx-12 py-2 px-6 lg:text-2xl text-white rounded-lg bg-neutral-600", + summary: "font-semibold text-xl", + table: + "justify-center lg:my-12 my-2 lg:mx-12 mx-2 lg:text-2xl text-base w-full text-left text-white border-collapse", + thead: + "text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400", + th: "", + td: "", + tr: "", + }; +} + + diff --git a/src/InterfaceLogic.ts b/src/InterfaceLogic.ts index 18bb17d..de5c048 100644 --- a/src/InterfaceLogic.ts +++ b/src/InterfaceLogic.ts @@ -22,8 +22,18 @@ import { tryEvaluate } from "./Evaluator"; import { inlineHoveringTips } from "./documentation/inlineHelp"; import { lineNumbers } from "@codemirror/view"; import { jsCompletions } from "./EditorSetup"; +import { createDocumentationStyle } from "./DomElements"; export const installInterfaceLogic = (app: Editor) => { + // Initialize style + const documentationStyle = createDocumentationStyle(app); + const bindings = Object.keys(documentationStyle).map((key) => ({ + type: "output", + regex: new RegExp(`<${key}([^>]*)>`, "g"), + //@ts-ignore + replace: (match, p1) => `<${key} class="${documentationStyle[key]}" ${p1}>`, + })); + (app.interface.line_numbers_checkbox as HTMLInputElement).checked = app.settings.line_numbers; (app.interface.time_position_checkbox as HTMLInputElement).checked = @@ -469,13 +479,13 @@ export const installInterfaceLogic = (app: Editor) => { document.getElementById(name)!.addEventListener("click", async () => { if (name !== "docs_samples") { app.currentDocumentationPane = e; - updateDocumentationContent(app); + updateDocumentationContent(app, bindings); } else { console.log("Loading samples!"); await loadSamples().then(() => { app.docs = documentation_factory(app); app.currentDocumentationPane = e; - updateDocumentationContent(app); + updateDocumentationContent(app, bindings); }); } });