roamjs-components 0.85.1 → 1.0.0-beta.2

package/package.json

@@ -1,117 +1,117 @@
-{
-  "name": "roamjs-components",
-  "description": "Expansive toolset, utilities, & components for developing RoamJS extensions.",
-  "version": "0.85.1",
-  "main": "index.js",
-  "types": "index.d.ts",
-  "scripts": {
-    "postinstall": "patch-package",
-    "format": "prettier --write \"src/**/*.tsx\"",
-    "lint": "eslint . --ext .ts,.tsx",
-    "build": "tsc",
-    "preversion": "npm run lint",
-    "version": "npm run format && git add -A src",
-    "test": "playwright test",
-    "start": "samepage dev"
-  },
-  "sideEffects": false,
-  "license": "MIT",
-  "peerDependencies": {
-    "@blueprintjs/core": "3.50.4",
-    "@blueprintjs/datetime": "3.23.14",
-    "@blueprintjs/select": "3.18.6",
-    "@types/crypto-js": "4.1.1",
-    "@types/cytoscape": "^3.19.9",
-    "@types/file-saver": "2.0.5",
-    "@types/jsdom": "^20.0.1",
-    "@types/marked": "^4.0.3",
-    "@types/nanoid": "2.0.0",
-    "@types/react": "17.0.39",
-    "@types/react-dom": "17.0.13",
-    "@types/use-sync-external-store": "^0.0.3",
-    "chrono-node": "2.3.0",
-    "crypto-js": "3.1.9-1",
-    "cytoscape": "^3.21.0",
-    "file-saver": "2.0.2",
-    "idb": "6.0.0",
-    "insect": "^5.6.0",
-    "jsdom": "^20.0.3",
-    "jszip": "3.10.0",
-    "marked": "4.0.16",
-    "marked-react": "1.1.2",
-    "nanoid": "2.0.4",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "tslib": "2.2.0",
-    "use-sync-external-store": "^1.2.0"
-  },
-  "dependencies": {
-    "@samepage/scripts": "^0.74.2",
-    "aws-sdk-plus": "^0.5.3",
-    "color": "^4.0.1",
-    "date-fns": "^2.27.0",
-    "edn-data": "^1.0.0",
-    "fuzzy": "^0.1.3",
-    "hast-util-to-html": "^7.1.3",
-    "refractor": "^3.3.1",
-    "xregexp": "^5.0.1"
-  },
-  "devDependencies": {
-    "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
-    "@types/aws-lambda": "^8.10.89",
-    "@types/color": "^3.0.2",
-    "@types/mime-types": "^2.1.1",
-    "@types/refractor": "^3.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.27.1",
-    "@typescript-eslint/parser": "^5.27.1",
-    "eslint": "^8.4.0",
-    "http-server": "^14.1.1",
-    "prettier": "^2.3.1",
-    "tslint-config-prettier": "^1.18.0",
-    "tslint-react-hooks": "^2.2.2"
-  },
-  "engines": {
-    "npm": ">=7.0.0",
-    "node": ">=16.0.0"
-  },
-  "bin": {
-    "roamjs": "./scripts/index.js"
-  },
-  "overrides": {
-    "@testing-library/react": {
-      "react": "17.0.2",
-      "react-dom": "17.0.2"
-    }
-  },
-  "samepage": {
-    "external": [
-      "react-dom/client",
-      "@blueprintjs/core=window.Blueprint.Core",
-      "@blueprintjs/datetime=window.Blueprint.DateTime",
-      "@blueprintjs/select=window.Blueprint.Select",
-      "chrono-node=window.ChronoNode",
-      "crypto-js=window.CryptoJS",
-      "cytoscape=window.RoamLazy.Cytoscape",
-      "file-saver=window.FileSaver",
-      "jszip=window.RoamLazy.JSZip",
-      "idb=window.idb",
-      "insect=window.RoamLazy.Insect",
-      "marked=window.RoamLazy.Marked",
-      "marked-react=window.RoamLazy.MarkedReact",
-      "nanoid=window.Nanoid;module.exports.nanoid=window.Nanoid",
-      "react=window.React;module.exports.useSyncExternalStore=require(\"use-sync-external-store/shim\").useSyncExternalStore",
-      "react/jsx-runtime=./node_modules/react/jsx-runtime.js",
-      "react-dom=window.ReactDOM",
-      "react-youtube=window.ReactYoutube",
-      "tslib=window.TSLib"
-    ],
-    "include": [
-      "package.json",
-      "README.md"
-    ],
-    "out": "extension",
-    "mirror": ".",
-    "format": "esm",
-    "review": "node_modules/roamjs-components/scripts/publishToRoamDepot.js"
-  }
-}
+{
+  "name": "roamjs-components",
+  "description": "Expansive toolset, utilities, & components for developing RoamJS extensions.",
+  "version": "1.0.0-beta.2",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "scripts": {
+    "postinstall": "patch-package",
+    "format": "prettier --write \"src/**/*.tsx\"",
+    "lint": "eslint . --ext .ts,.tsx",
+    "build": "tsc",
+    "preversion": "npm run lint",
+    "version": "npm run format && git add -A src",
+    "test": "playwright test",
+    "start": "samepage dev"
+  },
+  "sideEffects": false,
+  "license": "MIT",
+  "peerDependencies": {
+    "@blueprintjs/core": "3.50.4",
+    "@blueprintjs/datetime": "3.23.14",
+    "@blueprintjs/select": "3.18.6",
+    "@types/crypto-js": "4.1.1",
+    "@types/cytoscape": "^3.19.9",
+    "@types/file-saver": "2.0.5",
+    "@types/jsdom": "^20.0.1",
+    "@types/marked": "^4.0.3",
+    "@types/nanoid": "2.0.0",
+    "@types/react": "17.0.39",
+    "@types/react-dom": "17.0.13",
+    "@types/use-sync-external-store": "^0.0.3",
+    "chrono-node": "2.3.0",
+    "crypto-js": "3.1.9-1",
+    "cytoscape": "^3.21.0",
+    "file-saver": "2.0.2",
+    "idb": "6.0.0",
+    "insect": "^5.6.0",
+    "jsdom": "^20.0.3",
+    "jszip": "3.10.0",
+    "marked": "4.0.16",
+    "marked-react": "1.1.2",
+    "nanoid": "2.0.4",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "tslib": "2.2.0",
+    "use-sync-external-store": "^1.2.0"
+  },
+  "dependencies": {
+    "@samepage/scripts": "^0.74.2",
+    "aws-sdk-plus": "^0.5.3",
+    "color": "^4.0.1",
+    "date-fns": "^2.27.0",
+    "edn-data": "^1.0.0",
+    "fuzzy": "^0.1.3",
+    "hast-util-to-html": "^7.1.3",
+    "refractor": "^3.3.1",
+    "xregexp": "^5.0.1"
+  },
+  "devDependencies": {
+    "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
+    "@types/aws-lambda": "^8.10.89",
+    "@types/color": "^3.0.2",
+    "@types/mime-types": "^2.1.1",
+    "@types/refractor": "^3.0.2",
+    "@typescript-eslint/eslint-plugin": "^5.27.1",
+    "@typescript-eslint/parser": "^5.27.1",
+    "eslint": "^8.4.0",
+    "http-server": "^14.1.1",
+    "prettier": "^2.3.1",
+    "tslint-config-prettier": "^1.18.0",
+    "tslint-react-hooks": "^2.2.2"
+  },
+  "engines": {
+    "npm": ">=7.0.0",
+    "node": ">=16.0.0"
+  },
+  "bin": {
+    "roamjs": "./scripts/index.js"
+  },
+  "overrides": {
+    "@testing-library/react": {
+      "react": "17.0.2",
+      "react-dom": "17.0.2"
+    }
+  },
+  "samepage": {
+    "external": [
+      "react-dom/client",
+      "@blueprintjs/core=window.Blueprint.Core",
+      "@blueprintjs/datetime=window.Blueprint.DateTime",
+      "@blueprintjs/select=window.Blueprint.Select",
+      "chrono-node=window.ChronoNode",
+      "crypto-js=window.CryptoJS",
+      "cytoscape=window.RoamLazy.Cytoscape",
+      "file-saver=window.FileSaver",
+      "jszip=window.RoamLazy.JSZip",
+      "idb=window.idb",
+      "insect=window.RoamLazy.Insect",
+      "marked=window.RoamLazy.Marked",
+      "marked-react=window.RoamLazy.MarkedReact",
+      "nanoid=window.Nanoid;module.exports.nanoid=window.Nanoid",
+      "react=window.React;module.exports.useSyncExternalStore=require(\"use-sync-external-store/shim\").useSyncExternalStore",
+      "react/jsx-runtime=./node_modules/react/jsx-runtime.js",
+      "react-dom=window.ReactDOM",
+      "react-youtube=window.ReactYoutube",
+      "tslib=window.TSLib"
+    ],
+    "include": [
+      "package.json",
+      "README.md"
+    ],
+    "out": "extension",
+    "mirror": ".",
+    "format": "esm",
+    "review": "node_modules/roamjs-components/scripts/publishToRoamDepot.js"
+  }
+}

package/patches/dotenv+16.3.1.patch

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

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

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

@@ -0,0 +1,130 @@
+import {
+  Popover,
+  PopoverPosition,
+  Menu,
+  MenuItem,
+  InputGroup,
+} from "@blueprintjs/core";
+import React, {
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+  useEffect,
+} 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?: () => Promise<{ text: string; uid: string }[]>;
+  autoFocus?: boolean;
+}): React.ReactElement => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [allBlocks, setAllBlocks] = useState<{ text: string; uid: string }[]>(
+    []
+  );
+  const open = useCallback(() => setIsOpen(true), [setIsOpen]);
+  const close = useCallback(() => setIsOpen(false), [setIsOpen]);
+
+  useEffect(() => {
+    getAllBlocks().then(setAllBlocks);
+  }, [getAllBlocks]);
+
+  const items = useMemo(
+    () => (value && isOpen ? searchBlocksByString(value, allBlocks) : []),
+    [value, allBlocks, isOpen]
+  );
+  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;