roamjs-components 0.86.0-alpha → 0.86.0-alpha.3

package/components/AutocompleteInput.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+declare type FilterOptions<T> = (options: T[], query: string) => T[];
+declare type OnNewItem<T> = (s: string) => T;
+declare type ItemToQuery<T> = (t?: T) => string;
+export declare type AutocompleteInputProps<T = string> = {
+    value?: T;
+    setValue: (q: T) => void;
+    showButton?: boolean;
+    onBlur?: (v: string) => void;
+    onConfirm?: () => void;
+    options?: T[];
+    placeholder?: string;
+    autoFocus?: boolean;
+    multiline?: boolean;
+    id?: string;
+    filterOptions?: FilterOptions<T>;
+    itemToQuery?: ItemToQuery<T>;
+    renderItem?: (props: {
+        item: T;
+        onClick: () => void;
+        active: boolean;
+    }) => React.ReactElement;
+    onNewItem?: OnNewItem<T>;
+    disabled?: boolean;
+    maxItemsDisplayed?: number;
+};
+declare const AutocompleteInput: <T extends unknown = string>({ value, setValue, onBlur, onConfirm, showButton, options, placeholder, autoFocus, multiline, id, filterOptions: _filterOptions, itemToQuery: _itemToQuery, renderItem, onNewItem: _onNewItem, disabled, maxItemsDisplayed, }: AutocompleteInputProps<T>) => React.ReactElement;
+export default AutocompleteInput;

package/components/AutocompleteInput.js

@@ -0,0 +1,121 @@
+"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 useArrowKeyDown_1 = tslib_1.__importDefault(require("../hooks/useArrowKeyDown"));
+const fuzzy_1 = tslib_1.__importDefault(require("fuzzy"));
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
+const AutocompleteInput = ({ value, setValue, onBlur, onConfirm, showButton, options = [], placeholder = "Enter value", autoFocus, multiline, id, filterOptions: _filterOptions, itemToQuery: _itemToQuery, renderItem, onNewItem: _onNewItem, disabled, maxItemsDisplayed = Infinity, }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const itemToQuery = (0, react_1.useMemo)(() => _itemToQuery || ((s) => (s ? `${s}` : "")), [_itemToQuery]);
+    const [query, setQuery] = (0, react_1.useState)(() => itemToQuery(value));
+    const open = (0, react_1.useCallback)(() => setIsOpen(true), [setIsOpen]);
+    const close = (0, react_1.useCallback)(() => setIsOpen(false), [setIsOpen]);
+    const [isTyping, setIsTyping] = (0, react_1.useState)(false);
+    const filterOptions = (0, react_1.useMemo)(() => _filterOptions ||
+        ((o, q) => fuzzy_1.default
+            .filter(q, o, { extract: itemToQuery })
+            .map((f) => f.original)
+            .filter((f) => !!f)), [_filterOptions, itemToQuery]);
+    const onNewItem = (0, react_1.useMemo)(() => _onNewItem || ((s) => s), [_onNewItem]);
+    const items = (0, react_1.useMemo)(() => (query ? filterOptions(options, query) : options).slice(0, maxItemsDisplayed), [query, options, filterOptions, maxItemsDisplayed]);
+    const menuRef = (0, react_1.useRef)(null);
+    const inputRef = (0, react_1.useRef)(null);
+    const onEnter = (0, react_1.useCallback)((value) => {
+        if (isOpen && value) {
+            setQuery(itemToQuery(value));
+            setValue(value);
+            setIsTyping(false);
+        }
+        else if (onConfirm) {
+            onConfirm();
+        }
+        else {
+            setIsOpen(true);
+        }
+    }, [setValue, onConfirm, isOpen]);
+    const { activeIndex, onKeyDown } = (0, useArrowKeyDown_1.default)({
+        onEnter,
+        results: items,
+        menuRef,
+    });
+    (0, react_1.useEffect)(() => {
+        if (!items.length || !isTyping)
+            close();
+        else
+            open();
+    }, [items, close, open, isTyping]);
+    (0, react_1.useEffect)(() => {
+        if (query && isOpen)
+            setValue(items[activeIndex] || onNewItem(query));
+        else if (query)
+            setValue(onNewItem(query));
+    }, [setValue, activeIndex, items, onNewItem, query]);
+    (0, react_1.useEffect)(() => {
+        if (inputRef.current &&
+            inputRef.current === document.activeElement &&
+            value) {
+            const index = itemToQuery(value).length;
+            inputRef.current.setSelectionRange(index, index);
+        }
+        const touchEndListener = (e) => {
+            if (!e.target ||
+                !menuRef.current ||
+                menuRef.current.contains(e.target)) {
+                return;
+            }
+            if (!inputRef.current || inputRef.current.contains(e.target)) {
+                return;
+            }
+            close();
+        };
+        document.body.addEventListener("touchend", touchEndListener);
+        return () => document.body.removeEventListener("touchend", touchEndListener);
+    }, [inputRef, menuRef, close]);
+    const Input = (0, react_1.useMemo)(() => (multiline ? core_1.TextArea : core_1.InputGroup), [multiline]);
+    return (react_1.default.createElement(core_1.Popover, { portalClassName: "roamjs-autocomplete-input", targetClassName: "roamjs-autocomplete-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) => {
+            const onClick = () => {
+                var _a;
+                setIsTyping(false);
+                setValue(t);
+                setQuery(itemToQuery(t));
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            };
+            const sharedProps = {
+                onClick,
+                onTouchEnd: onClick,
+                active: activeIndex === i,
+            };
+            return renderItem ? (react_1.default.createElement(react_1.default.Fragment, { key: i }, renderItem === null || renderItem === void 0 ? void 0 : renderItem(Object.assign({ item: t }, sharedProps)))) : (react_1.default.createElement(core_1.MenuItem, Object.assign({ text: itemToQuery(t), key: i, multiline: true }, sharedProps)));
+        })), target: react_1.default.createElement(Input, Object.assign({ disabled: disabled, value: query, onChange: (e) => {
+                setIsTyping(true);
+                setQuery(e.target.value);
+            }, autoFocus: autoFocus, placeholder: placeholder, onKeyDown: (e) => {
+                if (e.key === "Escape") {
+                    e.stopPropagation();
+                    close();
+                }
+                else {
+                    onKeyDown(e);
+                }
+            }, id: id, onClick: () => setIsTyping(true), onBlur: (e) => {
+                var _a, _b;
+                if (e.relatedTarget === null ||
+                    !((_b = (_a = e.relatedTarget).closest) === null || _b === void 0 ? void 0 : _b.call(_a, ".roamjs-autocomplete-input"))) {
+                    setIsTyping(false);
+                }
+                if (onBlur) {
+                    onBlur(e.target.value);
+                }
+            }, inputRef: inputRef }, (showButton
+            ? {
+                rightElement: (react_1.default.createElement(core_1.Button, { icon: "add", minimal: true, onClick: () => onEnter() })),
+            }
+            : {}))) }));
+};
+exports.default = AutocompleteInput;
+//# sourceMappingURL=AutocompleteInput.js.map

package/components/AutocompleteInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteInput.js","sourceRoot":"","sources":["../../src/components/AutocompleteInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  InputGroup,\n  Menu,\n  MenuItem,\n  PopoverPosition,\n  Popover,\n  Button,\n  TextArea,\n} from \"@blueprintjs/core\";\nimport React, {\n  useState,\n  useCallback,\n  useMemo,\n  useRef,\n  useEffect,\n} from \"react\";\nimport useArrowKeyDown from \"../hooks/useArrowKeyDown\";\nimport fuzzy from \"fuzzy\";\n\ntype FilterOptions<T> = (options: T[], query: string) => T[];\ntype OnNewItem<T> = (s: string) => T;\ntype ItemToQuery<T> = (t?: T) => string;\n\nexport type AutocompleteInputProps<T = string> = {\n  value?: T;\n  setValue: (q: T) => void;\n  showButton?: boolean;\n  onBlur?: (v: string) => void;\n  onConfirm?: () => void;\n  options?: T[];\n  placeholder?: string;\n  autoFocus?: boolean;\n  multiline?: boolean;\n  id?: string;\n  filterOptions?: FilterOptions<T>;\n  itemToQuery?: ItemToQuery<T>;\n  renderItem?: (props: {\n    item: T;\n    onClick: () => void;\n    active: boolean;\n  }) => React.ReactElement;\n  onNewItem?: OnNewItem<T>;\n  disabled?: boolean;\n  maxItemsDisplayed?: number;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\nconst AutocompleteInput = <T extends unknown = string>({\n  value,\n  setValue,\n  onBlur,\n  onConfirm,\n  showButton,\n  options = [],\n  placeholder = \"Enter value\",\n  autoFocus,\n  multiline,\n  id,\n  filterOptions: _filterOptions,\n  itemToQuery: _itemToQuery,\n  renderItem,\n  onNewItem: _onNewItem,\n  disabled,\n  maxItemsDisplayed = Infinity,\n}: AutocompleteInputProps<T>): React.ReactElement => {\n  const [isOpen, setIsOpen] = useState(false);\n  const itemToQuery = useMemo<ItemToQuery<T>>(\n    () => _itemToQuery || ((s) => (s ? `${s}` : \"\")),\n    [_itemToQuery]\n  );\n  const [query, setQuery] = useState<string>(() => itemToQuery(value));\n  const open = useCallback(() => setIsOpen(true), [setIsOpen]);\n  const close = useCallback(() => setIsOpen(false), [setIsOpen]);\n  const [isTyping, setIsTyping] = useState(false);\n  const filterOptions = useMemo<FilterOptions<T>>(\n    () =>\n      _filterOptions ||\n      ((o, q) =>\n        fuzzy\n          .filter(q, o, { extract: itemToQuery })\n          .map((f) => f.original)\n          .filter((f): f is T => !!f)),\n    [_filterOptions, itemToQuery]\n  );\n  const onNewItem = useMemo<OnNewItem<T>>(\n    () => _onNewItem || ((s) => s as T),\n    [_onNewItem]\n  );\n\n  const items = useMemo(\n    () =>\n      (query ? filterOptions(options, query) : options).slice(\n        0,\n        maxItemsDisplayed\n      ),\n    [query, options, filterOptions, maxItemsDisplayed]\n  );\n  const menuRef = useRef<HTMLUListElement>(null);\n  const inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n  const onEnter = useCallback(\n    (value?: T) => {\n      if (isOpen && value) {\n        setQuery(itemToQuery(value));\n        setValue(value);\n        setIsTyping(false);\n      } else if (onConfirm) {\n        onConfirm();\n      } else {\n        setIsOpen(true);\n      }\n    },\n    [setValue, onConfirm, isOpen]\n  );\n  const { activeIndex, onKeyDown } = useArrowKeyDown({\n    onEnter,\n    results: items,\n    menuRef,\n  });\n  useEffect(() => {\n    if (!items.length || !isTyping) close();\n    else open();\n  }, [items, close, open, isTyping]);\n  useEffect(() => {\n    if (query && isOpen) setValue(items[activeIndex] || onNewItem(query));\n    else if (query) setValue(onNewItem(query));\n  }, [setValue, activeIndex, items, onNewItem, query]);\n  useEffect(() => {\n    if (\n      inputRef.current &&\n      inputRef.current === document.activeElement &&\n      value\n    ) {\n      const index = itemToQuery(value).length;\n      inputRef.current.setSelectionRange(index, index);\n    }\n    const touchEndListener = (e: TouchEvent) => {\n      if (\n        !e.target ||\n        !menuRef.current ||\n        menuRef.current.contains(e.target as Element)\n      ) {\n        return;\n      }\n      if (!inputRef.current || inputRef.current.contains(e.target as Element)) {\n        return;\n      }\n      close();\n    };\n    document.body.addEventListener(\"touchend\", touchEndListener);\n    return () =>\n      document.body.removeEventListener(\"touchend\", touchEndListener);\n  }, [inputRef, menuRef, close]);\n  const Input = useMemo(() => (multiline ? TextArea : InputGroup), [multiline]);\n  return (\n    <Popover\n      portalClassName={\"roamjs-autocomplete-input\"}\n      targetClassName={\"roamjs-autocomplete-input-target\"}\n      captureDismiss={true}\n      isOpen={isOpen}\n      onOpened={open}\n      minimal\n      autoFocus={false}\n      enforceFocus={false}\n      position={PopoverPosition.BOTTOM_LEFT}\n      modifiers={{\n        flip: { enabled: false },\n        preventOverflow: { enabled: false },\n      }}\n      content={\n        <Menu className={\"max-h-64 overflow-auto max-w-md\"} ulRef={menuRef}>\n          {items.map((t, i) => {\n            const onClick = () => {\n              setIsTyping(false);\n              setValue(t);\n              setQuery(itemToQuery(t));\n              inputRef.current?.focus();\n            };\n            const sharedProps = {\n              onClick,\n              onTouchEnd: onClick,\n              active: activeIndex === i,\n            };\n            return renderItem ? (\n              <React.Fragment key={i}>\n                {renderItem?.({\n                  item: t,\n                  ...sharedProps,\n                })}\n              </React.Fragment>\n            ) : (\n              <MenuItem\n                text={itemToQuery(t)}\n                key={i}\n                multiline\n                {...sharedProps}\n              />\n            );\n          })}\n        </Menu>\n      }\n      target={\n        <Input\n          disabled={disabled}\n          value={query}\n          onChange={(e) => {\n            setIsTyping(true);\n            setQuery(e.target.value);\n          }}\n          autoFocus={autoFocus}\n          placeholder={placeholder}\n          onKeyDown={(e) => {\n            if (e.key === \"Escape\") {\n              e.stopPropagation();\n              close();\n            } else {\n              onKeyDown(e);\n            }\n          }}\n          id={id}\n          onClick={() => setIsTyping(true)}\n          onBlur={(e) => {\n            if (\n              e.relatedTarget === null ||\n              !(e.relatedTarget as HTMLElement).closest?.(\n                \".roamjs-autocomplete-input\"\n              )\n            ) {\n              setIsTyping(false);\n            }\n            if (onBlur) {\n              onBlur(e.target.value);\n            }\n          }}\n          inputRef={inputRef}\n          {...(showButton\n            ? {\n                rightElement: (\n                  <Button icon={\"add\"} minimal onClick={() => onEnter()} />\n                ),\n              }\n            : {})}\n        />\n      }\n    />\n  );\n};\n\nexport default AutocompleteInput;\n"]}

package/components/BlockErrorBoundary.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+declare type BlockErrorBoundaryProps = {
+    blockUid: string;
+    message: string;
+    children: React.ReactNode;
+};
+declare type BlockErrorBoundaryState = {
+    hasError: boolean;
+};
+declare class BlockErrorBoundary extends React.Component<BlockErrorBoundaryProps, BlockErrorBoundaryState> {
+    constructor(props: BlockErrorBoundaryProps);
+    static getDerivedStateFromError(): BlockErrorBoundaryState;
+    componentDidCatch(error: Error): void;
+    render(): React.ReactNode;
+}
+export default BlockErrorBoundary;

package/components/BlockErrorBoundary.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const createBlock_1 = tslib_1.__importDefault(require("../writes/createBlock"));
+class BlockErrorBoundary extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError() {
+        return { hasError: true };
+    }
+    componentDidCatch(error) {
+        (0, createBlock_1.default)({
+            node: { text: this.props.message.replace("{ERROR}", error.message) },
+            parentUid: this.props.blockUid,
+        });
+    }
+    render() {
+        if (this.state.hasError) {
+            return react_1.default.createElement("div", null, "Component Failed To Load");
+        }
+        return this.props.children;
+    }
+}
+exports.default = BlockErrorBoundary;
+//# sourceMappingURL=BlockErrorBoundary.js.map

package/components/BlockErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockErrorBoundary.js","sourceRoot":"","sources":["../../src/components/BlockErrorBoundary.tsx"],"names":[],"mappings":";;;AAAA,0DAA0B;AAC1B,gFAAgD;AAShD,MAAM,kBAAmB,SAAQ,eAAK,CAAC,SAGtC;IACC,YAAY,KAA8B;QACxC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;IACnC,CAAC;IAED,MAAM,CAAC,wBAAwB;QAC7B,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IAC5B,CAAC;IAED,iBAAiB,CAAC,KAAY;QAC5B,IAAA,qBAAW,EAAC;YACV,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE;YACpE,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ;SAC/B,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;YACvB,OAAO,sEAAmC,CAAC;SAC5C;QACD,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC7B,CAAC;CACF;AAED,kBAAe,kBAAkB,CAAC","sourcesContent":["import React from \"react\";\nimport createBlock from \"../writes/createBlock\";\n\ntype BlockErrorBoundaryProps = {\n  blockUid: string;\n  message: string;\n  children: React.ReactNode;\n};\ntype BlockErrorBoundaryState = { hasError: boolean };\n\nclass BlockErrorBoundary extends React.Component<\n  BlockErrorBoundaryProps,\n  BlockErrorBoundaryState\n> {\n  constructor(props: BlockErrorBoundaryProps) {\n    super(props);\n    this.state = { hasError: false };\n  }\n\n  static getDerivedStateFromError(): BlockErrorBoundaryState {\n    return { hasError: true };\n  }\n\n  componentDidCatch(error: Error): void {\n    createBlock({\n      node: { text: this.props.message.replace(\"{ERROR}\", error.message) },\n      parentUid: this.props.blockUid,\n    });\n  }\n\n  render(): React.ReactNode {\n    if (this.state.hasError) {\n      return <div>Component Failed To Load</div>;\n    }\n    return this.props.children;\n  }\n}\n\nexport default BlockErrorBoundary;\n"]}

package/components/BlockInput.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+declare const BlockInput: ({ value, setValue, onBlur, onConfirm, getAllBlocks, autoFocus, }: {
+    value: string;
+    setValue: (q: string, uid?: string) => void;
+    onBlur?: ((v: string) => void) | undefined;
+    onConfirm?: (() => void) | undefined;
+    getAllBlocks?: (() => {
+        text: string;
+        uid: string;
+    }[]) | undefined;
+    autoFocus?: boolean | undefined;
+}) => React.ReactElement;
+export default BlockInput;

package/components/BlockInput.js

@@ -0,0 +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;
+//# sourceMappingURL=BlockInput.js.map

package/components/BlockInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockInput.js","sourceRoot":"","sources":["../../src/components/BlockInput.tsx"],"names":[],"mappings":";;;AAAA,4CAM2B;AAC3B,uDAAsE;AACtE,yGAAyE;AACzE,uFAAuD;AAEvD,MAAM,oBAAoB,GAAG,CAC3B,CAAS,EACT,MAAuC,EACvC,EAAE;IACF,MAAM,KAAK,GAAG,IAAI,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IACjC,OAAO,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC9D,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,EAClB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,YAAY,GAAG,iCAAuB,EACtC,SAAS,GAQV,EAAsB,EAAE;IACvB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,IAAI,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAC7D,MAAM,KAAK,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,IAAA,eAAO,EAAC,YAAY,EAAE,EAAE,CAAC,CAAC;IAC5C,MAAM,KAAK,GAAG,IAAA,eAAO,EACnB,GAAG,EAAE,CAAC,CAAC,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,oBAAoB,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EACrE,CAAC,KAAK,EAAE,SAAS,CAAC,CACnB,CAAC;IACF,MAAM,OAAO,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IAC/C,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IAChD,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,IAAA,yBAAe,EAAC;QACjD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,IAAI,MAAM,EAAE;gBACV,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;gBAChC,KAAK,EAAE,CAAC;aACT;iBAAM,IAAI,SAAS,EAAE;gBACpB,SAAS,EAAE,CAAC;aACb;QACH,CAAC;QACD,OAAO,EAAE,KAAK;QACd,OAAO;KACR,CAAC,CAAC;IACH,OAAO,CACL,8BAAC,cAAO,IACN,eAAe,EAAE,oBAAoB,EACrC,eAAe,EAAE,2BAA2B,EAC5C,cAAc,EAAE,IAAI,EACpB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,KAAK,EAChB,YAAY,EAAE,KAAK,EACnB,QAAQ,EAAE,sBAAe,CAAC,WAAW,EACrC,SAAS,EAAE;YACT,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;YACxB,eAAe,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;SACpC,EACD,OAAO,EACL,8BAAC,WAAI,IAAC,SAAS,EAAE,iCAAiC,EAAE,KAAK,EAAE,OAAO,IAC/D,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACnB,8BAAC,eAAQ,IACP,IAAI,EAAE,CAAC,CAAC,IAAI,EACZ,MAAM,EAAE,WAAW,KAAK,CAAC,EACzB,GAAG,EAAE,CAAC,CAAC,GAAG,EACV,SAAS,QACT,OAAO,EAAE,GAAG,EAAE;;gBACZ,QAAQ,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;gBACxB,KAAK,EAAE,CAAC;gBACR,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;YAC5B,CAAC,GACD,CACH,CAAC,CACG,EAET,MAAM,EACJ,8BAAC,iBAAU,IACT,KAAK,EAAE,KAAK,IAAI,EAAE,EAClB,QAAQ,EAAE,CAAC,CAAsC,EAAE,EAAE;gBACnD,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBACzB,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC9B,CAAC,EACD,WAAW,EAAE,oBAAoB,EACjC,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;;gBACZ,IACE,CAAC,CAAC,aAAa;oBACf,CAAC,CAAA,MAAA,MAAC,CAAC,CAAC,aAA6B,EAAC,OAAO,mDAAG,qBAAqB,CAAC,CAAA,EAClE;oBACA,KAAK,EAAE,CAAC;iBACT;gBACD,IAAI,MAAM,EAAE;oBACV,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;iBACxB;YACH,CAAC,EACD,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,GACpB,GAEJ,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC","sourcesContent":["import {\n  Popover,\n  PopoverPosition,\n  Menu,\n  MenuItem,\n  InputGroup,\n} from \"@blueprintjs/core\";\nimport React, { useCallback, useMemo, useRef, useState } from \"react\";\nimport getAllBlockUidsAndTexts from \"../queries/getAllBlockUidsAndTexts\";\nimport useArrowKeyDown from \"../hooks/useArrowKeyDown\";\n\nconst searchBlocksByString = (\n  q: string,\n  blocks: { text: string; uid: string }[]\n) => {\n  const regex = new RegExp(q, \"i\");\n  return blocks.filter((a) => regex.test(a.text)).slice(0, 9);\n};\n\nconst BlockInput = ({\n  value,\n  setValue,\n  onBlur,\n  onConfirm,\n  getAllBlocks = getAllBlockUidsAndTexts,\n  autoFocus,\n}: {\n  value: string;\n  setValue: (q: string, uid?: string) => void;\n  onBlur?: (v: string) => void;\n  onConfirm?: () => void;\n  getAllBlocks?: () => { text: string; uid: string }[];\n  autoFocus?: boolean;\n}): React.ReactElement => {\n  const [isOpen, setIsOpen] = useState(false);\n  const open = useCallback(() => setIsOpen(true), [setIsOpen]);\n  const close = useCallback(() => setIsOpen(false), [setIsOpen]);\n  const allBlocks = useMemo(getAllBlocks, []);\n  const items = useMemo(\n    () => (value && isOpen ? searchBlocksByString(value, allBlocks) : []),\n    [value, allBlocks]\n  );\n  const menuRef = useRef<HTMLUListElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const { activeIndex, onKeyDown } = useArrowKeyDown({\n    onEnter: (value) => {\n      if (isOpen) {\n        setValue(value.text, value.uid);\n        close();\n      } else if (onConfirm) {\n        onConfirm();\n      }\n    },\n    results: items,\n    menuRef,\n  });\n  return (\n    <Popover\n      portalClassName={\"roamjs-block-input\"}\n      targetClassName={\"roamjs-block-input-target\"}\n      captureDismiss={true}\n      isOpen={isOpen}\n      onOpened={open}\n      minimal={true}\n      autoFocus={false}\n      enforceFocus={false}\n      position={PopoverPosition.BOTTOM_LEFT}\n      modifiers={{\n        flip: { enabled: false },\n        preventOverflow: { enabled: false },\n      }}\n      content={\n        <Menu className={\"max-h-64 overflow-auto max-w-md\"} ulRef={menuRef}>\n          {items.map((t, i) => (\n            <MenuItem\n              text={t.text}\n              active={activeIndex === i}\n              key={t.uid}\n              multiline\n              onClick={() => {\n                setValue(t.text, t.uid);\n                close();\n                inputRef.current?.focus();\n              }}\n            />\n          ))}\n        </Menu>\n      }\n      target={\n        <InputGroup\n          value={value || \"\"}\n          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n            setValue(e.target.value);\n            setIsOpen(!!e.target.value);\n          }}\n          placeholder={\"Search for a block\"}\n          onKeyDown={onKeyDown}\n          onBlur={(e) => {\n            if (\n              e.relatedTarget &&\n              !(e.relatedTarget as HTMLElement).closest?.(\".roamjs-block-input\")\n            ) {\n              close();\n            }\n            if (onBlur) {\n              onBlur(e.target.value);\n            }\n          }}\n          inputRef={inputRef}\n          autoFocus={autoFocus}\n        />\n      }\n    />\n  );\n};\n\nexport default BlockInput;\n"]}

package/components/ComponentContainer.d.ts

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

package/components/ComponentContainer.js

@@ -0,0 +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;
+//# sourceMappingURL=ComponentContainer.js.map

package/components/ComponentContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentContainer.js","sourceRoot":"","sources":["../../src/components/ComponentContainer.tsx"],"names":[],"mappings":";;;;AAAA,4CAA2C;AAC3C,uDAAqD;AACrD,iFAAiD;AACjD,iGAAiE;AACjE,0FAA0D;AAG1D,MAAM,kBAAkB,GAInB,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,MAAM,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IACrE,MAAM,SAAS,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEzE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAA,uBAAa,EAAC,OAAO,CAAC,CAAC;IACtD,OAAO,CACL,uCACE,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,SAAS,EACvB,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE;QAEnE,SAAS,IAAI,CACZ,uCAAK,SAAS,EAAE,mDAAmD,IAChE,OAAO,IAAI,CACV,8BAAC,aAAM,IACL,IAAI,EAAC,MAAM,EACX,OAAO,QACP,OAAO,EAAE,GAAG,EAAE,CACZ,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,yBAAyB,CAAC;gBAC/C,QAAQ,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE;aAC3D,CAAC,GAEJ,CACH,CACG,CACP;QACA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEK,MAAM,qBAAqB,GAChC,CACE,EAAuD,EACvD,SAAkB,EAClB,EAAE,CACJ,CAAC,CAAoB,EAAE,IAAiB,EAAQ,EAAE;;IAChD,IAAI,CAAC,CAAC,aAAa,EAAE;QACnB,CAAC,CAAC,aAAa,CAAC,WAAW,GAAG,CAAC,CAAa,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC;QACrE,MAAM,QAAQ,GAAG,IAAA,+BAAqB,EAAC,CAAC,CAAC,CAAC;QAC1C,MAAM,eAAe,GAAG,MAAA,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,0CAAE,EAAE,CAAC;QACrD,MAAM,OAAO,GAAG,CAAA,MAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ,gEAAG,QAAQ,CAAC;YACnD,CAAC,CAAC,eAAe;YACjB,CAAC,CAAC,SAAS,CAAC;QACd,IAAI,QAAQ,EAAE;YACZ,IAAA,2BAAiB,EACf,8BAAC,kBAAkB,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS;gBACxD,8BAAC,EAAE,IAAC,QAAQ,EAAE,QAAQ,GAAI,CACP,EACrB,CAAC,CAAC,aAAa,EACf,IAAI,CACL,CAAC;SACH;KACF;AACH,CAAC,CAAC;AAvBS,QAAA,qBAAqB,yBAuB9B;AAEJ,kBAAe,kBAAkB,CAAC","sourcesContent":["import { Button } from \"@blueprintjs/core\";\nimport React, { useCallback, useState } from \"react\";\nimport getUidsFromId from \"../dom/getUidsFromId\";\nimport getBlockUidFromTarget from \"../dom/getBlockUidFromTarget\";\nimport renderWithUnmount from \"../util/renderWithUnmount\";\nimport { OnloadArgs } from \"../types/native\";\n\nconst ComponentContainer: React.FunctionComponent<{\n  blockId?: string;\n  className?: string;\n  children?: React.ReactNode;\n}> = ({ blockId, className, children }) => {\n  const [showIcons, setShowIcons] = useState(false);\n  const appear = useCallback(() => setShowIcons(true), [setShowIcons]);\n  const disappear = useCallback(() => setShowIcons(false), [setShowIcons]);\n\n  const { blockUid, windowId } = getUidsFromId(blockId);\n  return (\n    <div\n      className={className}\n      onMouseOver={appear}\n      onMouseLeave={disappear}\n      style={{ position: \"relative\", width: \"fit-content\", minWidth: 300 }}\n    >\n      {showIcons && (\n        <div className={\"roamjs-edit-component absolute top-2 right-2 z-50\"}>\n          {blockId && (\n            <Button\n              icon=\"edit\"\n              minimal\n              onClick={() =>\n                window.roamAlphaAPI.ui.setBlockFocusAndSelection({\n                  location: { \"block-uid\": blockUid, \"window-id\": windowId },\n                })\n              }\n            />\n          )}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n};\n\nexport const createComponentRender =\n  (\n    Fc: (props: { blockUid: string }) => React.ReactElement,\n    className?: string\n  ) =>\n  (b: HTMLButtonElement, args?: OnloadArgs): void => {\n    if (b.parentElement) {\n      b.parentElement.onmousedown = (e: MouseEvent) => e.stopPropagation();\n      const blockUid = getBlockUidFromTarget(b);\n      const possibleBlockId = b.closest(\".roam-block\")?.id;\n      const blockId = possibleBlockId?.endsWith?.(blockUid)\n        ? possibleBlockId\n        : undefined;\n      if (blockUid) {\n        renderWithUnmount(\n          <ComponentContainer blockId={blockId} className={className}>\n            <Fc blockUid={blockUid} />\n          </ComponentContainer>,\n          b.parentElement,\n          args\n        );\n      }\n    }\n  };\n\nexport default ComponentContainer;\n"]}

package/components/ConfigPage.d.ts

@@ -0,0 +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;

package/components/ConfigPage.js

@@ -0,0 +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;
+//# sourceMappingURL=ConfigPage.js.map

package/components/ConfigPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigPage.js","sourceRoot":"","sources":["../../src/components/ConfigPage.tsx"],"names":[],"mappings":";;;;AAAA,4CAAoD;AACpD,uDAAsE;AACtE,kEAAiC;AACjC,2FAA2D;AAC3D,gFAAgD;AAChD,8EAA8C;AAC9C,yGAAyE;AACzE,qGAAqE;AACrE,6GAA6E;AAC7E,sFAAsD;AACtD,0EAA0C;AAsB1C,MAAM,SAAS,GAAG,CAAC,EACjB,EAAE,EACF,MAAM,EACN,GAAG,EACH,OAAO,EACP,KAAK,EACL,UAAU,GAMC,EAAE,EAAE;IACf,MAAM,SAAS,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC7B,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACpB,OAAO,OAAO,CAAC;SAChB;QACD,IAAI,GAAG,EAAE;YACP,OAAO,GAAG,CAAC;SACZ;QACD,IAAI,UAAU,EAAE;YACd,OAAO,EAAE,CAAC;SACX;QACD,MAAM,MAAM,GAAG,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;QACtD,IAAA,qBAAW,EAAC;YACV,SAAS,EAAE,OAAO;YAClB,KAAK;YACL,IAAI,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE;SAChC,CAAC,CAAC;QACH,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC;IACnC,MAAM,SAAS,GAAG,MAAM,CAAC,WAAW,CAClC,IAAA,mCAAyB,EAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC;QAC1D,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE;QACzB,GAAG;KACJ,CAAC,CACH,CAAC;IACF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAChD,MAAM,CAAC,MAAM,IAAI,OAAO,UAAU,KAAK,QAAQ;QAC7C,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK;QACjB,CAAC,CAAC,SAAS,CACd,CAAC;IACF,MAAM,YAAY,GAAG,IAAA,mBAAW,EAC9B,CAAC,KAAa,EAAE,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAC1C,CAAC,gBAAgB,CAAC,CACnB,CAAC;IACF,OAAO,CACL,8BAAC,WAAI,IACH,QAAQ,QACR,EAAE,EAAE,GAAG,EAAE,aAAa,EACtB,QAAQ,EAAE,YAAY,EACtB,aAAa,EAAE,aAAa,EAC5B,wBAAwB,UAEvB,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;QACvB,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;QAC7C,OAAO,CACL,8BAAC,UAAG,IACF,EAAE,EAAE,KAAK,EACT,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,IAAA,mBAAS,EAAC,KAAK,CAAC,EACvB,KAAK,EACH,8BAAC,KAAK,oBACA,KAAK,IACT,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,CAAC,EACR,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,SAAS,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,IACnC,GAEJ,CACH,CAAC;IACJ,CAAC,CAAC,CACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,EAClB,EAAE,EACF,MAAM,EACN,OAAO,GAKR,EAAsB,EAAE;;IACvB,MAAM,QAAQ,GAAG,MAAM,IAAI,MAAM,CAAC;IAClC,MAAM,QAAQ,GAAG,QAAQ;QACvB,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,CAAC,UAAU,CAAC;QAC5D,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;IACrC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAC,MAAA,QAAQ,CAAC,CAAC,CAAC,0CAAE,EAAE,CAAC,CAAC;IACpE,MAAM,YAAY,GAAG,IAAA,mBAAW,EAC9B,CAAC,KAAa,EAAE,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAC1C,CAAC,gBAAgB,CAAC,CACnB,CAAC;IACF,MAAM,IAAI,GAAG,IAAA,iCAAuB,EAAC,OAAO,CAAC,CAAC;IAE9C,0DAA0D;IAC1D,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAC9C,MAAM,gBAAgB,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAA,yBAAe,EAAC,cAAc,CAAC,EAAE,EAAE,CAAC,CAAC;IAC5E,OAAO,CACL,8BAAC,WAAI,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,qBAAqB;QACjE,uCACE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,eAAe,EAAE,EAC3D,GAAG,EAAE,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC;YAEZ,sCAAI,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;gBAAG,IAAA,mBAAS,EAAC,EAAE,CAAC;iCAAoB,CACzD;QACN,6CAAQ,yCAAyC,CAAS;QACzD,QAAQ,CAAC,CAAC,CAAC,CACV,8BAAC,WAAI,IACH,EAAE,EAAE,GAAG,EAAE,cAAc,EACvB,QAAQ,EAAE,YAAY,EACtB,aAAa,EAAE,aAAa,EAC5B,wBAAwB,QACxB,SAAS,EAAE,oBAAoB,IAE9B,QAAQ,CAAC,GAAG,CACX,CACE,EACE,EAAE,EAAE,KAAK,EACT,MAAM,EACN,UAAU,EACV,WAAW,GAAG,KAAK,EACnB,QAAQ,EACR,SAAS,GACV,EACD,CAAC,EACD,EAAE;;YAAC,OAAA,CACH,8BAAC,UAAG,IACF,EAAE,EAAE,KAAK,EACT,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,IAAA,mBAAS,EAAC,KAAK,CAAC,EACvB,QAAQ,EAAE,WAAW,IAAI,CAAC,gBAAgB,EAC1C,KAAK,EACH,8BAAC,SAAS,IACR,EAAE,EAAE,KAAK,EACT,WAAW,EAAE,EAAE,EACf,MAAM,EAAE,MAAM,EACd,GAAG,EACD,CAAA,MAAA,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,0CACjD,GAAG,KAAI,EAAE,EAEf,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,CAAC,EACR,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,GACpB,GAEJ,CACH,CAAA;SAAA,CACF,CACI,CACR,CAAC,CAAC,CAAC,CACF,8BAAC,SAAS,IACR,EAAE,EAAE,MAAM,EACV,WAAW,EAAE,EAAE,EACf,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,CAAC,EACR,UAAU,EAAE,KAAK,GACjB,CACH,CACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,+CAA+C;AAC/C,MAAM,gBAAgB,GAAG,CAAC,MAA2B,EAAE,EAAE,CACvD,MAAM;KACH,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC;KAC/B,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;;IAAC,OAAA,CAAC;QACX,IAAI,EAAE,CAAC,CAAC,KAAK;QACb,QAAQ,EACN,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,MAAM;YACrB,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,QAAQ;gBAC3B,CAAC,CAAE,CAAC,CAAC,YAAgC,IAAI,EAAE;gBAC3C,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,WAAW;oBAC1D,CAAC,CAAC,MAAC,CAAC,CAAC,YAAyB,0CAAE,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC;oBACzD,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO;wBAC1B,CAAC,CAAC,CAAC,CAAC,YAAY;4BACd,CAAC,CAAC,CAAC,CAAC,CAAC,YAA6B,CAAC;4BACnC,CAAC,CAAC,EAAE;wBACN,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC;KACtC,CAAC,CAAA;CAAA,CAAC,CAAC;AAER,MAAM,gBAAgB,GAAG,CAAC,EACxB,KAAK,EACL,MAAM,GAIP,EAAE,EAAE;;IACH,MAAM,OAAO,GACX,MAAM,IAAI,MAAM;QACd,CAAC,CAAC,MAAA,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,0CAAE,MAAM;QACrD,CAAC,CAAC,MAAM,CAAC;IACb,MAAM,OAAO,GAAG;QACd,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC7C,GAAG,CAAC,MAAM,IAAI,MAAM;YAClB,CAAC,CAAC,MAAM,CAAC,IAAI;iBACR,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC;iBACrE,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;gBACX,IAAI,EAAE,CAAC,CAAC,EAAE;gBACV,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC;aACrC,CAAC,CAAC;YACP,CAAC,CAAC,EAAE,CAAC;KACR,CAAC;IACF,OAAO,IAAA,oBAAU,EAAC;QAChB,KAAK;QACL,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC;KACjD,CAAC,CAAC;AACL,CAAC,CAAC;AAEK,MAAM,MAAM,GAAG,CAAC,EACrB,CAAC,EACD,KAAK,EACL,OAAO,GAAG,IAAA,+BAAqB,EAAC,KAAK,CAAC,EACtC,MAAM,GAMP,EAAE,EAAE;;IACH,MAAM,GAAG,GAAG,IAAA,+BAAqB,EAAC,KAAK,CAAC,CAAC;IACzC,MAAM,SAAS,GAAG,eAAe,GAAG,EAAE,CAAC;IACvC,MAAM,eAAe,GAAG,MAAA,CAAC,CAAC,aAAa,0CAAE,aAAa,CAAC;IACvD,IAAI,eAAe,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE;QAC/D,eAAe,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;QAChD,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC7C,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACnD,MAAM,CAAC,EAAE,GAAG,GAAG,YAAY,SAAS,CAAC;QACrC,eAAe,CAAC,YAAY,CAC1B,MAAM,EACN,CAAA,MAAA,CAAC,CAAC,aAAa,0CAAE,kBAAkB,KAAI,IAAI,CAC5C,CAAC;QACF,mBAAQ,CAAC,MAAM,CACb,8BAAC,UAAU,IAAC,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAI,EAClE,MAAM,CACP,CAAC;KACH;AACH,CAAC,CAAC;AA5BW,QAAA,MAAM,UA4BjB;AAEK,MAAM,oBAAoB,GAAG,CAAO,EACzC,KAAK,EACL,MAAM,GAIP,EAA6D,EAAE;IAC9D,MAAM,OAAO,GACX,IAAA,+BAAqB,EAAC,KAAK,CAAC;QAC5B,CAAC,MAAM,gBAAgB,CAAC;YACtB,KAAK;YACL,MAAM;SACP,CAAC,CAAC,CAAC;IACN,IAAI,MAAM,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE;QAC7D,MAAM,QAAQ,GAAG,IAAA,4BAAkB,EAAC;YAClC,SAAS,EAAE,kBAAkB;YAC7B,GAAG,EAAE,IAAI;YACT,QAAQ,EAAE,CAAC,CAAc,EAAE,EAAE;gBAC3B,MAAM,CAAC,GAAG,CAAuB,CAAC;gBAClC,IAAI,CAAC,CAAC,SAAS,KAAK,KAAK,EAAE;oBACzB,IAAA,cAAM,EAAC;wBACL,OAAO;wBACP,MAAM;wBACN,KAAK;wBACL,CAAC;qBACF,CAAC,CAAC;iBACJ;YACH,CAAC;SACF,CAAC,CAAC;QACH,OAAO;YACL,OAAO;YACP,QAAQ;SACT,CAAC;KACH;IACD,OAAO;QACL,OAAO;KACR,CAAC;AACJ,CAAC,CAAA,CAAC;AArCW,QAAA,oBAAoB,wBAqC/B;AAEF,kBAAe,UAAU,CAAC","sourcesContent":["import { Card, Tab, Tabs } from \"@blueprintjs/core\";\nimport React, { useCallback, useMemo, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport createHTMLObserver from \"../dom/createHTMLObserver\";\nimport createBlock from \"../writes/createBlock\";\nimport createPage from \"../writes/createPage\";\nimport getBasicTreeByParentUid from \"../queries/getBasicTreeByParentUid\";\nimport getPageUidByPageTitle from \"../queries/getPageUidByPageTitle\";\nimport getShallowTreeByParentUid from \"../queries/getShallowTreeByParentUid\";\nimport localStorageGet from \"../util/localStorageGet\";\nimport idToTitle from \"../util/idToTitle\";\nimport type { Field, UnionField } from \"./ConfigPanels/types\";\nimport { Brand } from \"./ConfigPanels/getBrandColors\";\nimport { InputTextNode } from \"../types\";\n\nexport type ConfigTab = {\n  id: string;\n  toggleable?: boolean | \"premium\";\n  onEnable?: () => void;\n  onDisable?: () => void;\n  development?: boolean;\n  fields: Field<UnionField>[];\n};\n\ntype Config =\n  | {\n      tabs: ConfigTab[];\n      versioning?: boolean;\n      brand?: Brand;\n    }\n  | Field<UnionField>[];\n\nconst FieldTabs = ({\n  id,\n  fields,\n  uid,\n  pageUid,\n  order,\n  toggleable,\n}: {\n  uid: string;\n  pageUid: string;\n  order: number;\n  extensionId: string;\n} & ConfigTab) => {\n  const parentUid = useMemo(() => {\n    if (/home/i.test(id)) {\n      return pageUid;\n    }\n    if (uid) {\n      return uid;\n    }\n    if (toggleable) {\n      return \"\";\n    }\n    const newUid = window.roamAlphaAPI.util.generateUID();\n    createBlock({\n      parentUid: pageUid,\n      order,\n      node: { text: id, uid: newUid },\n    });\n    return newUid;\n  }, [pageUid, uid, id, toggleable]);\n  const childUids = Object.fromEntries(\n    getShallowTreeByParentUid(parentUid).map(({ text, uid }) => [\n      text.toLowerCase().trim(),\n      uid,\n    ])\n  );\n  const [selectedTabId, setSelectedTabId] = useState(\n    fields.length && typeof toggleable !== \"string\"\n      ? fields[0].title\n      : \"enabled\"\n  );\n  const onTabsChange = useCallback(\n    (tabId: string) => setSelectedTabId(tabId),\n    [setSelectedTabId]\n  );\n  return (\n    <Tabs\n      vertical\n      id={`${id}-field-tabs`}\n      onChange={onTabsChange}\n      selectedTabId={selectedTabId}\n      renderActiveTabPanelOnly\n    >\n      {fields.map((field, i) => {\n        const { Panel, title, defaultValue } = field;\n        return (\n          <Tab\n            id={title}\n            key={title}\n            title={idToTitle(title)}\n            panel={\n              <Panel\n                {...field}\n                defaultValue={defaultValue}\n                order={i}\n                parentUid={parentUid}\n                uid={childUids[title.toLowerCase()]}\n              />\n            }\n          />\n        );\n      })}\n    </Tabs>\n  );\n};\n\nconst ConfigPage = ({\n  id,\n  config,\n  pageUid,\n}: {\n  id: string;\n  config: Config;\n  pageUid: string;\n}): React.ReactElement => {\n  const isLegacy = \"tabs\" in config;\n  const userTabs = isLegacy\n    ? config.tabs.filter((t) => t.fields.length || t.toggleable)\n    : [{ fields: config, id: \"home\" }];\n  const [selectedTabId, setSelectedTabId] = useState(userTabs[0]?.id);\n  const onTabsChange = useCallback(\n    (tabId: string) => setSelectedTabId(tabId),\n    [setSelectedTabId]\n  );\n  const tree = getBasicTreeByParentUid(pageUid);\n\n  // first character trimmed intentionally for the `v` below\n  const titleRef = useRef<HTMLDivElement>(null);\n  const experimentalMode = useMemo(() => localStorageGet(\"experimental\"), []);\n  return (\n    <Card style={{ color: \"#202B33\" }} className={\"roamjs-config-panel\"}>\n      <div\n        style={{ display: \"flex\", justifyContent: \"space-between\" }}\n        ref={titleRef}\n        tabIndex={-1}\n      >\n        <h4 style={{ padding: 4 }}>{idToTitle(id)} Configuration</h4>\n      </div>\n      <style>{`.roamjs-config-tabs {\\npadding: 4px;\\n}`}</style>\n      {isLegacy ? (\n        <Tabs\n          id={`${id}-config-tabs`}\n          onChange={onTabsChange}\n          selectedTabId={selectedTabId}\n          renderActiveTabPanelOnly\n          className={\"roamjs-config-tabs\"}\n        >\n          {userTabs.map(\n            (\n              {\n                id: tabId,\n                fields,\n                toggleable,\n                development = false,\n                onEnable,\n                onDisable,\n              },\n              i\n            ) => (\n              <Tab\n                id={tabId}\n                key={tabId}\n                title={idToTitle(tabId)}\n                disabled={development && !experimentalMode}\n                panel={\n                  <FieldTabs\n                    id={tabId}\n                    extensionId={id}\n                    fields={fields}\n                    uid={\n                      tree.find((t) => new RegExp(tabId, \"i\").test(t.text))\n                        ?.uid || \"\"\n                    }\n                    pageUid={pageUid}\n                    order={i}\n                    toggleable={toggleable}\n                    onEnable={onEnable}\n                    onDisable={onDisable}\n                  />\n                }\n              />\n            )\n          )}\n        </Tabs>\n      ) : (\n        <FieldTabs\n          id={\"home\"}\n          extensionId={id}\n          fields={config}\n          uid={pageUid}\n          pageUid={pageUid}\n          order={0}\n          toggleable={false}\n        />\n      )}\n    </Card>\n  );\n};\n\n// TODO: better nested type discrimination here\nconst fieldsToChildren = (fields: Field<UnionField>[]) =>\n  fields\n    .filter((f) => !!f.defaultValue)\n    .map((f) => ({\n      text: f.title,\n      children:\n        f.Panel.type === \"flag\"\n          ? []\n          : f.Panel.type === \"custom\"\n          ? (f.defaultValue as InputTextNode[]) || []\n          : f.Panel.type === \"pages\" || f.Panel.type === \"multitext\"\n          ? (f.defaultValue as string[])?.map((v) => ({ text: v }))\n          : f.Panel.type === \"block\"\n          ? f.defaultValue\n            ? [f.defaultValue as InputTextNode]\n            : []\n          : [{ text: `${f.defaultValue}` }],\n    }));\n\nconst createConfigPage = ({\n  title,\n  config,\n}: {\n  title: string;\n  config: Config;\n}) => {\n  const homeTab =\n    \"tabs\" in config\n      ? config.tabs.find((t) => /home/i.test(t.id))?.fields\n      : config;\n  const rawTree = [\n    ...(homeTab ? fieldsToChildren(homeTab) : []),\n    ...(\"tabs\" in config\n      ? config.tabs\n          .filter((t) => !/home/i.test(t.id) && !t.toggleable && !t.development)\n          .map((t) => ({\n            text: t.id,\n            children: fieldsToChildren(t.fields),\n          }))\n      : []),\n  ];\n  return createPage({\n    title,\n    tree: rawTree.length ? rawTree : [{ text: \" \" }],\n  });\n};\n\nexport const render = ({\n  h,\n  title,\n  pageUid = getPageUidByPageTitle(title),\n  config,\n}: {\n  h: HTMLHeadingElement;\n  title: string;\n  pageUid?: string;\n  config: Config;\n}) => {\n  const uid = getPageUidByPageTitle(title);\n  const attribute = `data-roamjs-${uid}`;\n  const containerParent = h.parentElement?.parentElement;\n  if (containerParent && !containerParent.hasAttribute(attribute)) {\n    containerParent.setAttribute(attribute, \"true\");\n    const parent = document.createElement(\"div\");\n    const configPageId = title.split(\"/\").slice(-1)[0];\n    parent.id = `${configPageId}-config`;\n    containerParent.insertBefore(\n      parent,\n      h.parentElement?.nextElementSibling || null\n    );\n    ReactDOM.render(\n      <ConfigPage id={configPageId} config={config} pageUid={pageUid} />,\n      parent\n    );\n  }\n};\n\nexport const createConfigObserver = async ({\n  title,\n  config,\n}: {\n  title: string;\n  config: Config;\n}): Promise<{ pageUid: string; observer?: MutationObserver }> => {\n  const pageUid =\n    getPageUidByPageTitle(title) ||\n    (await createConfigPage({\n      title,\n      config,\n    }));\n  if (\"tabs\" in config ? !!config.tabs.length : !!config.length) {\n    const observer = createHTMLObserver({\n      className: \"rm-title-display\",\n      tag: \"H1\",\n      callback: (d: HTMLElement) => {\n        const h = d as HTMLHeadingElement;\n        if (h.innerText === title) {\n          render({\n            pageUid,\n            config,\n            title,\n            h,\n          });\n        }\n      },\n    });\n    return {\n      pageUid,\n      observer,\n    };\n  }\n  return {\n    pageUid,\n  };\n};\n\nexport default ConfigPage;\n"]}

package/components/ConfigPanels/BlockPanel.d.ts

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