roamjs-components 0.53.2 → 0.53.5

package/backend/index.d.ts

@@ -1,6 +1,6 @@
-export { default as emailCatch } from "./emailCatch";
-export { default as emailError } from "./emailError";
-export { default as getRoamJSUser, awsGetRoamJSUser } from "./getRoamJSUser";
-export { default as headers } from "./headers";
-export { default as meterRoamJSUser } from "./meterRoamJSUser";
-export { default as putRoamJSUser, awsPutRoamJSUser } from "./putRoamJSUser";
+export { default as emailCatch } from "./emailCatch";
+export { default as emailError } from "./emailError";
+export { default as getRoamJSUser, awsGetRoamJSUser } from "./getRoamJSUser";
+export { default as headers } from "./headers";
+export { default as meterRoamJSUser } from "./meterRoamJSUser";
+export { default as putRoamJSUser, awsPutRoamJSUser } from "./putRoamJSUser";

package/backend/index.js

@@ -1,21 +1,21 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.awsPutRoamJSUser = exports.putRoamJSUser = exports.meterRoamJSUser = exports.headers = exports.awsGetRoamJSUser = exports.getRoamJSUser = exports.emailError = exports.emailCatch = void 0;
-var emailCatch_1 = require("./emailCatch");
-Object.defineProperty(exports, "emailCatch", { enumerable: true, get: function () { return __importDefault(emailCatch_1).default; } });
-var emailError_1 = require("./emailError");
-Object.defineProperty(exports, "emailError", { enumerable: true, get: function () { return __importDefault(emailError_1).default; } });
-var getRoamJSUser_1 = require("./getRoamJSUser");
-Object.defineProperty(exports, "getRoamJSUser", { enumerable: true, get: function () { return __importDefault(getRoamJSUser_1).default; } });
-Object.defineProperty(exports, "awsGetRoamJSUser", { enumerable: true, get: function () { return getRoamJSUser_1.awsGetRoamJSUser; } });
-var headers_1 = require("./headers");
-Object.defineProperty(exports, "headers", { enumerable: true, get: function () { return __importDefault(headers_1).default; } });
-var meterRoamJSUser_1 = require("./meterRoamJSUser");
-Object.defineProperty(exports, "meterRoamJSUser", { enumerable: true, get: function () { return __importDefault(meterRoamJSUser_1).default; } });
-var putRoamJSUser_1 = require("./putRoamJSUser");
-Object.defineProperty(exports, "putRoamJSUser", { enumerable: true, get: function () { return __importDefault(putRoamJSUser_1).default; } });
-Object.defineProperty(exports, "awsPutRoamJSUser", { enumerable: true, get: function () { return putRoamJSUser_1.awsPutRoamJSUser; } });
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.awsPutRoamJSUser = exports.putRoamJSUser = exports.meterRoamJSUser = exports.headers = exports.awsGetRoamJSUser = exports.getRoamJSUser = exports.emailError = exports.emailCatch = void 0;
+var emailCatch_1 = require("./emailCatch");
+Object.defineProperty(exports, "emailCatch", { enumerable: true, get: function () { return __importDefault(emailCatch_1).default; } });
+var emailError_1 = require("./emailError");
+Object.defineProperty(exports, "emailError", { enumerable: true, get: function () { return __importDefault(emailError_1).default; } });
+var getRoamJSUser_1 = require("./getRoamJSUser");
+Object.defineProperty(exports, "getRoamJSUser", { enumerable: true, get: function () { return __importDefault(getRoamJSUser_1).default; } });
+Object.defineProperty(exports, "awsGetRoamJSUser", { enumerable: true, get: function () { return getRoamJSUser_1.awsGetRoamJSUser; } });
+var headers_1 = require("./headers");
+Object.defineProperty(exports, "headers", { enumerable: true, get: function () { return __importDefault(headers_1).default; } });
+var meterRoamJSUser_1 = require("./meterRoamJSUser");
+Object.defineProperty(exports, "meterRoamJSUser", { enumerable: true, get: function () { return __importDefault(meterRoamJSUser_1).default; } });
+var putRoamJSUser_1 = require("./putRoamJSUser");
+Object.defineProperty(exports, "putRoamJSUser", { enumerable: true, get: function () { return __importDefault(putRoamJSUser_1).default; } });
+Object.defineProperty(exports, "awsPutRoamJSUser", { enumerable: true, get: function () { return putRoamJSUser_1.awsPutRoamJSUser; } });
 //# sourceMappingURL=index.js.map

package/backend/meterRoamJSUser.d.ts

@@ -1,4 +1,4 @@
-declare const meterRoamJSUser: (user: string, quantity?: number, extensionId?: string, email?: string | undefined, dev?: boolean) => Promise<{
-    id: string;
-}>;
-export default meterRoamJSUser;
+declare const meterRoamJSUser: (user: string, quantity?: number, extensionId?: string, email?: string | undefined, dev?: boolean) => Promise<{
+    id: string;
+}>;
+export default meterRoamJSUser;

package/backend/meterRoamJSUser.js

@@ -1,15 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const axios_1 = (0, tslib_1.__importDefault)(require("axios"));
-const meterRoamJSUser = (user, quantity = 1, extensionId = process.env.ROAMJS_EXTENSION_ID || "", email = process.env.ROAMJS_EMAIL, dev = process.env.NODE_ENV === "development") => axios_1.default
-    .post(`https://lambda.roamjs.com/meter`, Object.assign(Object.assign({}, (user.startsWith("user_") ? { id: user } : { email: user })), { quantity }), {
-    headers: Object.assign({ Authorization: `Bearer ${Buffer.from(`${email}:${process.env.ROAMJS_DEVELOPER_TOKEN}`).toString("base64")}`, "x-roamjs-extension": extensionId }, (dev
-        ? {
-            "x-roamjs-dev": "true",
-        }
-        : {})),
-})
-    .then((r) => r.data);
-exports.default = meterRoamJSUser;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const axios_1 = (0, tslib_1.__importDefault)(require("axios"));
+const meterRoamJSUser = (user, quantity = 1, extensionId = process.env.ROAMJS_EXTENSION_ID || "", email = process.env.ROAMJS_EMAIL, dev = process.env.NODE_ENV === "development") => axios_1.default
+    .post(`https://lambda.roamjs.com/meter`, Object.assign(Object.assign({}, (user.startsWith("user_") ? { id: user } : { email: user })), { quantity }), {
+    headers: Object.assign({ Authorization: `Bearer ${Buffer.from(`${email}:${process.env.ROAMJS_DEVELOPER_TOKEN}`).toString("base64")}`, "x-roamjs-extension": extensionId }, (dev
+        ? {
+            "x-roamjs-dev": "true",
+        }
+        : {})),
+})
+    .then((r) => r.data);
+exports.default = meterRoamJSUser;
 //# sourceMappingURL=meterRoamJSUser.js.map

package/backend/putRoamJSUser.d.ts

@@ -1,10 +1,10 @@
-import headers from "./headers";
-declare const putRoamJSUser: (token: string, data: {
-    [k: string]: unknown;
-}, extensionId?: string, email?: string | undefined, dev?: boolean) => Promise<any>;
-export declare const awsPutRoamJSUser: (event: {
-    headers: {
-        [k: string]: string;
-    };
-}, data: Record<string, unknown>) => Promise<any>;
-export default putRoamJSUser;
+import headers from "./headers";
+declare const putRoamJSUser: (token: string, data: {
+    [k: string]: unknown;
+}, extensionId?: string, email?: string | undefined, dev?: boolean) => Promise<any>;
+export declare const awsPutRoamJSUser: (event: {
+    headers: {
+        [k: string]: string;
+    };
+}, data: Record<string, unknown>) => Promise<any>;
+export default putRoamJSUser;

package/backend/putRoamJSUser.js

@@ -1,26 +1,26 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.awsPutRoamJSUser = void 0;
-const tslib_1 = require("tslib");
-const axios_1 = (0, tslib_1.__importDefault)(require("axios"));
-const headers_1 = (0, tslib_1.__importDefault)(require("./headers"));
-const putRoamJSUser = (token, data, extensionId = process.env.ROAMJS_EXTENSION_ID || "", email = process.env.ROAMJS_EMAIL, dev = process.env.NODE_ENV === "development") => axios_1.default
-    .put(`https://lambda.roamjs.com/user`, data, {
-    headers: Object.assign({ Authorization: `Bearer ${Buffer.from(`${email}:${process.env.ROAMJS_DEVELOPER_TOKEN}`).toString("base64")}`, "x-roamjs-token": token, "x-roamjs-extension": extensionId }, (dev
-        ? {
-            "x-roamjs-dev": "true",
-        }
-        : {})),
-})
-    .then((r) => r.data);
-const awsPutRoamJSUser = (event, data) => putRoamJSUser(event.headers.Authorization || event.headers.authorization || "", data).catch((e) => {
-    var _a;
-    return ({
-        statusCode: 401,
-        body: (_a = e.response) === null || _a === void 0 ? void 0 : _a.data,
-        headers: headers_1.default,
-    });
-});
-exports.awsPutRoamJSUser = awsPutRoamJSUser;
-exports.default = putRoamJSUser;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.awsPutRoamJSUser = void 0;
+const tslib_1 = require("tslib");
+const axios_1 = (0, tslib_1.__importDefault)(require("axios"));
+const headers_1 = (0, tslib_1.__importDefault)(require("./headers"));
+const putRoamJSUser = (token, data, extensionId = process.env.ROAMJS_EXTENSION_ID || "", email = process.env.ROAMJS_EMAIL, dev = process.env.NODE_ENV === "development") => axios_1.default
+    .put(`https://lambda.roamjs.com/user`, data, {
+    headers: Object.assign({ Authorization: `Bearer ${Buffer.from(`${email}:${process.env.ROAMJS_DEVELOPER_TOKEN}`).toString("base64")}`, "x-roamjs-token": token, "x-roamjs-extension": extensionId }, (dev
+        ? {
+            "x-roamjs-dev": "true",
+        }
+        : {})),
+})
+    .then((r) => r.data);
+const awsPutRoamJSUser = (event, data) => putRoamJSUser(event.headers.Authorization || event.headers.authorization || "", data).catch((e) => {
+    var _a;
+    return ({
+        statusCode: 401,
+        body: (_a = e.response) === null || _a === void 0 ? void 0 : _a.data,
+        headers: headers_1.default,
+    });
+});
+exports.awsPutRoamJSUser = awsPutRoamJSUser;
+exports.default = putRoamJSUser;
 //# sourceMappingURL=putRoamJSUser.js.map

package/components/BlockErrorBoundary.d.ts

@@ -1,15 +1,15 @@
-import React from "react";
-declare type BlockErrorBoundaryProps = {
-    blockUid: string;
-    message: string;
-};
-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;
+import React from "react";
+declare type BlockErrorBoundaryProps = {
+    blockUid: string;
+    message: string;
+};
+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

@@ -1,28 +1,28 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = (0, tslib_1.__importDefault)(require("react"));
-const writes_1 = require("../writes");
-class BlockErrorBoundary extends react_1.default.Component {
-    constructor(props) {
-        super(props);
-        this.state = { hasError: false };
-    }
-    static getDerivedStateFromError() {
-        return { hasError: true };
-    }
-    componentDidCatch(error) {
-        (0, writes_1.createBlock)({
-            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;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const writes_1 = require("../writes");
+class BlockErrorBoundary extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError() {
+        return { hasError: true };
+    }
+    componentDidCatch(error) {
+        (0, writes_1.createBlock)({
+            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/BlockInput.d.ts

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

package/components/BlockInput.js

@@ -1,54 +1,54 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const core_1 = require("@blueprintjs/core");
-const react_1 = (0, tslib_1.__importStar)(require("react"));
-const queries_1 = require("../queries");
-const useArrowKeyDown_1 = (0, 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 = queries_1.getAllBlockUidsAndTexts, }) => {
-    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 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,
-    });
-    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, { style: { maxWidth: 400 } }, 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", autoFocus: true, 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 }) }));
-};
-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 = (0, tslib_1.__importStar)(require("react"));
+const queries_1 = require("../queries");
+const useArrowKeyDown_1 = (0, 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 = queries_1.getAllBlockUidsAndTexts, }) => {
+    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 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,
+    });
+    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, { style: { maxWidth: 400 } }, 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", autoFocus: true, 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 }) }));
+};
+exports.default = BlockInput;
 //# sourceMappingURL=BlockInput.js.map

package/components/ComponentContainer.d.ts

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

package/components/ComponentContainer.js

@@ -1,47 +1,47 @@
-"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 = (0, tslib_1.__importStar)(require("react"));
-const react_dom_1 = (0, tslib_1.__importDefault)(require("react-dom"));
-const dom_1 = require("../dom");
-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]);
-    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", { style: { position: "absolute", top: 8, right: 8, zIndex: 1000 } }, blockId && (react_1.default.createElement(core_1.Button, { icon: "edit", minimal: true, onClick: () => (0, dom_1.openBlock)(blockId) })))),
-        children));
-};
-const renderWithUnmount = (el, p) => {
-    react_dom_1.default.render(el, p);
-    const unmountObserver = new MutationObserver((ms) => {
-        const parentRemoved = ms
-            .flatMap((m) => Array.from(m.removedNodes))
-            .some((n) => n === p || n.contains(p));
-        if (parentRemoved) {
-            unmountObserver.disconnect();
-            react_dom_1.default.unmountComponentAtNode(p);
-        }
-    });
-    unmountObserver.observe(document.body, { childList: true, subtree: true });
-};
-const createComponentRender = (Fc, className) => (b) => {
-    var _a, _b;
-    if (b.parentElement) {
-        b.parentElement.onmousedown = (e) => e.stopPropagation();
-        const blockUid = (0, dom_1.getBlockUidFromTarget)(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) {
-            renderWithUnmount(react_1.default.createElement(ComponentContainer, { blockId: blockId, className: className },
-                react_1.default.createElement(Fc, { blockUid: blockUid })), b.parentElement);
-        }
-    }
-};
-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 = (0, tslib_1.__importStar)(require("react"));
+const react_dom_1 = (0, tslib_1.__importDefault)(require("react-dom"));
+const dom_1 = require("../dom");
+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]);
+    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", { style: { position: "absolute", top: 8, right: 8, zIndex: 1000 } }, blockId && (react_1.default.createElement(core_1.Button, { icon: "edit", minimal: true, onClick: () => (0, dom_1.openBlock)(blockId) })))),
+        children));
+};
+const renderWithUnmount = (el, p) => {
+    react_dom_1.default.render(el, p);
+    const unmountObserver = new MutationObserver((ms) => {
+        const parentRemoved = ms
+            .flatMap((m) => Array.from(m.removedNodes))
+            .some((n) => n === p || n.contains(p));
+        if (parentRemoved) {
+            unmountObserver.disconnect();
+            react_dom_1.default.unmountComponentAtNode(p);
+        }
+    });
+    unmountObserver.observe(document.body, { childList: true, subtree: true });
+};
+const createComponentRender = (Fc, className) => (b) => {
+    var _a, _b;
+    if (b.parentElement) {
+        b.parentElement.onmousedown = (e) => e.stopPropagation();
+        const blockUid = (0, dom_1.getBlockUidFromTarget)(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) {
+            renderWithUnmount(react_1.default.createElement(ComponentContainer, { blockId: blockId, className: className },
+                react_1.default.createElement(Fc, { blockUid: blockUid })), b.parentElement);
+        }
+    }
+};
+exports.createComponentRender = createComponentRender;
+exports.default = ComponentContainer;
 //# sourceMappingURL=ComponentContainer.js.map