roamjs-components 0.86.0-alpha → 0.86.0-alpha.2

package/src/components/BlockInput.tsx

@@ -1,117 +1,117 @@
-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;
+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 +1,70 @@
-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;
+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;
+  children?: React.ReactNode;
+}> = ({ 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;