feat: slideout editor new new new!

db.js

@@ -3,6 +3,7 @@ const path = require("path");
 const betterSqlite3 = require("better-sqlite3");
 const { LRUCache } = require("lru-cache");
 const { Eta } = require("eta");
+const cheerio = require("cheerio");
 
 const db = betterSqlite3("./dbs/0.sqlite");
 
@@ -91,6 +92,37 @@ function getAllRoutes() {
 
 const templateCache = new LRUCache({ max: 100 });
 
+function annotateTemplateHtml(html, template) {
+  function annotate($, element) {
+    const current = $(element).attr("data-bliss-templates");
+    let templates = [];
+    if (current) {
+      try {
+        templates = JSON.parse(current);
+      } catch (_) {}
+    }
+    if (!templates.some((item) => String(item.id) === String(template.id))) {
+      templates.push({ id: String(template.id), name: template.name });
+    }
+    $(element).attr("data-bliss-templates", JSON.stringify(templates));
+    if (!$(element).attr("data-bliss-template-id")) {
+      $(element).attr({
+        "data-bliss-template-id": String(template.id),
+        "data-bliss-template-name": template.name,
+      });
+    }
+  }
+  const lower = html.trimStart().toLowerCase();
+  if (lower.startsWith("<html") || lower.startsWith("<!doctype")) {
+    const $ = cheerio.load(html);
+    annotate($, $("body")[0]);
+    return $.html();
+  }
+  const $ = cheerio.load(html, null, false);
+  for (const child of $.root().children()) annotate($, child);
+  return $.html();
+}
+
 function getTemplater(structId) {
   let etaInstance = templateCache.get(structId);
 
@@ -102,6 +134,13 @@ function getTemplater(structId) {
     etaInstance.readFile = function (templateAlias) {
       return getTemplateContentByName(structId, templateAlias).content;
     };
+    const etaRender = etaInstance.render;
+    etaInstance.render = function (templateName, data, meta) {
+      const html = etaRender.call(this, templateName, data, meta);
+      if (typeof templateName !== "string") return html;
+      const template = getTemplateByName(structId, templateName);
+      return template ? annotateTemplateHtml(html, template) : html;
+    };
     templateCache.set(structId, etaInstance);
   }
 
@@ -245,6 +284,7 @@ function updateStruct(struct) {
 
 function updateTemplate(template) {
   update("templates", ["content", "name", "test_object"], template);
+  templateCache.delete(template.structure_id);
   recordVersion("template", template.id, template.structure_id, template);
 }
 
@@ -266,6 +306,12 @@ function getTemplateContentByName(structId, name) {
     .get(structId, name);
 }
 
+function getTemplateByName(structId, name) {
+  return db
+    .prepare("SELECT * from templates where structure_id = ? AND name = ?")
+    .get(structId, name);
+}
+
 function createTemplate(structureId, name, content, testObjectString) {
   const id = db
     .prepare(
@@ -686,6 +732,7 @@ module.exports = {
   getTemplates,
   getTemplate,
   getTemplateContentByName,
+  getTemplateByName,
   createTemplate,
   getDbsForStructure,
   getDb,