Moderate re-factoring; CSS Styles; README

main.ts

@@ -31,7 +31,6 @@ export default class BlurPlugin extends Plugin {
 	}
 
   async blurBlockHandler(type: ComponentChoice, source: string, el: HTMLElement, ctx: any): Promise<any> {
-    const element:any = document.createRange().createContextualFragment(source)
     if (el.className==='block-language-blur-brick') {
       const block = el.createEl("div", {cls: "blur-brick-block"})
       let inputElement: HTMLElement
@@ -39,7 +38,8 @@ export default class BlurPlugin extends Plugin {
       source.split(/\W+/).forEach((w:string) => {
         let word = w.trim();
         if (word !== '') {
-          inputElement.appendChild(createEl('code', {text: word, cls: "blur-brick" })); 
+          //redact w/ char '█'  &block; █
+          inputElement.appendChild(createEl('code', {text: word.replace(/[^\s]/g, '█'), cls: "blur-brick" })); 
         }
       })
     }
@@ -57,7 +57,13 @@ export default class BlurPlugin extends Plugin {
     else if (el.className==='block-language-blur') {
       const block = el.createEl("div", {cls: "blur-block"})
       let inputElement: HTMLElement
-      inputElement = block.createEl("div", {text: source, cls: "blur-innerblock"})
+      inputElement = block.createEl("div", {text: '', cls: "blur-innerblock"})
+      source.split(/\W+/).forEach((w:string) => {
+        let word = w.trim();
+        if (word !== '') {
+          inputElement.appendChild(createEl('code', {text: word, cls: "blur-inline"})); 
+        }
+      })
     }
 	}
 }
@@ -66,20 +72,24 @@ export function buildPostProcessor(): MarkdownPostProcessor {
 	return (el) => {
     el.findAll("code").forEach((code) => {
       let text = code.innerText.trim();
-      if (text.startsWith('~[]')) {
-        let blur = text.substring(3).trim();
+      if (text.startsWith('~[') && text.endsWith(']')) {
+        let part = text.substring(1);
+        let content = part.substring(part.length-1,1);
         code.addClass('blur-brick');
-        code.innerText=blur;
+        //redact w/ char '█'  &block; █
+        code.innerText=content.replace(/[^\s]/g, '█');
       }
-      else if (text.startsWith('~{}')) {
-        let blur = text.substring(3).trim();
-          code.addClass('blur-inline');
-          code.innerText=blur;
+      else if (text.startsWith("~(") && text.endsWith(')')) {
+        let part = text.substring(1);
+        let content = part.substring(part.length-1,1);
+        code.addClass('blur-bone');
+        code.innerText=content;
       }
-      else if (text.startsWith("~()")) {
-        let blur = text.substring(3).trim();
-          code.addClass('blur-bone');
-          code.innerText=blur;
+      else if (text.startsWith('~{') && text.endsWith('}')) {
+        let part = text.substring(1);
+        let content = part.substring(part.length-1,1);
+        code.addClass('blur-inline');
+        code.innerText=content;
       }
     })
   }

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "obsidian-blur",
 	"name": "Obsidian Blur",
-	"version": "0.0.2",
+	"version": "0.0.3",
 	"minAppVersion": "0.15.0",
 	"description": "Obsidian plugin for creating obfuscated blocks of text.",
 	"author": "@gapmiss",

styles.css

@@ -1,9 +1,9 @@
 :root {
   --obsidian-blur-bone-border-radius:1.33em;
   --obsidian-blur-bone-line-height:1;
-  --obsidian-blur-brick-border-radius:.33em;
+  --obsidian-blur-brick-border-radius:1px;
   --obsidian-blur-brick-line-height:1;
-  --obsidian-blur-filter:3.3px;
+  --obsidian-blur-filter:5px;
 }
 body.theme-dark {
   --obsidian-blur-brick-color:hsla(220,100%,100%,1);
@@ -16,17 +16,15 @@ body.theme-light {
 div.blur-block {
 	filter: blur(var(--obsidian-blur-filter)) !important;
 	-webkit-filter: blur(var(--obsidian-blur-filter)) !important;
-  /* background-color: transparent !important; */
 }
 .obsidian-blur-hover div.blur-block:hover {
 	filter: blur(0px) !important;
 	-webkit-filter: blur(0px) !important;
-  /* background-color: transparent !important; */
 }
 code.blur-inline {
   filter: blur(var(--obsidian-blur-filter)) !important;
 	-webkit-filter: blur(var(--obsidian-blur-filter)) !important;
-  /* background-color: transparent !important; */
+  display:inline-block !important;
 }
 .obsidian-blur-hover code.blur-inline:hover {
   filter: blur(0) !important;
@@ -37,27 +35,24 @@ code.blur-bone {
   color: var(--obsidian-blur-bone-color) !important;
   border-radius: var(--obsidian-blur-bone-border-radius) !important;
   line-height: var(--obsidian-blur-bone-line-height) !important;
+  display:inline-block !important;
 }
 .obsidian-blur-hover code.blur-bone:hover {
   background-color: transparent !important;
-  /* color: inherit !important; */
 }
 code.blur-brick {
   background-color: var(--obsidian-blur-brick-color) !important;
   color: var(--obsidian-blur-brick-color) !important;
   border-radius: var(--obsidian-blur-brick-border-radius) !important;
-  /* color: transparent !important; */
   line-height: var(--obsidian-blur-brick-line-height) !important;
+  display:inline-block !important;
 }
 .obsidian-blur-hover code.blur-brick:hover {
   background-color: transparent !important;
-  /* color: inherit !important; */
 }
 .blur-bone-innerblock code.blur-bone {
-  margin-right: 10px !important;
-  margin-block: calc(2 + var(--obsidian-blur-bone-line-height)px);
+  margin: .25em;
 }
 .blur-brick-innerblock code.blur-brick {
-  margin-right: 3px;
-  padding-right: 6px;
+  margin: .25em;
 }

versions.json

@@ -1,4 +1,5 @@
 {
+	"0.0.3": "0.15.0",
 	"0.0.2": "0.15.0",
 	"0.0.1": "0.15.0"
 }