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);
});
}
});