Decorated Blocks & Live Preview fixes (#426)

* remove defaultEnabled, update README

* consolidate camel case "WorkBench"

* 1.2.1

* async getParseRoamMarked()

* 1.2.2

* update decorated blocks documentation

* live preview padding fix

* refactor parseRoamMarked await

* remove defaultEnabled, update README

* async getParseRoamMarked()

* 1.2.2

* update decorated blocks documentation

* live preview padding fix

* refactor parseRoamMarked await

Author: mdroidian

docs/decorated-blocks.md

@@ -8,14 +8,39 @@ Toggle the Decorated Blocks module on inside WorkBench.
 
 ![](media/toggle-decorated-blocks.png)
 
-Once enabled, a command will become enabled, `Toggle Block Decorators`. This will open a dialog allowing the user to specify which type of block decorations they would like to their graph. The following are supported:
+Once enabled, a command will become enabled, `Toggle Block Decorators`. This will open a dialog allowing the user to specify which type of block decorations they would like to their graph.
 
-Move Todos Enabled - a right facing triangle will appear next to blocks that have TODOs. Clicking this button will will bring up a date time popover, giving users the option to move the block to a future date.
+It's possible to assign a unique hotkey to this command, should you prefer to do so. To accomplish this, navigate to either `Settings` > `Hotkeys` or the WorkBench Extension Settings.
 
-Move Tags Enabled - a right facing triangle will appear next to blocks that have a tag. Clicking this button will will bring up a date time popover, giving users the option to move the block to a future date.
+The following decorations are supported:
 
-Context Enabled - Replace the `parent` tag with a rendering of the parent block and the `page` tag with a rendering of the block's page name.
+## Move Todos Enabled
 
-Hex Color Preview Enabled - Tags that are 6 alpha numeric characters will display the color the tag represents.
+![](media/decorated-blocks-move-todos.png)
 
-It's possible to assign a unique hotkey to this command, should you prefer to do so. To accomplish this, navigate to either `Settings` > `Hotkeys` or the WorkBench Extension Settings.
+On a Daily Notes Page, When you hover over a block that contains a `TODO`, a right facing triangle will appear to the right.
+
+Clicking this button will will bring up a date time popover, giving users the option to move the block to a future date.
+
+## Move Tags Enabled
+
+![](media/decorated-blocks-move-tags.png)
+
+On a Daily Notes Page, When you hover over a tag (eg. `#someTag` or `[[someTag]]`), a right facing triangle will appear to the right.
+
+Clicking this button will will bring up a date time popover, giving users the option to move the block to a future date.
+
+## Context Enabled
+
+![](media/decorated-blocks-context.png)
+
+Enabling this will
+
+- replace a `#parent` tag with a rendering of the parent block
+- a `#page` tag with a rendering of the block's page name.
+
+## Hex Color Preview Enabled
+
+![](media/decorated-blocks-hex-color.png)
+
+Tags that are 6 alpha numeric characters will display the color the tag represents. (eg. `#880808`)

docs/media/decorated-blocks-context.png

@@ -23,7 +23,7 @@
     "@types/mozilla-readability": "^0.2.0",
     "@types/turndown": "^5.0.1"
   },
-  "version": "1.2.1",
+  "version": "1.2.2",
   "samepage": {
     "extends": "node_modules/roamjs-components/package.json"
   }

docs/media/decorated-blocks-hex-color.png

@@ -311,11 +311,14 @@ const DecoratorSettings = ({ isOpen, onClose }: RoamOverlayProps) => {
   );
 };
 
-export const toggleFeature = (flag: boolean, extensionAPI: OnloadArgs["extensionAPI"] ) => {
+export const toggleFeature = (
+  flag: boolean,
+  extensionAPI: OnloadArgs["extensionAPI"]
+) => {
   if (flag) {
     extensionAPI.ui.commandPalette.addCommand({
       label: "(WB) Toggle Block Decorators",
-      callback: () => renderOverlay({ Overlay: DecoratorSettings}),
+      callback: () => renderOverlay({ Overlay: DecoratorSettings }),
     });
     toggleDecorations(true);
   } else {
@@ -331,9 +334,9 @@ const unloads = new Set<() => void>();
 export const toggleDecorations = (flag: boolean) => {
   if (flag) {
     const archivedDefault = !!get("decoratorsMoveArchives"); // Improve the UX for this if feature is re-requested
-    
+
     const opts = JSON.parse(localStorageGet("decorators") || "{}") as Record<
-      typeof settings[number],
+      (typeof settings)[number],
       boolean
     >;
     if (opts["Move Todos Enabled"]) {
@@ -411,32 +414,34 @@ export const toggleDecorations = (flag: boolean) => {
         getParseInline().then(
           (parseInline) => (text: string) => parseInline(text, context)
         );
-      let parseRoamMarked: Awaited<ReturnType<typeof getParseRoamMarked>>;
-      getParseRoamMarked().then((f) => (parseRoamMarked = f));
-      const parentTagObserver = createHashtagObserver({
-        attribute: "data-roamjs-context-parent",
-        callback: (s) => {
-          if (s.getAttribute("data-tag") === "parent") {
-            const uid = getBlockUidFromTarget(s);
-            const parentUid = getParentUidByBlockUid(uid);
-            const parentText = getTextByBlockUid(parentUid);
-            s.className = "rm-block-ref dont-focus-block";
-            s.style.userSelect = "none";
-            s.innerHTML = parseRoamMarked(parentText);
-            s.onmousedown = (e) => e.stopPropagation();
-            s.onclick = (e) => {
-              if (e.shiftKey) {
-                openBlockInSidebar(parentUid);
-              } else {
-                window.roamAlphaAPI.ui.mainWindow.openBlock({
-                  block: { uid: parentUid },
-                });
-              }
-            };
-          }
-        },
-      });
-      unloads.add(() => parentTagObserver.disconnect());
+      const init = async () => {
+        const parseRoamMarked = await getParseRoamMarked();
+        const parentTagObserver = createHashtagObserver({
+          attribute: "data-roamjs-context-parent",
+          callback: (s) => {
+            if (s.getAttribute("data-tag") === "parent") {
+              const uid = getBlockUidFromTarget(s);
+              const parentUid = getParentUidByBlockUid(uid);
+              const parentText = getTextByBlockUid(parentUid);
+              s.className = "rm-block-ref dont-focus-block";
+              s.style.userSelect = "none";
+              s.innerHTML = parseRoamMarked(parentText);
+              s.onmousedown = (e) => e.stopPropagation();
+              s.onclick = (e) => {
+                if (e.shiftKey) {
+                  openBlockInSidebar(parentUid);
+                } else {
+                  window.roamAlphaAPI.ui.mainWindow.openBlock({
+                    block: { uid: parentUid },
+                  });
+                }
+              };
+            }
+          },
+        });
+        unloads.add(() => parentTagObserver.disconnect());
+      };
+      init();
 
       const pageTagObserver = createHashtagObserver({
         attribute: "data-roamjs-context-page",

docs/media/decorated-blocks-move-tags.png

@@ -66,7 +66,7 @@ const TooltipContent = ({
         ref={containerRef}
         className={"roamjs-workbench-live-preview"}
         style={{
-          paddingTop: !isEmpty ? 16 : 0,
+          padding: "0 24px",
         }}
       >
         {isEmpty && (
@@ -189,17 +189,7 @@ export const toggleFeature = (flag: boolean) => {
       },
     });
     addStyle(
-      `.roamjs-workbench-live-preview>div>div>.rm-block-main,
-.roamjs-workbench-live-preview>div>div>.rm-inline-references,
-.roamjs-workbench-live-preview>div>div>.rm-block-children>.rm-multibar {
-  display: none;
-}
-
-.roamjs-workbench-live-preview>div>div>.rm-block-children {
-  margin-left: -4px;
-}
-
-.roamjs-workbench-live-preview {
+      `.roamjs-workbench-live-preview {
   overflow-y: scroll;
 }
 

docs/media/decorated-blocks-move-todos.png

@@ -152,6 +152,7 @@ export default runExtension(async ({ extensionAPI, extension }) => {
   FEATURES.forEach(({ id, module }) => {
     const flag = extensionAPI.settings.get(id);
     const unset = typeof flag === "undefined" || flag === null;
+    if (unset) extensionAPI.settings.set(id, false);
     flags.push(unset || flag === false ? false : (flag as boolean));
     module.toggleFeature(unset ? false : (flag as boolean), extensionAPI);
   });