roamjs-components 0.85.3 → 0.85.4

package/components/BlockInput.js

@@ -1,56 +1,56 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const core_1 = require("@blueprintjs/core");
-const react_1 = tslib_1.__importStar(require("react"));
-const getAllBlockUidsAndTexts_1 = tslib_1.__importDefault(require("../queries/getAllBlockUidsAndTexts"));
-const useArrowKeyDown_1 = tslib_1.__importDefault(require("../hooks/useArrowKeyDown"));
-const searchBlocksByString = (q, blocks) => {
-    const regex = new RegExp(q, "i");
-    return blocks.filter((a) => regex.test(a.text)).slice(0, 9);
-};
-const BlockInput = ({ value, setValue, onBlur, onConfirm, getAllBlocks = getAllBlockUidsAndTexts_1.default, autoFocus, }) => {
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const open = (0, react_1.useCallback)(() => setIsOpen(true), [setIsOpen]);
-    const close = (0, react_1.useCallback)(() => setIsOpen(false), [setIsOpen]);
-    const allBlocks = (0, react_1.useMemo)(getAllBlocks, []);
-    const items = (0, react_1.useMemo)(() => (value && isOpen ? searchBlocksByString(value, allBlocks) : []), [value, allBlocks]);
-    const menuRef = (0, react_1.useRef)(null);
-    const inputRef = (0, react_1.useRef)(null);
-    const { activeIndex, onKeyDown } = (0, useArrowKeyDown_1.default)({
-        onEnter: (value) => {
-            if (isOpen) {
-                setValue(value.text, value.uid);
-                close();
-            }
-            else if (onConfirm) {
-                onConfirm();
-            }
-        },
-        results: items,
-        menuRef,
-    });
-    return (react_1.default.createElement(core_1.Popover, { portalClassName: "roamjs-block-input", targetClassName: "roamjs-block-input-target", captureDismiss: true, isOpen: isOpen, onOpened: open, minimal: true, autoFocus: false, enforceFocus: false, position: core_1.PopoverPosition.BOTTOM_LEFT, modifiers: {
-            flip: { enabled: false },
-            preventOverflow: { enabled: false },
-        }, content: react_1.default.createElement(core_1.Menu, { className: "max-h-64 overflow-auto max-w-md", ulRef: menuRef }, items.map((t, i) => (react_1.default.createElement(core_1.MenuItem, { text: t.text, active: activeIndex === i, key: t.uid, multiline: true, onClick: () => {
-                var _a;
-                setValue(t.text, t.uid);
-                close();
-                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            } })))), target: react_1.default.createElement(core_1.InputGroup, { value: value || "", onChange: (e) => {
-                setValue(e.target.value);
-                setIsOpen(!!e.target.value);
-            }, placeholder: "Search for a block", onKeyDown: onKeyDown, onBlur: (e) => {
-                var _a, _b;
-                if (e.relatedTarget &&
-                    !((_b = (_a = e.relatedTarget).closest) === null || _b === void 0 ? void 0 : _b.call(_a, ".roamjs-block-input"))) {
-                    close();
-                }
-                if (onBlur) {
-                    onBlur(e.target.value);
-                }
-            }, inputRef: inputRef, autoFocus: autoFocus }) }));
-};
-exports.default = BlockInput;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const core_1 = require("@blueprintjs/core");
+const react_1 = tslib_1.__importStar(require("react"));
+const getAllBlockUidsAndTexts_1 = tslib_1.__importDefault(require("../queries/getAllBlockUidsAndTexts"));
+const useArrowKeyDown_1 = tslib_1.__importDefault(require("../hooks/useArrowKeyDown"));
+const searchBlocksByString = (q, blocks) => {
+    const regex = new RegExp(q, "i");
+    return blocks.filter((a) => regex.test(a.text)).slice(0, 9);
+};
+const BlockInput = ({ value, setValue, onBlur, onConfirm, getAllBlocks = getAllBlockUidsAndTexts_1.default, autoFocus, }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const open = (0, react_1.useCallback)(() => setIsOpen(true), [setIsOpen]);
+    const close = (0, react_1.useCallback)(() => setIsOpen(false), [setIsOpen]);
+    const allBlocks = (0, react_1.useMemo)(getAllBlocks, []);
+    const items = (0, react_1.useMemo)(() => (value && isOpen ? searchBlocksByString(value, allBlocks) : []), [value, allBlocks]);
+    const menuRef = (0, react_1.useRef)(null);
+    const inputRef = (0, react_1.useRef)(null);
+    const { activeIndex, onKeyDown } = (0, useArrowKeyDown_1.default)({
+        onEnter: (value) => {
+            if (isOpen) {
+                setValue(value.text, value.uid);
+                close();
+            }
+            else if (onConfirm) {
+                onConfirm();
+            }
+        },
+        results: items,
+        menuRef,
+    });
+    return (react_1.default.createElement(core_1.Popover, { portalClassName: "roamjs-block-input", targetClassName: "roamjs-block-input-target", captureDismiss: true, isOpen: isOpen, onOpened: open, minimal: true, autoFocus: false, enforceFocus: false, position: core_1.PopoverPosition.BOTTOM_LEFT, modifiers: {
+            flip: { enabled: false },
+            preventOverflow: { enabled: false },
+        }, content: react_1.default.createElement(core_1.Menu, { className: "max-h-64 overflow-auto max-w-md", ulRef: menuRef }, items.map((t, i) => (react_1.default.createElement(core_1.MenuItem, { text: t.text, active: activeIndex === i, key: t.uid, multiline: true, onClick: () => {
+                var _a;
+                setValue(t.text, t.uid);
+                close();
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            } })))), target: react_1.default.createElement(core_1.InputGroup, { value: value || "", onChange: (e) => {
+                setValue(e.target.value);
+                setIsOpen(!!e.target.value);
+            }, placeholder: "Search for a block", onKeyDown: onKeyDown, onBlur: (e) => {
+                var _a, _b;
+                if (e.relatedTarget &&
+                    !((_b = (_a = e.relatedTarget).closest) === null || _b === void 0 ? void 0 : _b.call(_a, ".roamjs-block-input"))) {
+                    close();
+                }
+                if (onBlur) {
+                    onBlur(e.target.value);
+                }
+            }, inputRef: inputRef, autoFocus: autoFocus }) }));
+};
+exports.default = BlockInput;
 //# sourceMappingURL=BlockInput.js.map

package/components/ComponentContainer.d.ts

@@ -1,10 +1,10 @@
-import React from "react";
-import { OnloadArgs } from "../types/native";
-declare const ComponentContainer: React.FunctionComponent<{
-    blockId?: string;
-    className?: string;
-}>;
-export declare const createComponentRender: (Fc: (props: {
-    blockUid: string;
-}) => React.ReactElement, className?: string) => (b: HTMLButtonElement, args?: OnloadArgs) => void;
-export default ComponentContainer;
+import React from "react";
+import { OnloadArgs } from "../types/native";
+declare const ComponentContainer: React.FunctionComponent<{
+    blockId?: string;
+    className?: string;
+}>;
+export declare const createComponentRender: (Fc: (props: {
+    blockUid: string;
+}) => React.ReactElement, className?: string) => (b: HTMLButtonElement, args?: OnloadArgs) => void;
+export default ComponentContainer;

package/components/ComponentContainer.js

@@ -1,38 +1,38 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createComponentRender = void 0;
-const tslib_1 = require("tslib");
-const core_1 = require("@blueprintjs/core");
-const react_1 = tslib_1.__importStar(require("react"));
-const getUidsFromId_1 = tslib_1.__importDefault(require("../dom/getUidsFromId"));
-const getBlockUidFromTarget_1 = tslib_1.__importDefault(require("../dom/getBlockUidFromTarget"));
-const renderWithUnmount_1 = tslib_1.__importDefault(require("../util/renderWithUnmount"));
-const ComponentContainer = ({ blockId, className, children }) => {
-    const [showIcons, setShowIcons] = (0, react_1.useState)(false);
-    const appear = (0, react_1.useCallback)(() => setShowIcons(true), [setShowIcons]);
-    const disappear = (0, react_1.useCallback)(() => setShowIcons(false), [setShowIcons]);
-    const { blockUid, windowId } = (0, getUidsFromId_1.default)(blockId);
-    return (react_1.default.createElement("div", { className: className, onMouseOver: appear, onMouseLeave: disappear, style: { position: "relative", width: "fit-content", minWidth: 300 } },
-        showIcons && (react_1.default.createElement("div", { className: "roamjs-edit-component absolute top-2 right-2 z-50" }, blockId && (react_1.default.createElement(core_1.Button, { icon: "edit", minimal: true, onClick: () => window.roamAlphaAPI.ui.setBlockFocusAndSelection({
-                location: { "block-uid": blockUid, "window-id": windowId },
-            }) })))),
-        children));
-};
-const createComponentRender = (Fc, className) => (b, args) => {
-    var _a, _b;
-    if (b.parentElement) {
-        b.parentElement.onmousedown = (e) => e.stopPropagation();
-        const blockUid = (0, getBlockUidFromTarget_1.default)(b);
-        const possibleBlockId = (_a = b.closest(".roam-block")) === null || _a === void 0 ? void 0 : _a.id;
-        const blockId = ((_b = possibleBlockId === null || possibleBlockId === void 0 ? void 0 : possibleBlockId.endsWith) === null || _b === void 0 ? void 0 : _b.call(possibleBlockId, blockUid))
-            ? possibleBlockId
-            : undefined;
-        if (blockUid) {
-            (0, renderWithUnmount_1.default)(react_1.default.createElement(ComponentContainer, { blockId: blockId, className: className },
-                react_1.default.createElement(Fc, { blockUid: blockUid })), b.parentElement, args);
-        }
-    }
-};
-exports.createComponentRender = createComponentRender;
-exports.default = ComponentContainer;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createComponentRender = void 0;
+const tslib_1 = require("tslib");
+const core_1 = require("@blueprintjs/core");
+const react_1 = tslib_1.__importStar(require("react"));
+const getUidsFromId_1 = tslib_1.__importDefault(require("../dom/getUidsFromId"));
+const getBlockUidFromTarget_1 = tslib_1.__importDefault(require("../dom/getBlockUidFromTarget"));
+const renderWithUnmount_1 = tslib_1.__importDefault(require("../util/renderWithUnmount"));
+const ComponentContainer = ({ blockId, className, children }) => {
+    const [showIcons, setShowIcons] = (0, react_1.useState)(false);
+    const appear = (0, react_1.useCallback)(() => setShowIcons(true), [setShowIcons]);
+    const disappear = (0, react_1.useCallback)(() => setShowIcons(false), [setShowIcons]);
+    const { blockUid, windowId } = (0, getUidsFromId_1.default)(blockId);
+    return (react_1.default.createElement("div", { className: className, onMouseOver: appear, onMouseLeave: disappear, style: { position: "relative", width: "fit-content", minWidth: 300 } },
+        showIcons && (react_1.default.createElement("div", { className: "roamjs-edit-component absolute top-2 right-2 z-50" }, blockId && (react_1.default.createElement(core_1.Button, { icon: "edit", minimal: true, onClick: () => window.roamAlphaAPI.ui.setBlockFocusAndSelection({
+                location: { "block-uid": blockUid, "window-id": windowId },
+            }) })))),
+        children));
+};
+const createComponentRender = (Fc, className) => (b, args) => {
+    var _a, _b;
+    if (b.parentElement) {
+        b.parentElement.onmousedown = (e) => e.stopPropagation();
+        const blockUid = (0, getBlockUidFromTarget_1.default)(b);
+        const possibleBlockId = (_a = b.closest(".roam-block")) === null || _a === void 0 ? void 0 : _a.id;
+        const blockId = ((_b = possibleBlockId === null || possibleBlockId === void 0 ? void 0 : possibleBlockId.endsWith) === null || _b === void 0 ? void 0 : _b.call(possibleBlockId, blockUid))
+            ? possibleBlockId
+            : undefined;
+        if (blockUid) {
+            (0, renderWithUnmount_1.default)(react_1.default.createElement(ComponentContainer, { blockId: blockId, className: className },
+                react_1.default.createElement(Fc, { blockUid: blockUid })), b.parentElement, args);
+        }
+    }
+};
+exports.createComponentRender = createComponentRender;
+exports.default = ComponentContainer;
 //# sourceMappingURL=ComponentContainer.js.map

package/components/ConfigPage.d.ts

@@ -1,35 +1,35 @@
-import React from "react";
-import type { Field, UnionField } from "./ConfigPanels/types";
-import { Brand } from "./ConfigPanels/getBrandColors";
-export declare type ConfigTab = {
-    id: string;
-    toggleable?: boolean | "premium";
-    onEnable?: () => void;
-    onDisable?: () => void;
-    development?: boolean;
-    fields: Field<UnionField>[];
-};
-declare type Config = {
-    tabs: ConfigTab[];
-    versioning?: boolean;
-    brand?: Brand;
-} | Field<UnionField>[];
-declare const ConfigPage: ({ id, config, pageUid, }: {
-    id: string;
-    config: Config;
-    pageUid: string;
-}) => React.ReactElement;
-export declare const render: ({ h, title, pageUid, config, }: {
-    h: HTMLHeadingElement;
-    title: string;
-    pageUid?: string | undefined;
-    config: Config;
-}) => void;
-export declare const createConfigObserver: ({ title, config, }: {
-    title: string;
-    config: Config;
-}) => Promise<{
-    pageUid: string;
-    observer?: MutationObserver | undefined;
-}>;
-export default ConfigPage;
+import React from "react";
+import type { Field, UnionField } from "./ConfigPanels/types";
+import { Brand } from "./ConfigPanels/getBrandColors";
+export declare type ConfigTab = {
+    id: string;
+    toggleable?: boolean | "premium";
+    onEnable?: () => void;
+    onDisable?: () => void;
+    development?: boolean;
+    fields: Field<UnionField>[];
+};
+declare type Config = {
+    tabs: ConfigTab[];
+    versioning?: boolean;
+    brand?: Brand;
+} | Field<UnionField>[];
+declare const ConfigPage: ({ id, config, pageUid, }: {
+    id: string;
+    config: Config;
+    pageUid: string;
+}) => React.ReactElement;
+export declare const render: ({ h, title, pageUid, config, }: {
+    h: HTMLHeadingElement;
+    title: string;
+    pageUid?: string | undefined;
+    config: Config;
+}) => void;
+export declare const createConfigObserver: ({ title, config, }: {
+    title: string;
+    config: Config;
+}) => Promise<{
+    pageUid: string;
+    observer?: MutationObserver | undefined;
+}>;
+export default ConfigPage;

package/components/ConfigPage.js

@@ -1,160 +1,160 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createConfigObserver = exports.render = void 0;
-const tslib_1 = require("tslib");
-const core_1 = require("@blueprintjs/core");
-const react_1 = tslib_1.__importStar(require("react"));
-const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
-const createHTMLObserver_1 = tslib_1.__importDefault(require("../dom/createHTMLObserver"));
-const createBlock_1 = tslib_1.__importDefault(require("../writes/createBlock"));
-const createPage_1 = tslib_1.__importDefault(require("../writes/createPage"));
-const getBasicTreeByParentUid_1 = tslib_1.__importDefault(require("../queries/getBasicTreeByParentUid"));
-const getPageUidByPageTitle_1 = tslib_1.__importDefault(require("../queries/getPageUidByPageTitle"));
-const getShallowTreeByParentUid_1 = tslib_1.__importDefault(require("../queries/getShallowTreeByParentUid"));
-const localStorageGet_1 = tslib_1.__importDefault(require("../util/localStorageGet"));
-const idToTitle_1 = tslib_1.__importDefault(require("../util/idToTitle"));
-const FieldTabs = ({ id, fields, uid, pageUid, order, toggleable, }) => {
-    const parentUid = (0, react_1.useMemo)(() => {
-        if (/home/i.test(id)) {
-            return pageUid;
-        }
-        if (uid) {
-            return uid;
-        }
-        if (toggleable) {
-            return "";
-        }
-        const newUid = window.roamAlphaAPI.util.generateUID();
-        (0, createBlock_1.default)({
-            parentUid: pageUid,
-            order,
-            node: { text: id, uid: newUid },
-        });
-        return newUid;
-    }, [pageUid, uid, id, toggleable]);
-    const childUids = Object.fromEntries((0, getShallowTreeByParentUid_1.default)(parentUid).map(({ text, uid }) => [
-        text.toLowerCase().trim(),
-        uid,
-    ]));
-    const [selectedTabId, setSelectedTabId] = (0, react_1.useState)(fields.length && typeof toggleable !== "string"
-        ? fields[0].title
-        : "enabled");
-    const onTabsChange = (0, react_1.useCallback)((tabId) => setSelectedTabId(tabId), [setSelectedTabId]);
-    return (react_1.default.createElement(core_1.Tabs, { vertical: true, id: `${id}-field-tabs`, onChange: onTabsChange, selectedTabId: selectedTabId, renderActiveTabPanelOnly: true }, fields.map((field, i) => {
-        const { Panel, title, defaultValue } = field;
-        return (react_1.default.createElement(core_1.Tab, { id: title, key: title, title: (0, idToTitle_1.default)(title), panel: react_1.default.createElement(Panel, Object.assign({}, field, { defaultValue: defaultValue, order: i, parentUid: parentUid, uid: childUids[title.toLowerCase()] })) }));
-    })));
-};
-const ConfigPage = ({ id, config, pageUid, }) => {
-    var _a;
-    const isLegacy = "tabs" in config;
-    const userTabs = isLegacy
-        ? config.tabs.filter((t) => t.fields.length || t.toggleable)
-        : [{ fields: config, id: "home" }];
-    const [selectedTabId, setSelectedTabId] = (0, react_1.useState)((_a = userTabs[0]) === null || _a === void 0 ? void 0 : _a.id);
-    const onTabsChange = (0, react_1.useCallback)((tabId) => setSelectedTabId(tabId), [setSelectedTabId]);
-    const tree = (0, getBasicTreeByParentUid_1.default)(pageUid);
-    // first character trimmed intentionally for the `v` below
-    const titleRef = (0, react_1.useRef)(null);
-    const experimentalMode = (0, react_1.useMemo)(() => (0, localStorageGet_1.default)("experimental"), []);
-    return (react_1.default.createElement(core_1.Card, { style: { color: "#202B33" }, className: "roamjs-config-panel" },
-        react_1.default.createElement("div", { style: { display: "flex", justifyContent: "space-between" }, ref: titleRef, tabIndex: -1 },
-            react_1.default.createElement("h4", { style: { padding: 4 } },
-                (0, idToTitle_1.default)(id),
-                " Configuration")),
-        react_1.default.createElement("style", null, `.roamjs-config-tabs {\npadding: 4px;\n}`),
-        isLegacy ? (react_1.default.createElement(core_1.Tabs, { id: `${id}-config-tabs`, onChange: onTabsChange, selectedTabId: selectedTabId, renderActiveTabPanelOnly: true, className: "roamjs-config-tabs" }, userTabs.map(({ id: tabId, fields, toggleable, development = false, onEnable, onDisable, }, i) => {
-            var _a;
-            return (react_1.default.createElement(core_1.Tab, { id: tabId, key: tabId, title: (0, idToTitle_1.default)(tabId), disabled: development && !experimentalMode, panel: react_1.default.createElement(FieldTabs, { id: tabId, extensionId: id, fields: fields, uid: ((_a = tree.find((t) => new RegExp(tabId, "i").test(t.text))) === null || _a === void 0 ? void 0 : _a.uid) || "", pageUid: pageUid, order: i, toggleable: toggleable, onEnable: onEnable, onDisable: onDisable }) }));
-        }))) : (react_1.default.createElement(FieldTabs, { id: "home", extensionId: id, fields: config, uid: pageUid, pageUid: pageUid, order: 0, toggleable: false }))));
-};
-// TODO: better nested type discrimination here
-const fieldsToChildren = (fields) => fields
-    .filter((f) => !!f.defaultValue)
-    .map((f) => {
-    var _a;
-    return ({
-        text: f.title,
-        children: f.Panel.type === "flag"
-            ? []
-            : f.Panel.type === "custom"
-                ? f.defaultValue || []
-                : f.Panel.type === "pages" || f.Panel.type === "multitext"
-                    ? (_a = f.defaultValue) === null || _a === void 0 ? void 0 : _a.map((v) => ({ text: v }))
-                    : f.Panel.type === "block"
-                        ? f.defaultValue
-                            ? [f.defaultValue]
-                            : []
-                        : [{ text: `${f.defaultValue}` }],
-    });
-});
-const createConfigPage = ({ title, config, }) => {
-    var _a;
-    const homeTab = "tabs" in config
-        ? (_a = config.tabs.find((t) => /home/i.test(t.id))) === null || _a === void 0 ? void 0 : _a.fields
-        : config;
-    const rawTree = [
-        ...(homeTab ? fieldsToChildren(homeTab) : []),
-        ...("tabs" in config
-            ? config.tabs
-                .filter((t) => !/home/i.test(t.id) && !t.toggleable && !t.development)
-                .map((t) => ({
-                text: t.id,
-                children: fieldsToChildren(t.fields),
-            }))
-            : []),
-    ];
-    return (0, createPage_1.default)({
-        title,
-        tree: rawTree.length ? rawTree : [{ text: " " }],
-    });
-};
-const render = ({ h, title, pageUid = (0, getPageUidByPageTitle_1.default)(title), config, }) => {
-    var _a, _b;
-    const uid = (0, getPageUidByPageTitle_1.default)(title);
-    const attribute = `data-roamjs-${uid}`;
-    const containerParent = (_a = h.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
-    if (containerParent && !containerParent.hasAttribute(attribute)) {
-        containerParent.setAttribute(attribute, "true");
-        const parent = document.createElement("div");
-        const configPageId = title.split("/").slice(-1)[0];
-        parent.id = `${configPageId}-config`;
-        containerParent.insertBefore(parent, ((_b = h.parentElement) === null || _b === void 0 ? void 0 : _b.nextElementSibling) || null);
-        react_dom_1.default.render(react_1.default.createElement(ConfigPage, { id: configPageId, config: config, pageUid: pageUid }), parent);
-    }
-};
-exports.render = render;
-const createConfigObserver = ({ title, config, }) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-    const pageUid = (0, getPageUidByPageTitle_1.default)(title) ||
-        (yield createConfigPage({
-            title,
-            config,
-        }));
-    if ("tabs" in config ? !!config.tabs.length : !!config.length) {
-        const observer = (0, createHTMLObserver_1.default)({
-            className: "rm-title-display",
-            tag: "H1",
-            callback: (d) => {
-                const h = d;
-                if (h.innerText === title) {
-                    (0, exports.render)({
-                        pageUid,
-                        config,
-                        title,
-                        h,
-                    });
-                }
-            },
-        });
-        return {
-            pageUid,
-            observer,
-        };
-    }
-    return {
-        pageUid,
-    };
-});
-exports.createConfigObserver = createConfigObserver;
-exports.default = ConfigPage;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createConfigObserver = exports.render = void 0;
+const tslib_1 = require("tslib");
+const core_1 = require("@blueprintjs/core");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+const createHTMLObserver_1 = tslib_1.__importDefault(require("../dom/createHTMLObserver"));
+const createBlock_1 = tslib_1.__importDefault(require("../writes/createBlock"));
+const createPage_1 = tslib_1.__importDefault(require("../writes/createPage"));
+const getBasicTreeByParentUid_1 = tslib_1.__importDefault(require("../queries/getBasicTreeByParentUid"));
+const getPageUidByPageTitle_1 = tslib_1.__importDefault(require("../queries/getPageUidByPageTitle"));
+const getShallowTreeByParentUid_1 = tslib_1.__importDefault(require("../queries/getShallowTreeByParentUid"));
+const localStorageGet_1 = tslib_1.__importDefault(require("../util/localStorageGet"));
+const idToTitle_1 = tslib_1.__importDefault(require("../util/idToTitle"));
+const FieldTabs = ({ id, fields, uid, pageUid, order, toggleable, }) => {
+    const parentUid = (0, react_1.useMemo)(() => {
+        if (/home/i.test(id)) {
+            return pageUid;
+        }
+        if (uid) {
+            return uid;
+        }
+        if (toggleable) {
+            return "";
+        }
+        const newUid = window.roamAlphaAPI.util.generateUID();
+        (0, createBlock_1.default)({
+            parentUid: pageUid,
+            order,
+            node: { text: id, uid: newUid },
+        });
+        return newUid;
+    }, [pageUid, uid, id, toggleable]);
+    const childUids = Object.fromEntries((0, getShallowTreeByParentUid_1.default)(parentUid).map(({ text, uid }) => [
+        text.toLowerCase().trim(),
+        uid,
+    ]));
+    const [selectedTabId, setSelectedTabId] = (0, react_1.useState)(fields.length && typeof toggleable !== "string"
+        ? fields[0].title
+        : "enabled");
+    const onTabsChange = (0, react_1.useCallback)((tabId) => setSelectedTabId(tabId), [setSelectedTabId]);
+    return (react_1.default.createElement(core_1.Tabs, { vertical: true, id: `${id}-field-tabs`, onChange: onTabsChange, selectedTabId: selectedTabId, renderActiveTabPanelOnly: true }, fields.map((field, i) => {
+        const { Panel, title, defaultValue } = field;
+        return (react_1.default.createElement(core_1.Tab, { id: title, key: title, title: (0, idToTitle_1.default)(title), panel: react_1.default.createElement(Panel, Object.assign({}, field, { defaultValue: defaultValue, order: i, parentUid: parentUid, uid: childUids[title.toLowerCase()] })) }));
+    })));
+};
+const ConfigPage = ({ id, config, pageUid, }) => {
+    var _a;
+    const isLegacy = "tabs" in config;
+    const userTabs = isLegacy
+        ? config.tabs.filter((t) => t.fields.length || t.toggleable)
+        : [{ fields: config, id: "home" }];
+    const [selectedTabId, setSelectedTabId] = (0, react_1.useState)((_a = userTabs[0]) === null || _a === void 0 ? void 0 : _a.id);
+    const onTabsChange = (0, react_1.useCallback)((tabId) => setSelectedTabId(tabId), [setSelectedTabId]);
+    const tree = (0, getBasicTreeByParentUid_1.default)(pageUid);
+    // first character trimmed intentionally for the `v` below
+    const titleRef = (0, react_1.useRef)(null);
+    const experimentalMode = (0, react_1.useMemo)(() => (0, localStorageGet_1.default)("experimental"), []);
+    return (react_1.default.createElement(core_1.Card, { style: { color: "#202B33" }, className: "roamjs-config-panel" },
+        react_1.default.createElement("div", { style: { display: "flex", justifyContent: "space-between" }, ref: titleRef, tabIndex: -1 },
+            react_1.default.createElement("h4", { style: { padding: 4 } },
+                (0, idToTitle_1.default)(id),
+                " Configuration")),
+        react_1.default.createElement("style", null, `.roamjs-config-tabs {\npadding: 4px;\n}`),
+        isLegacy ? (react_1.default.createElement(core_1.Tabs, { id: `${id}-config-tabs`, onChange: onTabsChange, selectedTabId: selectedTabId, renderActiveTabPanelOnly: true, className: "roamjs-config-tabs" }, userTabs.map(({ id: tabId, fields, toggleable, development = false, onEnable, onDisable, }, i) => {
+            var _a;
+            return (react_1.default.createElement(core_1.Tab, { id: tabId, key: tabId, title: (0, idToTitle_1.default)(tabId), disabled: development && !experimentalMode, panel: react_1.default.createElement(FieldTabs, { id: tabId, extensionId: id, fields: fields, uid: ((_a = tree.find((t) => new RegExp(tabId, "i").test(t.text))) === null || _a === void 0 ? void 0 : _a.uid) || "", pageUid: pageUid, order: i, toggleable: toggleable, onEnable: onEnable, onDisable: onDisable }) }));
+        }))) : (react_1.default.createElement(FieldTabs, { id: "home", extensionId: id, fields: config, uid: pageUid, pageUid: pageUid, order: 0, toggleable: false }))));
+};
+// TODO: better nested type discrimination here
+const fieldsToChildren = (fields) => fields
+    .filter((f) => !!f.defaultValue)
+    .map((f) => {
+    var _a;
+    return ({
+        text: f.title,
+        children: f.Panel.type === "flag"
+            ? []
+            : f.Panel.type === "custom"
+                ? f.defaultValue || []
+                : f.Panel.type === "pages" || f.Panel.type === "multitext"
+                    ? (_a = f.defaultValue) === null || _a === void 0 ? void 0 : _a.map((v) => ({ text: v }))
+                    : f.Panel.type === "block"
+                        ? f.defaultValue
+                            ? [f.defaultValue]
+                            : []
+                        : [{ text: `${f.defaultValue}` }],
+    });
+});
+const createConfigPage = ({ title, config, }) => {
+    var _a;
+    const homeTab = "tabs" in config
+        ? (_a = config.tabs.find((t) => /home/i.test(t.id))) === null || _a === void 0 ? void 0 : _a.fields
+        : config;
+    const rawTree = [
+        ...(homeTab ? fieldsToChildren(homeTab) : []),
+        ...("tabs" in config
+            ? config.tabs
+                .filter((t) => !/home/i.test(t.id) && !t.toggleable && !t.development)
+                .map((t) => ({
+                text: t.id,
+                children: fieldsToChildren(t.fields),
+            }))
+            : []),
+    ];
+    return (0, createPage_1.default)({
+        title,
+        tree: rawTree.length ? rawTree : [{ text: " " }],
+    });
+};
+const render = ({ h, title, pageUid = (0, getPageUidByPageTitle_1.default)(title), config, }) => {
+    var _a, _b;
+    const uid = (0, getPageUidByPageTitle_1.default)(title);
+    const attribute = `data-roamjs-${uid}`;
+    const containerParent = (_a = h.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
+    if (containerParent && !containerParent.hasAttribute(attribute)) {
+        containerParent.setAttribute(attribute, "true");
+        const parent = document.createElement("div");
+        const configPageId = title.split("/").slice(-1)[0];
+        parent.id = `${configPageId}-config`;
+        containerParent.insertBefore(parent, ((_b = h.parentElement) === null || _b === void 0 ? void 0 : _b.nextElementSibling) || null);
+        react_dom_1.default.render(react_1.default.createElement(ConfigPage, { id: configPageId, config: config, pageUid: pageUid }), parent);
+    }
+};
+exports.render = render;
+const createConfigObserver = ({ title, config, }) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+    const pageUid = (0, getPageUidByPageTitle_1.default)(title) ||
+        (yield createConfigPage({
+            title,
+            config,
+        }));
+    if ("tabs" in config ? !!config.tabs.length : !!config.length) {
+        const observer = (0, createHTMLObserver_1.default)({
+            className: "rm-title-display",
+            tag: "H1",
+            callback: (d) => {
+                const h = d;
+                if (h.innerText === title) {
+                    (0, exports.render)({
+                        pageUid,
+                        config,
+                        title,
+                        h,
+                    });
+                }
+            },
+        });
+        return {
+            pageUid,
+            observer,
+        };
+    }
+    return {
+        pageUid,
+    };
+});
+exports.createConfigObserver = createConfigObserver;
+exports.default = ConfigPage;
 //# sourceMappingURL=ConfigPage.js.map

package/components/ConfigPanels/BlockPanel.d.ts

@@ -1,3 +1,3 @@
-import type { FieldPanel, BlockField } from "./types";
-declare const BlockPanel: FieldPanel<BlockField>;
-export default BlockPanel;
+import type { FieldPanel, BlockField } from "./types";
+declare const BlockPanel: FieldPanel<BlockField>;
+export default BlockPanel;