Add blockViewType

package.json

@@ -1,7 +1,7 @@
 {
   "name": "roamjs-components",
   "description": "Expansive toolset, utilities, & components for developing RoamJS extensions.",
-  "version": "0.86.5",
+  "version": "0.86.6",
   "main": "index.js",
   "types": "index.d.ts",
   "scripts": {

src/queries/getFullTreeByParentUid.ts

@@ -1,4 +1,4 @@
-import type { PullBlock, TreeNode, ViewType } from "../types";
+import type { BlockViewType, PullBlock, TreeNode, ViewType } from "../types";
 
 const formatRoamNode = (n: PullBlock | null): TreeNode => {
   if (!n)
@@ -11,6 +11,7 @@ const formatRoamNode = (n: PullBlock | null): TreeNode => {
       parents: [],
       heading: 0,
       viewType: "bullet",
+      blockViewType: "outline",
       editTime: new Date(0),
       props: { imageResize: {}, iframe: {} },
       textAlign: "left",
@@ -19,13 +20,16 @@ const formatRoamNode = (n: PullBlock | null): TreeNode => {
     ((n[":block/parents"] || [])
       .find((a) => typeof a[":children/view-type"] === "string")
       ?.[":children/view-type"]?.replace?.(/^:/, "") as ViewType) || "bullet";
+  const blockViewType =
+    (n[":block/view-type"]?.replace?.(/^:/, "") as BlockViewType) || "outline";
   return {
     text: n[":block/string"] || n[":node/title"] || "",
     open: typeof n[":block/open"] === "undefined" ? true : n[":block/open"],
     order: n[":block/order"] || 0,
     uid: n[":block/uid"] || "",
     heading: n[":block/heading"] || 0,
     viewType,
+    blockViewType,
     editTime: new Date(n[":edit/time"] || 0),
     props: { imageResize: {}, iframe: {} },
     textAlign: n[":block/text-align"] || "left",
@@ -46,6 +50,7 @@ const getFullTreeByParentUid = (uid: string): TreeNode =>
       :block/order 
       :block/heading 
       :block/open 
+      :block/view-type
       :children/view-type
       :block/text-align
       :edit/time 

src/testing/mockRoamEnvironment.ts

@@ -1425,6 +1425,9 @@ const mockRoamEnvironment = () => {
         ":db/id": id,
         ":block/order": action.location.order,
       };
+      if (typeof action.block["view-type"] !== "undefined") {
+        (block as PullBlock)[":block/view-type"] = `:${action.block["view-type"]}`;
+      }
       graph.uids[block[":block/uid"]] = id;
       parentBlock[":block/children"] = (
         parentBlock[":block/children"] || []
@@ -1457,6 +1460,9 @@ const mockRoamEnvironment = () => {
           ":children/view-type"
         ] = `:${action.block["children-view-type"]}`;
       }
+      if (typeof action.block["view-type"] !== "undefined") {
+        graph.state[block][":block/view-type"] = `:${action.block["view-type"]}`;
+      }
     },
     createPage: async (action) => {
       if (!action.page) throw new Error(`page field is required`);

src/types/native.ts

@@ -225,6 +225,7 @@ export type RoamPull = {
   "block/parents"?: RoamNode[];
   "block/refs"?: RoamNode[];
   "block/string"?: string;
+  "block/view-type"?: `:${BlockViewType}`;
   "block/uid"?: string;
   "children/view-type"?: `:${ViewType}`;
   "create/time"?: number;
@@ -306,6 +307,7 @@ export type BlockViewType =
   | "tabs"
   | "outline"
   | "horizontal"
+  | "horizontal-outline"
   | "popout"
   | "comment"
   | "side"
@@ -339,6 +341,7 @@ export type TreeNode = {
   heading: number;
   open: boolean;
   viewType: ViewType;
+  blockViewType: BlockViewType;
   editTime: Date;
   textAlign: TextAlignment;
   props: {
@@ -369,6 +372,7 @@ export type InputTextNode = {
   heading?: number;
   textAlign?: TextAlignment;
   viewType?: ViewType;
+  blockViewType?: BlockViewType;
   open?: boolean;
   props?: Record<string, unknown>;
 };
@@ -417,6 +421,7 @@ export type ActionParams = {
     heading?: number;
     "text-align"?: TextAlignment;
     "children-view-type"?: ViewType;
+    "view-type"?: BlockViewType;
     props?: Record<string, unknown>;
   };
   page?: {

src/writes/createBlock.ts

@@ -9,6 +9,7 @@ export const gatherActions = ({
     heading,
     viewType,
     textAlign,
+    blockViewType,
     open = true,
     props,
   },
@@ -28,6 +29,7 @@ export const gatherActions = ({
         heading,
         "text-align": textAlign,
         "children-view-type": viewType,
+        "view-type": blockViewType,
         open,
         props,
       },

src/writes/updateBlock.ts

@@ -7,6 +7,7 @@ const updateBlock = ({
   heading,
   textAlign,
   viewType,
+  blockViewType,
   open,
   props,
 }: { uid: string } & Partial<
@@ -22,6 +23,7 @@ const updateBlock = ({
           heading,
           "text-align": textAlign,
           "children-view-type": viewType,
+          "view-type": blockViewType,
           open,
           props,
         },