roamjs-components 0.86.0-alpha.3 → 0.86.1

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2021 David Vargas
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2021 David Vargas
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,29 +1,29 @@
-# roamjs-components
-
-This is a collection of common UI components used by RoamJS extensions made available to make development easier for other Roam developers.
-
-The `roamjs-components` repository provides a robust set of tools and components for building extensions and integrations for the Roam Research note-taking application. Engineers can use this repo to streamline the development of Roam extensions by leveraging pre-built React components, utility functions, and custom hooks that interact with the Roam Research API. This repo addresses the real-world problem of efficiently creating and managing Roam Research extensions, enabling developers to focus on building unique features rather than handling boilerplate code.
-
-The most important parts of the repo include the Components, utility functions, and database query functions. These components are organized into several directories, each serving a specific purpose:
-
-[Components](https://github.com/RoamJS/roamjs-components/blob/main/docs/components.md): Found in the `…/components` directory, these components handle tasks such as configuration management, external authentication, and data visualization. Key components include configuration panels like `BlockPanel`, `BlocksPanel`, and `OauthPanel`, which are detailed in the Configuration Panels section. These components use React hooks and context to manage state and interactions within the Roam Research application.
-
-[Date and Time Utilities](https://github.com/RoamJS/roamjs-components/blob/main/docs/date.md): Located in `…/date`, this directory provides functions for parsing and manipulating dates, crucial for working with Roam's daily notes. The `parseNlpDate` function uses the `chrono-node` library to parse natural language dates, while `parseRoamDateUid` converts Roam date UIDs into JavaScript Date objects. More details can be found in the Date and Time Utilities section.
-
-[DOM Manipulation](https://github.com/RoamJS/roamjs-components/blob/main/docs/dom.md): The `…/dom` directory contains functions for interacting with the Document Object Model (DOM) within Roam Research. Functions like `addBlockCommand` and `createBlockObserver` are essential for adding new commands and observing changes in the DOM. These utilities are explained in the DOM Manipulation section.
-
-[Event Handling](https://github.com/RoamJS/roamjs-components/blob/main/docs/events.md): The `…/events` directory includes the `watchOnce` function, which sets up one-time event listeners in Roam Research. This function is useful for performing actions when specific changes occur in the Roam environment, as detailed in the Event Handling section.
-
-[Custom React Hooks](https://github.com/RoamJS/roamjs-components/blob/main/docs/hooks.md): Found in `…/hooks`, these hooks provide reusable functionality for managing user interactions and data structures. The `useArrowKeyDown` hook handles keyboard navigation within lists, while `useSubTree` manages sub-tree data structures. More information is available in the Custom React Hooks section.
-
-[Markdown Parsing and Rendering](https://github.com/RoamJS/roamjs-components/blob/main/docs/marked.md): The `…/marked` directory customizes the `marked` library to parse and render Markdown content within Roam Research. This includes handling Roam-specific elements like block references and tags. The Markdown Parsing and Rendering section provides further details.
-
-[Database Queries](https://github.com/RoamJS/roamjs-components/blob/main/docs/queries.md): The `…/queries` directory offers utility functions for interacting with the Roam Research database. Functions like `getAllBlockUids`, `getPageTitleByBlockUid`, and `getCurrentUser` retrieve various types of data from the database. These functions are crucial for building data-driven features and are discussed in the Database Queries section.
-
-[Script Management](https://github.com/RoamJS/roamjs-components/blob/main/docs/scripts.md): The `…/scripts` directory includes functions for managing scripts in Roam Research. This includes functions for creating and managing script commands, as well as functions for executing scripts.
-
-[Type Definitions](https://github.com/RoamJS/roamjs-components/blob/main/docs/types.md): The `…/types` directory contains TypeScript type definitions for various Roam Research components.
-
-[Utility Functions](https://github.com/RoamJS/roamjs-components/blob/main/docs/util.md): The `…/util` directory includes utility functions for working with the Roam Research API. These functions are designed to simplify the process of interacting with the API.
-
-[Write Operations](https://github.com/RoamJS/roamjs-components/blob/main/docs/writes.md): The `…/writes` directory includes functions for performing write operations in Roam, such as `createBlock`, `deleteBlock`, and `updateActiveBlock`. These functions handle the submission of actions to the Roam API, as detailed in the Write Operations section.
+# roamjs-components
+
+This is a collection of common UI components used by RoamJS extensions made available to make development easier for other Roam developers.
+
+The `roamjs-components` repository provides a robust set of tools and components for building extensions and integrations for the Roam Research note-taking application. Engineers can use this repo to streamline the development of Roam extensions by leveraging pre-built React components, utility functions, and custom hooks that interact with the Roam Research API. This repo addresses the real-world problem of efficiently creating and managing Roam Research extensions, enabling developers to focus on building unique features rather than handling boilerplate code.
+
+The most important parts of the repo include the Components, utility functions, and database query functions. These components are organized into several directories, each serving a specific purpose:
+
+[Components](https://github.com/RoamJS/roamjs-components/blob/main/docs/components.md): Found in the `…/components` directory, these components handle tasks such as configuration management, external authentication, and data visualization. Key components include configuration panels like `BlockPanel`, `BlocksPanel`, and `OauthPanel`, which are detailed in the Configuration Panels section. These components use React hooks and context to manage state and interactions within the Roam Research application.
+
+[Date and Time Utilities](https://github.com/RoamJS/roamjs-components/blob/main/docs/date.md): Located in `…/date`, this directory provides functions for parsing and manipulating dates, crucial for working with Roam's daily notes. The `parseNlpDate` function uses the `chrono-node` library to parse natural language dates, while `parseRoamDateUid` converts Roam date UIDs into JavaScript Date objects. More details can be found in the Date and Time Utilities section.
+
+[DOM Manipulation](https://github.com/RoamJS/roamjs-components/blob/main/docs/dom.md): The `…/dom` directory contains functions for interacting with the Document Object Model (DOM) within Roam Research. Functions like `addBlockCommand` and `createBlockObserver` are essential for adding new commands and observing changes in the DOM. These utilities are explained in the DOM Manipulation section.
+
+[Event Handling](https://github.com/RoamJS/roamjs-components/blob/main/docs/events.md): The `…/events` directory includes the `watchOnce` function, which sets up one-time event listeners in Roam Research. This function is useful for performing actions when specific changes occur in the Roam environment, as detailed in the Event Handling section.
+
+[Custom React Hooks](https://github.com/RoamJS/roamjs-components/blob/main/docs/hooks.md): Found in `…/hooks`, these hooks provide reusable functionality for managing user interactions and data structures. The `useArrowKeyDown` hook handles keyboard navigation within lists, while `useSubTree` manages sub-tree data structures. More information is available in the Custom React Hooks section.
+
+[Markdown Parsing and Rendering](https://github.com/RoamJS/roamjs-components/blob/main/docs/marked.md): The `…/marked` directory customizes the `marked` library to parse and render Markdown content within Roam Research. This includes handling Roam-specific elements like block references and tags. The Markdown Parsing and Rendering section provides further details.
+
+[Database Queries](https://github.com/RoamJS/roamjs-components/blob/main/docs/queries.md): The `…/queries` directory offers utility functions for interacting with the Roam Research database. Functions like `getAllBlockUids`, `getPageTitleByBlockUid`, and `getCurrentUser` retrieve various types of data from the database. These functions are crucial for building data-driven features and are discussed in the Database Queries section.
+
+[Script Management](https://github.com/RoamJS/roamjs-components/blob/main/docs/scripts.md): The `…/scripts` directory includes functions for managing scripts in Roam Research. This includes functions for creating and managing script commands, as well as functions for executing scripts.
+
+[Type Definitions](https://github.com/RoamJS/roamjs-components/blob/main/docs/types.md): The `…/types` directory contains TypeScript type definitions for various Roam Research components.
+
+[Utility Functions](https://github.com/RoamJS/roamjs-components/blob/main/docs/util.md): The `…/util` directory includes utility functions for working with the Roam Research API. These functions are designed to simplify the process of interacting with the API.
+
+[Write Operations](https://github.com/RoamJS/roamjs-components/blob/main/docs/writes.md): The `…/writes` directory includes functions for performing write operations in Roam, such as `createBlock`, `deleteBlock`, and `updateActiveBlock`. These functions handle the submission of actions to the Roam API, as detailed in the Write Operations section.

package/components/AutocompleteInput.d.ts

@@ -1,28 +1,29 @@
-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;
+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;
+    autoSelectFirstOption?: boolean;
+};
+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, autoSelectFirstOption, }: AutocompleteInputProps<T>) => React.ReactElement;
+export default AutocompleteInput;

package/components/AutocompleteInput.js

@@ -1,121 +1,133 @@
-"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;
+"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, autoSelectFirstOption = true, }) => {
+    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 || !isTyping)
+            return;
+        if (autoSelectFirstOption && isOpen) {
+            setValue(items[activeIndex] || onNewItem(query));
+            return;
+        }
+        setValue(onNewItem(query));
+    }, [
+        setValue,
+        activeIndex,
+        items,
+        onNewItem,
+        isTyping,
+        query,
+        isOpen,
+        autoSelectFirstOption,
+    ]);
+    (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

@@ -1 +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"]}
+{"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  autoSelectFirstOption?: boolean;\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  autoSelectFirstOption = true,\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 || !isTyping) return;\n    if (autoSelectFirstOption && isOpen) {\n      setValue(items[activeIndex] || onNewItem(query));\n      return;\n    }\n    setValue(onNewItem(query));\n  }, [\n    setValue,\n    activeIndex,\n    items,\n    onNewItem,\n    isTyping,\n    query,\n    isOpen,\n    autoSelectFirstOption,\n  ]);\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

@@ -1,16 +1,15 @@
-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;
+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 = 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;
+"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

@@ -1 +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"]}
+{"version":3,"file":"BlockErrorBoundary.js","sourceRoot":"","sources":["../../src/components/BlockErrorBoundary.tsx"],"names":[],"mappings":";;;AAAA,0DAA0B;AAC1B,gFAAgD;AAKhD,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 = { blockUid: string; message: string };\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

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