roamjs-components 0.85.0 → 1.0.0-beta.1

package/src/components/CursorMenu.tsx

@@ -0,0 +1,286 @@
+import { Menu, MenuItem, Popover, Position } from "@blueprintjs/core";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import ReactDOM from "react-dom";
+import fuzzy from "fuzzy";
+import getUids from "../dom/getUids";
+import updateBlock from "../writes/updateBlock";
+
+// inspired by https://github.com/zurb/tribute/blob/master/src/TributeRange.js#L446-L556
+export const getCoordsFromTextarea = (
+  t: HTMLTextAreaElement
+): { top: number; left: number } => {
+  const properties = [
+    "direction",
+    "boxSizing",
+    "width",
+    "height",
+    "overflowX",
+    "overflowY",
+    "borderTopWidth",
+    "borderRightWidth",
+    "borderBottomWidth",
+    "borderLeftWidth",
+    "paddingTop",
+    "paddingRight",
+    "paddingBottom",
+    "paddingLeft",
+    "fontStyle",
+    "fontVariant",
+    "fontWeight",
+    "fontStretch",
+    "fontSize",
+    "fontSizeAdjust",
+    "lineHeight",
+    "fontFamily",
+    "textAlign",
+    "textTransform",
+    "textIndent",
+    "textDecoration",
+    "letterSpacing",
+    "wordSpacing",
+  ] as const;
+
+  const div = document.createElement("div");
+  div.id = "input-textarea-caret-position-mirror-div";
+  document.body.appendChild(div);
+
+  const style = div.style;
+  const computed = getComputedStyle(t);
+
+  style.whiteSpace = "pre-wrap";
+  style.wordWrap = "break-word";
+
+  // position off-screen
+  style.position = "absolute";
+  style.visibility = "hidden";
+  style.overflow = "hidden";
+
+  // transfer the element's properties to the div
+  properties.forEach((prop) => {
+    style[prop] = computed[prop];
+  });
+
+  div.textContent = t.value.substring(0, t.selectionStart);
+
+  const span = document.createElement("span");
+  span.textContent = t.value.substring(t.selectionStart) || ".";
+  div.appendChild(span);
+
+  const doc = document.documentElement;
+  const windowLeft =
+    (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
+  const windowTop =
+    (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
+
+  const coordinates = {
+    top:
+      windowTop +
+      span.offsetTop +
+      parseInt(computed.borderTopWidth) +
+      parseInt(computed.fontSize) -
+      t.scrollTop -
+      9,
+    left: windowLeft + span.offsetLeft + parseInt(computed.borderLeftWidth) - 1,
+  };
+  document.body.removeChild(div);
+  return coordinates;
+};
+
+type Props<T> = {
+  textarea: HTMLTextAreaElement;
+  onItemSelect: (item: { text: string; id: string } & T) => void;
+  initialItems: ({ text: string; id: string } & T)[];
+};
+
+const VALID_FILTER = /^[\w\d\s_-]$/;
+
+const CursorMenu = <T extends Record<string, string>>({
+  textarea,
+  onClose,
+  onItemSelect,
+  initialItems,
+}: {
+  onClose: () => void;
+} & Props<T>): React.ReactElement => {
+  const itemsById = useMemo(
+    () => Object.fromEntries(initialItems.map((item) => [item.id, item])),
+    [initialItems]
+  );
+  const menuRef = useRef<HTMLUListElement>(null);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [filter, setFilter] = useState("");
+  const onPopoverClose = useCallback(() => {
+    if (menuRef.current) {
+      const value = menuRef.current.getAttribute("data-filter");
+      const text = `${textarea.value.substring(
+        0,
+        textarea.selectionStart
+      )}${value}${textarea.value.substring(textarea.selectionStart)}`;
+      updateBlock({ uid: getUids(textarea).blockUid, text });
+      setTimeout(() => {
+        textarea.setSelectionRange(
+          textarea.selectionStart + text.length,
+          textarea.selectionEnd + text.length
+        );
+        onClose();
+      }, 1);
+    }
+  }, [onClose, textarea, menuRef]);
+  const items = useMemo(
+    () =>
+      (filter
+        ? fuzzy
+            .filter(filter, initialItems, {
+              extract: (s) => s.text,
+              pre: "<b>",
+              post: "</b>",
+            })
+            .map((r) => ({ ...r.original, displayName: r.string }))
+        : initialItems.map((r) => ({ ...r, displayName: r.text }))
+      ).slice(0, 10),
+    [filter, initialItems]
+  );
+  const onSelect = useCallback(
+    (item) => {
+      if (menuRef.current) {
+        onItemSelect(item);
+        onClose();
+      }
+    },
+    [menuRef, onClose, textarea, onItemSelect]
+  );
+  const keydownListener = useCallback(
+    (e: KeyboardEvent) => {
+      if (
+        menuRef.current &&
+        (e.key === "ArrowRight" || e.key === "ArrowDown")
+      ) {
+        const index = Number(menuRef.current.getAttribute("data-active-index"));
+        const count = menuRef.current.childElementCount;
+        setActiveIndex((index + 1) % count);
+      } else if (
+        menuRef.current &&
+        (e.key === "ArrowLeft" || e.key === "ArrowUp")
+      ) {
+        const index = Number(menuRef.current.getAttribute("data-active-index"));
+        const count = menuRef.current.childElementCount;
+        setActiveIndex((index - 1 + count) % count);
+      } else if (menuRef.current && e.key === "Enter") {
+        const index = Number(menuRef.current.getAttribute("data-active-index"));
+        const id =
+          menuRef.current.children[index]
+            .querySelector(".bp3-menu-item")
+            ?.getAttribute("data-id") || "";
+        onSelect(itemsById[id]);
+      } else if (menuRef.current && VALID_FILTER.test(e.key)) {
+        const value = menuRef.current.getAttribute("data-filter");
+        setFilter(`${value}${e.key}`);
+      } else if (menuRef.current && e.key === "Backspace") {
+        const value = menuRef.current.getAttribute("data-filter");
+        if (value) {
+          setFilter(value.slice(0, -1));
+        } else {
+          onClose();
+          return;
+        }
+      } else if (e.key !== "Shift") {
+        onPopoverClose();
+        return;
+      }
+      e.stopPropagation();
+      e.preventDefault();
+    },
+    [menuRef, setActiveIndex, onClose, onPopoverClose]
+  );
+  useEffect(() => {
+    textarea.addEventListener("keydown", keydownListener);
+    return () => {
+      textarea.removeEventListener("keydown", keydownListener);
+    };
+  }, [keydownListener]);
+  return (
+    <Popover
+      onClose={onPopoverClose}
+      isOpen={true}
+      canEscapeKeyClose
+      minimal
+      target={<span />}
+      position={Position.BOTTOM_LEFT}
+      modifiers={{
+        flip: { enabled: false },
+        preventOverflow: { enabled: false },
+      }}
+      autoFocus={false}
+      content={
+        <Menu
+          ulRef={menuRef}
+          data-active-index={activeIndex}
+          data-filter={filter}
+          style={{ width: 300 }}
+        >
+          {items.length ? (
+            items.map(({ id, displayName }, i) => {
+              return (
+                <MenuItem
+                  key={id}
+                  data-id={id}
+                  text={displayName
+                    .split(/<b>(.*?)<\/b>/)
+                    .map((part, i) =>
+                      i % 2 === 1 ? (
+                        <b key={i}>{part}</b>
+                      ) : (
+                        <span key={i}>{part}</span>
+                      )
+                    )}
+                  active={i === activeIndex}
+                  onMouseEnter={() => setActiveIndex(i)}
+                  onClick={() => setTimeout(() => onSelect(itemsById[id]), 1)}
+                />
+              );
+            })
+          ) : (
+            <MenuItem
+              text={
+                <span style={{ opacity: 0.75 }}>
+                  <i>None</i>
+                </span>
+              }
+              active={false}
+              disabled={true}
+            />
+          )}
+        </Menu>
+      }
+    />
+  );
+};
+
+export const render = <T extends Record<string, string>>(
+  props: Props<T>
+): void => {
+  const parent = document.createElement("span");
+  const coords = getCoordsFromTextarea(props.textarea);
+  parent.style.position = "absolute";
+  parent.style.left = `${coords.left}px`;
+  parent.style.top = `${coords.top}px`;
+  props.textarea.parentElement?.insertBefore(parent, props.textarea);
+  ReactDOM.render(
+    <CursorMenu
+      {...props}
+      onClose={() => {
+        ReactDOM.unmountComponentAtNode(parent);
+        parent.remove();
+      }}
+    />,
+    parent
+  );
+};
+
+export default CursorMenu;

package/src/components/Description.tsx

@@ -0,0 +1,31 @@
+import { Tooltip, Icon } from "@blueprintjs/core";
+import React from "react";
+
+const Description = ({
+  description,
+}: {
+  description: string;
+}): React.ReactElement => {
+  return (
+    <span
+      style={{
+        marginLeft: 12,
+        display: "inline-block",
+        opacity: 0.8,
+        verticalAlign: "text-bottom",
+      }}
+    >
+      <Tooltip
+        content={
+          <span style={{ maxWidth: 400, display: "inline-block" }}>
+            {description}
+          </span>
+        }
+      >
+        <Icon icon={"info-sign"} iconSize={12} />
+      </Tooltip>
+    </span>
+  );
+};
+
+export default Description;

package/src/components/ExtensionApiContext.tsx

@@ -0,0 +1,24 @@
+// @deprecated - use utils/extensionApiContext instead
+import React, { useContext } from "react";
+import { OnloadArgs } from "../types";
+
+const ExtensionApiContext = React.createContext<OnloadArgs | undefined>(
+  undefined
+);
+
+export const useExtensionAPI = () =>
+  useContext(ExtensionApiContext)?.extensionAPI;
+export const useVersion = () =>
+  useContext(ExtensionApiContext)?.extension.version;
+
+const ExtensionApiContextProvider: React.FC<
+  React.PropsWithChildren<OnloadArgs>
+> = ({ children, ...props }) => {
+  return (
+    <ExtensionApiContext.Provider value={props}>
+      {children}
+    </ExtensionApiContext.Provider>
+  );
+};
+
+export default ExtensionApiContextProvider;

package/src/components/ExternalLogin.tsx

@@ -0,0 +1,201 @@
+import { Button, Icon, Spinner } from "@blueprintjs/core";
+import React, { useState, useCallback } from "react";
+import createBlock from "../writes/createBlock";
+import getBasicTreeByParentUid from "../queries/getBasicTreeByParentUid";
+import idToTitle from "../util/idToTitle";
+import nanoid from "nanoid";
+import CryptoJS from "crypto-js";
+import localStorageGet from "../util/localStorageGet";
+import localStorageSet from "../util/localStorageSet";
+import apiPost from "../util/apiPost";
+
+export type ExternalLoginOptions = {
+  service: string;
+  getPopoutUrl: (state: string) => Promise<string>;
+  getAuthData: (d: string) => Promise<Record<string, string>>;
+  ServiceIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+};
+
+const getTargetOrigin = () => {
+  try {
+    // This is for debugging purposes - should probably remove
+    return process.env.CUSTOM_ROAMJS_ORIGIN;
+  } catch {
+    return "https://roamjs.com";
+  }
+};
+
+const ExternalLogin = ({
+  onSuccess,
+  useLocal,
+  parentUid,
+  service,
+  getPopoutUrl,
+  getAuthData,
+  ServiceIcon,
+  loggedIn = false,
+}: {
+  onSuccess: (block: { text: string; uid: string; data: string }) => void;
+  parentUid: string;
+  useLocal?: boolean;
+  loggedIn?: boolean;
+} & ExternalLoginOptions): React.ReactElement => {
+  const targetOrigin = getTargetOrigin();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const onClick = useCallback(() => {
+    const otp = nanoid().replace(/_/g, "-");
+    const key = nanoid().replace(/_/g, "-");
+    const state = `${service}_${otp}_${key}`;
+    setLoading(true);
+    getPopoutUrl(state)
+      .then((url) => {
+        const width = 600;
+        const height = 525;
+        const left = window.screenX + (window.innerWidth - width) / 2;
+        const top = window.screenY + (window.innerHeight - height) / 2;
+        const loginWindow = window.open(
+          `${url}&state=${state}`,
+          `roamjs:${service}:login`,
+          `left=${left},top=${top},width=${width},height=${height},status=1`
+        );
+        let intervalListener = 0;
+        const processAuthData = (data: string) => {
+          loginWindow?.close?.();
+          getAuthData(data)
+            .then(async (rr) => {
+              const labelUid = window.roamAlphaAPI.util.generateUID();
+              const { label = "Default Account", ...rawData } = rr;
+              const oauthData = JSON.stringify(rawData);
+              const account = {
+                text: label,
+                uid: labelUid,
+                data: oauthData,
+                time: new Date().valueOf(),
+              };
+
+              if (useLocal) {
+                const key = `oauth-${service}`;
+                const accounts = JSON.parse(
+                  (localStorageGet(key) as string) || "[]"
+                );
+                localStorageSet(key, JSON.stringify([...accounts, account]));
+              } else {
+                try {
+                  const tree = await getBasicTreeByParentUid(parentUid);
+                  const existingTree = tree.find((t) => /oauth/i.test(t.text));
+                  const blockUid =
+                    existingTree?.uid ||
+                    (await createBlock({
+                      node: { text: "oauth" },
+                      parentUid,
+                    }));
+                  window.roamAlphaAPI.createBlock({
+                    block: { string: label, uid: labelUid },
+                    location: {
+                      "parent-uid": blockUid,
+                      order: existingTree?.children?.length || 0,
+                    },
+                  });
+
+                  const valueUid = window.roamAlphaAPI.util.generateUID();
+                  const block = {
+                    string: oauthData,
+                    uid: valueUid,
+                  };
+                  window.roamAlphaAPI.createBlock({
+                    location: { "parent-uid": labelUid, order: 0 },
+                    block,
+                  });
+                  window.roamAlphaAPI.updateBlock({
+                    block: { open: false, string: "oauth", uid: blockUid },
+                  });
+                } catch (error: unknown) {
+                  setError(
+                    `Failed to save OAuth data: ${
+                      error instanceof Error ? error.message : String(error)
+                    }`
+                  );
+                  return;
+                }
+              }
+              onSuccess(account);
+            })
+            .finally(() => {
+              window.removeEventListener("message", messageEventListener);
+              window.clearTimeout(intervalListener);
+              setLoading(false);
+            });
+        };
+        const messageEventListener = (e: MessageEvent) => {
+          if (e.origin === targetOrigin && loginWindow) {
+            processAuthData(e.data);
+          }
+        };
+        const authInterval = () => {
+          apiPost<{ auth: string }>({
+            path: "auth",
+            data: {
+              service,
+              otp,
+            },
+            anonymous: true,
+          })
+            .then((r) => {
+              if (r.auth) {
+                const auth = CryptoJS.AES.decrypt(r.auth, key).toString(
+                  CryptoJS.enc.Utf8
+                );
+                processAuthData(auth);
+              } else {
+                intervalListener = window.setTimeout(authInterval, 1000);
+              }
+            })
+            .catch((e) => {
+              if (e.response?.status !== 400) {
+                intervalListener = window.setTimeout(authInterval, 1000);
+              }
+            });
+        };
+        authInterval();
+        window.addEventListener("message", messageEventListener);
+      })
+      .catch((e) => {
+        setError(e.message);
+        setLoading(false);
+      });
+  }, [onSuccess, parentUid, setLoading, setError]);
+  return (
+    <div style={{ display: "flex" }}>
+      <Button
+        icon={
+          <Icon
+            icon={
+              <ServiceIcon
+                style={{
+                  width: 15,
+                  height: 15,
+                  marginLeft: 4,
+                  cursor: "pointer",
+                }}
+              />
+            }
+          />
+        }
+        onClick={onClick}
+        disabled={loading}
+        className={"roamjs-external-login"}
+        rightIcon={loading && <Spinner size={Spinner.SIZE_SMALL} />}
+      >
+        {loggedIn
+          ? `Add Another ${idToTitle(service)} Account`
+          : `Login With ${idToTitle(service)}`}
+      </Button>
+      {error && (
+        <div style={{ color: "red", whiteSpace: "pre-line" }}>{error}</div>
+      )}
+    </div>
+  );
+};
+
+export default ExternalLogin;