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

package/patches/dotenv+16.3.1.patch

@@ -1,12 +0,0 @@
-diff --git a/node_modules/dotenv/lib/main.d.ts b/node_modules/dotenv/lib/main.d.ts
-index af84746..2247963 100644
---- a/node_modules/dotenv/lib/main.d.ts
-+++ b/node_modules/dotenv/lib/main.d.ts
-@@ -1,6 +1,6 @@
- // TypeScript Version: 3.0
- /// <reference types="node" />
--import type { URL } from 'node:url';
-+import type { URL } from 'url';
- 
- export interface DotenvParseOutput {
-   [name: string]: string;

package/src/components/AutocompleteInput.tsx

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

package/src/components/BlockErrorBoundary.tsx

@@ -1,35 +0,0 @@
-import React from "react";
-import createBlock from "../writes/createBlock";
-
-type BlockErrorBoundaryProps = { blockUid: string; message: string };
-type BlockErrorBoundaryState = { hasError: boolean };
-
-class BlockErrorBoundary extends React.Component<
-  BlockErrorBoundaryProps,
-  BlockErrorBoundaryState
-> {
-  constructor(props: BlockErrorBoundaryProps) {
-    super(props);
-    this.state = { hasError: false };
-  }
-
-  static getDerivedStateFromError(): BlockErrorBoundaryState {
-    return { hasError: true };
-  }
-
-  componentDidCatch(error: Error): void {
-    createBlock({
-      node: { text: this.props.message.replace("{ERROR}", error.message) },
-      parentUid: this.props.blockUid,
-    });
-  }
-
-  render(): React.ReactNode {
-    if (this.state.hasError) {
-      return <div>Component Failed To Load</div>;
-    }
-    return this.props.children;
-  }
-}
-
-export default BlockErrorBoundary;

package/src/components/BlockInput.tsx

@@ -1,117 +0,0 @@
-import {
-  Popover,
-  PopoverPosition,
-  Menu,
-  MenuItem,
-  InputGroup,
-} from "@blueprintjs/core";
-import React, { useCallback, useMemo, useRef, useState } from "react";
-import getAllBlockUidsAndTexts from "../queries/getAllBlockUidsAndTexts";
-import useArrowKeyDown from "../hooks/useArrowKeyDown";
-
-const searchBlocksByString = (
-  q: string,
-  blocks: { text: string; uid: string }[]
-) => {
-  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,
-  autoFocus,
-}: {
-  value: string;
-  setValue: (q: string, uid?: string) => void;
-  onBlur?: (v: string) => void;
-  onConfirm?: () => void;
-  getAllBlocks?: () => { text: string; uid: string }[];
-  autoFocus?: boolean;
-}): React.ReactElement => {
-  const [isOpen, setIsOpen] = useState(false);
-  const open = useCallback(() => setIsOpen(true), [setIsOpen]);
-  const close = useCallback(() => setIsOpen(false), [setIsOpen]);
-  const allBlocks = useMemo(getAllBlocks, []);
-  const items = useMemo(
-    () => (value && isOpen ? searchBlocksByString(value, allBlocks) : []),
-    [value, allBlocks]
-  );
-  const menuRef = useRef<HTMLUListElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const { activeIndex, onKeyDown } = useArrowKeyDown({
-    onEnter: (value) => {
-      if (isOpen) {
-        setValue(value.text, value.uid);
-        close();
-      } else if (onConfirm) {
-        onConfirm();
-      }
-    },
-    results: items,
-    menuRef,
-  });
-  return (
-    <Popover
-      portalClassName={"roamjs-block-input"}
-      targetClassName={"roamjs-block-input-target"}
-      captureDismiss={true}
-      isOpen={isOpen}
-      onOpened={open}
-      minimal={true}
-      autoFocus={false}
-      enforceFocus={false}
-      position={PopoverPosition.BOTTOM_LEFT}
-      modifiers={{
-        flip: { enabled: false },
-        preventOverflow: { enabled: false },
-      }}
-      content={
-        <Menu className={"max-h-64 overflow-auto max-w-md"} ulRef={menuRef}>
-          {items.map((t, i) => (
-            <MenuItem
-              text={t.text}
-              active={activeIndex === i}
-              key={t.uid}
-              multiline
-              onClick={() => {
-                setValue(t.text, t.uid);
-                close();
-                inputRef.current?.focus();
-              }}
-            />
-          ))}
-        </Menu>
-      }
-      target={
-        <InputGroup
-          value={value || ""}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            setValue(e.target.value);
-            setIsOpen(!!e.target.value);
-          }}
-          placeholder={"Search for a block"}
-          onKeyDown={onKeyDown}
-          onBlur={(e) => {
-            if (
-              e.relatedTarget &&
-              !(e.relatedTarget as HTMLElement).closest?.(".roamjs-block-input")
-            ) {
-              close();
-            }
-            if (onBlur) {
-              onBlur(e.target.value);
-            }
-          }}
-          inputRef={inputRef}
-          autoFocus={autoFocus}
-        />
-      }
-    />
-  );
-};
-
-export default BlockInput;

package/src/components/ComponentContainer.tsx

@@ -1,69 +0,0 @@
-import { Button } from "@blueprintjs/core";
-import React, { useCallback, useState } from "react";
-import getUidsFromId from "../dom/getUidsFromId";
-import getBlockUidFromTarget from "../dom/getBlockUidFromTarget";
-import renderWithUnmount from "../util/renderWithUnmount";
-import { OnloadArgs } from "../types/native";
-
-const ComponentContainer: React.FunctionComponent<{
-  blockId?: string;
-  className?: string;
-}> = ({ blockId, className, children }) => {
-  const [showIcons, setShowIcons] = useState(false);
-  const appear = useCallback(() => setShowIcons(true), [setShowIcons]);
-  const disappear = useCallback(() => setShowIcons(false), [setShowIcons]);
-
-  const { blockUid, windowId } = getUidsFromId(blockId);
-  return (
-    <div
-      className={className}
-      onMouseOver={appear}
-      onMouseLeave={disappear}
-      style={{ position: "relative", width: "fit-content", minWidth: 300 }}
-    >
-      {showIcons && (
-        <div className={"roamjs-edit-component absolute top-2 right-2 z-50"}>
-          {blockId && (
-            <Button
-              icon="edit"
-              minimal
-              onClick={() =>
-                window.roamAlphaAPI.ui.setBlockFocusAndSelection({
-                  location: { "block-uid": blockUid, "window-id": windowId },
-                })
-              }
-            />
-          )}
-        </div>
-      )}
-      {children}
-    </div>
-  );
-};
-
-export const createComponentRender =
-  (
-    Fc: (props: { blockUid: string }) => React.ReactElement,
-    className?: string
-  ) =>
-  (b: HTMLButtonElement, args?: OnloadArgs): void => {
-    if (b.parentElement) {
-      b.parentElement.onmousedown = (e: MouseEvent) => e.stopPropagation();
-      const blockUid = getBlockUidFromTarget(b);
-      const possibleBlockId = b.closest(".roam-block")?.id;
-      const blockId = possibleBlockId?.endsWith?.(blockUid)
-        ? possibleBlockId
-        : undefined;
-      if (blockUid) {
-        renderWithUnmount(
-          <ComponentContainer blockId={blockId} className={className}>
-            <Fc blockUid={blockUid} />
-          </ComponentContainer>,
-          b.parentElement,
-          args
-        );
-      }
-    }
-  };
-
-export default ComponentContainer;