added sql render webcomponent

main.ts

@@ -19,6 +19,7 @@ import {
 	registerTextInput, 
 	registerTimestampUpdaterButton, 
 	registerSqlChartRenderer, 
+	registerSqlRenderer,
 	registerMoodNoteButtonProcessor,
 	registerAddTextSupport
 } from "./src/webcomponents";
@@ -49,9 +50,11 @@ export default class SQLiteDBPlugin extends Plugin {
 		});
 
 		registerSqlChartRenderer(this, this.dbService);
+		registerSqlRenderer(this, this.dbService);
         registerTimestampUpdaterButton(this);
         registerMoodNoteButtonProcessor(this, this.dbService);
 		registerAddTextSupport(this, this.dbService);
+
 		
 		//? Codeblocks
 		this.registerMarkdownCodeBlockProcessor(

src/webcomponents/Sql/registerSql.ts

@@ -0,0 +1,49 @@
+import { MarkdownPostProcessorContext, Plugin } from 'obsidian';
+import { DBService } from '../../DBService';
+import { processSqlBlock } from '../../codeblocks/processSqlBlock';
+import { replacePlaceholders } from 'src/helpers/replacePlaceholders';
+
+export function registerSqlRenderer(plugin: Plugin, dbService: DBService) {
+
+    plugin.registerMarkdownPostProcessor(
+        async (el: HTMLElement, ctx: MarkdownPostProcessorContext) => {
+
+            // Find all divs with the class 'sql-render' inside the rendered element 'el'
+            const chartContainers = el.querySelectorAll<HTMLElement>('div.sql-render');
+
+            if (chartContainers.length === 0) {
+                return;
+            }
+
+            await Promise.all(Array.from(chartContainers).map(async (container) => {
+                if (container.dataset.sqlProcessed) {
+                    return;
+                }
+                // Mark as processed
+                container.dataset.sqlProcessed = 'true';
+
+                const source = container.innerHTML.trim();
+                const parsedSource = replacePlaceholders(source);
+                container.innerHTML = ''; // Clear the container
+
+                if (!source) {
+                    container.createEl("p", { text: "Error: SQL Chart configuration block is empty." });
+                    console.warn("Empty sql-render block found", container);
+                    return;
+                }
+
+                const loadingEl = container.createEl("p", { text: "Loading SQL..." });
+
+                try {
+                    await processSqlBlock(dbService, parsedSource, container);
+                    loadingEl.remove();
+                } catch (error: any) {
+                    console.error("Error rendering SQL from div:", error);
+                    container.innerHTML = '';
+                    container.createEl("p", { text: "Error rendering SQL:" });
+                    container.createEl("pre", { text: String(error.message || error) });
+                }
+            }));
+        }
+    );
+}

src/webcomponents/index.ts

@@ -3,7 +3,17 @@ import { registerBooleanSwitch } from "./BooleanSwitch/registerBooleanSwitch";
 import { registerTextInput } from "./TextInput/registerTextInput";
 import { registerTimestampUpdaterButton } from "./TimestampUpdaterButton/registerTimestampUpdaterButton";
 import { registerSqlChartRenderer } from "./SqlChart/registerSqlChart";
+import { registerSqlRenderer } from "./Sql/registerSql";
 import { registerMoodNoteButtonProcessor } from "./MoodNote/moodButtonProcessor";
 import { registerAddTextSupport } from "./AddTextButton/AddTextButton";
 
-export { registerHabitCounter, registerBooleanSwitch, registerTextInput, registerTimestampUpdaterButton, registerSqlChartRenderer, registerMoodNoteButtonProcessor, registerAddTextSupport };
+export { 
+    registerHabitCounter, 
+    registerBooleanSwitch, 
+    registerTextInput, 
+    registerTimestampUpdaterButton, 
+    registerSqlChartRenderer, 
+    registerSqlRenderer, 
+    registerMoodNoteButtonProcessor, 
+    registerAddTextSupport 
+};