add editor header & img inlineTool

backstage/static/js/editor.js

@@ -125,6 +125,14 @@ axios.get(contentApiUrl).then(({ data }) => {
           ),
         },
       });
+    } else if (blocks[i]["type"] == "header1") {
+      blocks[i]["text"] = blocks[i]["text"]
+        .replace("### **", "")
+        .replace("**", "");
+      editorBlocks.push({
+        type: "header",
+        data: { level: 1, text: blocks[i]["text"] },
+      });
     } else if (blocks[i]["type"] == "title") {
       blocks[i]["text"] = blocks[i]["text"]
         .replace("### **", "")
@@ -133,6 +141,38 @@ axios.get(contentApiUrl).then(({ data }) => {
       //tmp = document.createElement('h3');
       //tmp.innerHTML = blocks[i]['text'];
       //odiv.appendChild(tmp);
+    } else if (blocks[i]["type"] == "header3") {
+      blocks[i]["text"] = blocks[i]["text"]
+        .replace("### **", "")
+        .replace("**", "");
+      editorBlocks.push({
+        type: "header",
+        data: { level: 3, text: blocks[i]["text"] },
+      });
+    } else if (blocks[i]["type"] == "header4") {
+      blocks[i]["text"] = blocks[i]["text"]
+        .replace("### **", "")
+        .replace("**", "");
+      editorBlocks.push({
+        type: "header",
+        data: { level: 4, text: blocks[i]["text"] },
+      });
+    } else if (blocks[i]["type"] == "header5") {
+      blocks[i]["text"] = blocks[i]["text"]
+        .replace("### **", "")
+        .replace("**", "");
+      editorBlocks.push({
+        type: "header",
+        data: { level: 5, text: blocks[i]["text"] },
+      });
+    } else if (blocks[i]["type"] == "header6") {
+      blocks[i]["text"] = blocks[i]["text"]
+        .replace("### **", "")
+        .replace("**", "");
+      editorBlocks.push({
+        type: "header",
+        data: { level: 6, text: blocks[i]["text"] },
+      });
     } else if (blocks[i]["type"] == "hr") {
       editorBlocks.push({ type: "paragraph", data: { text: "---" } });
     } else if (blocks[i]["type"] == "mt5") {
@@ -165,6 +205,7 @@ axios.get(contentApiUrl).then(({ data }) => {
 
       image: {
         class: ImageTool,
+        inlineToolbar: ["link"],
         config: {
           endpoints: {
             byFile:
@@ -246,7 +287,32 @@ function editorSave() {
 
               block = outputData.blocks[i];
               if (block.type == "header") {
-                mdContent += "## " + block.data.text + "\n";
+                let tag = "";
+                switch (block.data.level) {
+                  case 1:
+                    tag = "# ";
+                    break;
+                  case 2:
+                    tag = "## ";
+                    break;
+                  case 3:
+                    tag = "### ";
+                    break;
+                  case 4:
+                    tag = "#### ";
+                    break;
+                  case 5:
+                    tag = "##### ";
+                    break;
+                  case 6:
+                    tag = "###### ";
+                    break;
+                  default:
+                    break;
+                }
+                mdContent += tag + block.data.text + "\n";
+                // mdContent += `<h${block.data.level}>${block.data.text}</h${block.data.level}>`;
+                // mdContent += "## " + block.data.text + "\n";
               } else if (block.type == "paragraph") {
                 paragraphdata += block.data.text;
 
@@ -323,7 +389,31 @@ function editorSave() {
 
           block = outputData.blocks[i];
           if (block.type == "header") {
-            mdContent += "## " + block.data.text + "\n";
+            let tag = "";
+            switch (block.data.level) {
+              case 1:
+                tag = "# ";
+                break;
+              case 2:
+                tag = "## ";
+                break;
+              case 3:
+                tag = "### ";
+                break;
+              case 4:
+                tag = "#### ";
+                break;
+              case 5:
+                tag = "##### ";
+                break;
+              case 6:
+                tag = "###### ";
+                break;
+              default:
+                break;
+            }
+            mdContent += tag + block.data.text + "\n";
+            // mdContent += "## " + block.data.text + "\n";
           } else if (block.type == "paragraph") {
             paragraphdata += block.data.text;
 
@@ -349,7 +439,8 @@ function editorSave() {
             }
             mdContent += "\n\n";
           } else if (block.type == "delimiter") {
-            mdContent += "\n---\n";
+            // mdContent += "\n---\n";
+            mdContent += "<br>";
           } else if (block.type == "embed") {
             mdContent +=
               "\n<iframe src=" +

backstage/static/js/yo.js

@@ -419,12 +419,20 @@ function parseMd(content) {
             .replaceAll("<br>", "\r\n")
         );
       }
+
       if (line.includes("question_box_intro: ")) {
         $("#cquestionboxintro").val(
           line.replace("question_box_intro: ", "").replaceAll('"', "")
         );
       }
 
+      // if (line.includes("blog_tags: ")) {
+      //   console.log('blog_tags line',line);
+      //   $("#cblogtags").val(
+      //     line.replace("blog_tags: ", "").replaceAll('"', "")
+      //   );
+      // }
+
       //for collections
       if (line.includes("banner_img_text: ")) {
         $("#ccoverimgtxt").val(
@@ -570,11 +578,43 @@ function parseMd(content) {
       continue;
     }
 
-    if (line.includes("##")) {
+    /* header start */
+    if ((line.match(/#/g) || []).length === 1) {
+      line = line.replaceAll("#", "");
+      rblocks.push({ type: "header1", text: line });
+      continue;
+    } 
+
+    if ((line.match(/#/g) || []).length === 2) {
       line = line.replaceAll("##", "");
       rblocks.push({ type: "title", text: line });
       continue;
+    } 
+    
+    if ((line.match(/#/g) || []).length === 3) {
+      line = line.replaceAll("###", "");
+      rblocks.push({ type: "header3", text: line });
+      continue;
+    }
+
+    if ((line.match(/#/g) || []).length === 4) {
+      line = line.replaceAll("####", "");
+      rblocks.push({ type: "header4", text: line });
+      continue;
+    }
+
+    if ((line.match(/#/g) || []).length === 5) {
+      line = line.replaceAll("#####", "");
+      rblocks.push({ type: "header5", text: line });
+      continue;
+    }
+
+    if ((line.match(/#/g) || []).length === 6) {
+      line = line.replaceAll("######", "");
+      rblocks.push({ type: "header6", text: line });
+      continue;
     }
+    /* header end */
 
     if (line.includes('{{% chuz-div class="mt-5" %}}')) {
       rblocks.push({ type: "mt5", text: line });