roamjs-components 0.85.1 → 0.86.0-alpha.2

package/src/components/BlockInput.tsx

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

package/src/components/ComponentContainer.tsx

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

package/src/components/ConfigPage.tsx

@@ -0,0 +1,320 @@
+import { Card, Tab, Tabs } from "@blueprintjs/core";
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import ReactDOM from "react-dom";
+import createHTMLObserver from "../dom/createHTMLObserver";
+import createBlock from "../writes/createBlock";
+import createPage from "../writes/createPage";
+import getBasicTreeByParentUid from "../queries/getBasicTreeByParentUid";
+import getPageUidByPageTitle from "../queries/getPageUidByPageTitle";
+import getShallowTreeByParentUid from "../queries/getShallowTreeByParentUid";
+import localStorageGet from "../util/localStorageGet";
+import idToTitle from "../util/idToTitle";
+import type { Field, UnionField } from "./ConfigPanels/types";
+import { Brand } from "./ConfigPanels/getBrandColors";
+import { InputTextNode } from "../types";
+
+export type ConfigTab = {
+  id: string;
+  toggleable?: boolean | "premium";
+  onEnable?: () => void;
+  onDisable?: () => void;
+  development?: boolean;
+  fields: Field<UnionField>[];
+};
+
+type Config =
+  | {
+      tabs: ConfigTab[];
+      versioning?: boolean;
+      brand?: Brand;
+    }
+  | Field<UnionField>[];
+
+const FieldTabs = ({
+  id,
+  fields,
+  uid,
+  pageUid,
+  order,
+  toggleable,
+}: {
+  uid: string;
+  pageUid: string;
+  order: number;
+  extensionId: string;
+} & ConfigTab) => {
+  const parentUid = useMemo(() => {
+    if (/home/i.test(id)) {
+      return pageUid;
+    }
+    if (uid) {
+      return uid;
+    }
+    if (toggleable) {
+      return "";
+    }
+    const newUid = window.roamAlphaAPI.util.generateUID();
+    createBlock({
+      parentUid: pageUid,
+      order,
+      node: { text: id, uid: newUid },
+    });
+    return newUid;
+  }, [pageUid, uid, id, toggleable]);
+  const childUids = Object.fromEntries(
+    getShallowTreeByParentUid(parentUid).map(({ text, uid }) => [
+      text.toLowerCase().trim(),
+      uid,
+    ])
+  );
+  const [selectedTabId, setSelectedTabId] = useState(
+    fields.length && typeof toggleable !== "string"
+      ? fields[0].title
+      : "enabled"
+  );
+  const onTabsChange = useCallback(
+    (tabId: string) => setSelectedTabId(tabId),
+    [setSelectedTabId]
+  );
+  return (
+    <Tabs
+      vertical
+      id={`${id}-field-tabs`}
+      onChange={onTabsChange}
+      selectedTabId={selectedTabId}
+      renderActiveTabPanelOnly
+    >
+      {fields.map((field, i) => {
+        const { Panel, title, defaultValue } = field;
+        return (
+          <Tab
+            id={title}
+            key={title}
+            title={idToTitle(title)}
+            panel={
+              <Panel
+                {...field}
+                defaultValue={defaultValue}
+                order={i}
+                parentUid={parentUid}
+                uid={childUids[title.toLowerCase()]}
+              />
+            }
+          />
+        );
+      })}
+    </Tabs>
+  );
+};
+
+const ConfigPage = ({
+  id,
+  config,
+  pageUid,
+}: {
+  id: string;
+  config: Config;
+  pageUid: string;
+}): React.ReactElement => {
+  const isLegacy = "tabs" in config;
+  const userTabs = isLegacy
+    ? config.tabs.filter((t) => t.fields.length || t.toggleable)
+    : [{ fields: config, id: "home" }];
+  const [selectedTabId, setSelectedTabId] = useState(userTabs[0]?.id);
+  const onTabsChange = useCallback(
+    (tabId: string) => setSelectedTabId(tabId),
+    [setSelectedTabId]
+  );
+  const tree = getBasicTreeByParentUid(pageUid);
+
+  // first character trimmed intentionally for the `v` below
+  const titleRef = useRef<HTMLDivElement>(null);
+  const experimentalMode = useMemo(() => localStorageGet("experimental"), []);
+  return (
+    <Card style={{ color: "#202B33" }} className={"roamjs-config-panel"}>
+      <div
+        style={{ display: "flex", justifyContent: "space-between" }}
+        ref={titleRef}
+        tabIndex={-1}
+      >
+        <h4 style={{ padding: 4 }}>{idToTitle(id)} Configuration</h4>
+      </div>
+      <style>{`.roamjs-config-tabs {\npadding: 4px;\n}`}</style>
+      {isLegacy ? (
+        <Tabs
+          id={`${id}-config-tabs`}
+          onChange={onTabsChange}
+          selectedTabId={selectedTabId}
+          renderActiveTabPanelOnly
+          className={"roamjs-config-tabs"}
+        >
+          {userTabs.map(
+            (
+              {
+                id: tabId,
+                fields,
+                toggleable,
+                development = false,
+                onEnable,
+                onDisable,
+              },
+              i
+            ) => (
+              <Tab
+                id={tabId}
+                key={tabId}
+                title={idToTitle(tabId)}
+                disabled={development && !experimentalMode}
+                panel={
+                  <FieldTabs
+                    id={tabId}
+                    extensionId={id}
+                    fields={fields}
+                    uid={
+                      tree.find((t) => new RegExp(tabId, "i").test(t.text))
+                        ?.uid || ""
+                    }
+                    pageUid={pageUid}
+                    order={i}
+                    toggleable={toggleable}
+                    onEnable={onEnable}
+                    onDisable={onDisable}
+                  />
+                }
+              />
+            )
+          )}
+        </Tabs>
+      ) : (
+        <FieldTabs
+          id={"home"}
+          extensionId={id}
+          fields={config}
+          uid={pageUid}
+          pageUid={pageUid}
+          order={0}
+          toggleable={false}
+        />
+      )}
+    </Card>
+  );
+};
+
+// TODO: better nested type discrimination here
+const fieldsToChildren = (fields: Field<UnionField>[]) =>
+  fields
+    .filter((f) => !!f.defaultValue)
+    .map((f) => ({
+      text: f.title,
+      children:
+        f.Panel.type === "flag"
+          ? []
+          : f.Panel.type === "custom"
+          ? (f.defaultValue as InputTextNode[]) || []
+          : f.Panel.type === "pages" || f.Panel.type === "multitext"
+          ? (f.defaultValue as string[])?.map((v) => ({ text: v }))
+          : f.Panel.type === "block"
+          ? f.defaultValue
+            ? [f.defaultValue as InputTextNode]
+            : []
+          : [{ text: `${f.defaultValue}` }],
+    }));
+
+const createConfigPage = ({
+  title,
+  config,
+}: {
+  title: string;
+  config: Config;
+}) => {
+  const homeTab =
+    "tabs" in config
+      ? config.tabs.find((t) => /home/i.test(t.id))?.fields
+      : config;
+  const rawTree = [
+    ...(homeTab ? fieldsToChildren(homeTab) : []),
+    ...("tabs" in config
+      ? config.tabs
+          .filter((t) => !/home/i.test(t.id) && !t.toggleable && !t.development)
+          .map((t) => ({
+            text: t.id,
+            children: fieldsToChildren(t.fields),
+          }))
+      : []),
+  ];
+  return createPage({
+    title,
+    tree: rawTree.length ? rawTree : [{ text: " " }],
+  });
+};
+
+export const render = ({
+  h,
+  title,
+  pageUid = getPageUidByPageTitle(title),
+  config,
+}: {
+  h: HTMLHeadingElement;
+  title: string;
+  pageUid?: string;
+  config: Config;
+}) => {
+  const uid = getPageUidByPageTitle(title);
+  const attribute = `data-roamjs-${uid}`;
+  const containerParent = h.parentElement?.parentElement;
+  if (containerParent && !containerParent.hasAttribute(attribute)) {
+    containerParent.setAttribute(attribute, "true");
+    const parent = document.createElement("div");
+    const configPageId = title.split("/").slice(-1)[0];
+    parent.id = `${configPageId}-config`;
+    containerParent.insertBefore(
+      parent,
+      h.parentElement?.nextElementSibling || null
+    );
+    ReactDOM.render(
+      <ConfigPage id={configPageId} config={config} pageUid={pageUid} />,
+      parent
+    );
+  }
+};
+
+export const createConfigObserver = async ({
+  title,
+  config,
+}: {
+  title: string;
+  config: Config;
+}): Promise<{ pageUid: string; observer?: MutationObserver }> => {
+  const pageUid =
+    getPageUidByPageTitle(title) ||
+    (await createConfigPage({
+      title,
+      config,
+    }));
+  if ("tabs" in config ? !!config.tabs.length : !!config.length) {
+    const observer = createHTMLObserver({
+      className: "rm-title-display",
+      tag: "H1",
+      callback: (d: HTMLElement) => {
+        const h = d as HTMLHeadingElement;
+        if (h.innerText === title) {
+          render({
+            pageUid,
+            config,
+            title,
+            h,
+          });
+        }
+      },
+    });
+    return {
+      pageUid,
+      observer,
+    };
+  }
+  return {
+    pageUid,
+  };
+};
+
+export default ConfigPage;

package/src/components/ConfigPanels/BlockPanel.tsx

@@ -0,0 +1,60 @@
+import { Label } from "@blueprintjs/core";
+import React, { useRef, useEffect } from "react";
+import getFirstChildUidByBlockUid from "../../queries/getFirstChildUidByBlockUid";
+import idToTitle from "../../util/idToTitle";
+import createBlock from "../../writes/createBlock";
+import Description from "../Description";
+import type { FieldPanel, BlockField } from "./types";
+
+const BlockPanel: FieldPanel<BlockField> = ({
+  uid: initialUid,
+  parentUid,
+  title,
+  defaultValue,
+  description,
+}) => {
+  const containerRef = useRef(null);
+  useEffect(() => {
+    if (containerRef.current) {
+      const el = containerRef.current;
+      (initialUid
+        ? Promise.resolve(initialUid)
+        : createBlock({ node: { text: title, children: [] }, parentUid })
+      )
+        .then(
+          (formatUid) =>
+            getFirstChildUidByBlockUid(formatUid) ||
+            createBlock({
+              node: defaultValue || { text: " " },
+              parentUid: formatUid,
+            })
+        )
+        .then((uid) => {
+          window.roamAlphaAPI.ui.components.renderBlock({
+            uid,
+            el,
+          });
+        });
+    }
+  }, [containerRef, defaultValue]);
+  return (
+    <>
+      <Label>
+        {idToTitle(title)}
+        <Description description={description} />
+      </Label>
+      <div
+        ref={containerRef}
+        style={{
+          border: "1px solid #33333333",
+          padding: "8px 0",
+          borderRadius: 4,
+        }}
+      ></div>
+    </>
+  );
+};
+
+BlockPanel.type = "block";
+
+export default BlockPanel;

package/src/components/ConfigPanels/BlocksPanel.tsx

@@ -0,0 +1,100 @@
+import { Button, Label, Tooltip } from "@blueprintjs/core";
+import React, { useEffect, useRef, useState } from "react";
+import getFirstChildUidByBlockUid from "../../queries/getFirstChildUidByBlockUid";
+import idToTitle from "../../util/idToTitle";
+import createBlock from "../../writes/createBlock";
+import Description from "../Description";
+import type { FieldPanel, BlocksField } from "./types";
+
+const BlocksPanel: FieldPanel<BlocksField> = ({
+  uid: initialUid,
+  parentUid,
+  title,
+  defaultValue,
+  description,
+}) => {
+  const containerRef = useRef(null);
+  const [navUid, setNavUid] = useState(initialUid || parentUid);
+  useEffect(() => {
+    if (containerRef.current) {
+      const el = containerRef.current;
+      (initialUid
+        ? Promise.resolve(initialUid)
+        : createBlock({ node: { text: title, children: [] }, parentUid }).then(
+            (uid) => {
+              setNavUid(uid);
+              return uid;
+            }
+          )
+      )
+        .then((formatUid) =>
+          getFirstChildUidByBlockUid(formatUid)
+            ? formatUid
+            : (defaultValue?.length
+                ? Promise.all(
+                    defaultValue.map((node, order) =>
+                      createBlock({
+                        node,
+                        parentUid: formatUid,
+                        order,
+                      })
+                    )
+                  )
+                : createBlock({
+                    node: { text: " " },
+                    parentUid: formatUid,
+                  })
+              ).then(() => formatUid)
+        )
+        .then((uid) => {
+          window.roamAlphaAPI.ui.components.renderBlock({
+            uid,
+            el,
+          });
+        });
+    }
+  }, [containerRef, defaultValue, setNavUid]);
+  return (
+    <>
+      <Label>
+        {idToTitle(title)}
+        <Description description={description} />
+        <Tooltip content={"Click here to edit these blocks directly"}>
+          <Button
+            icon={"link"}
+            minimal
+            onClick={() =>
+              window.roamAlphaAPI.ui.mainWindow.openBlock({
+                block: { uid: navUid },
+              })
+            }
+          />
+        </Tooltip>
+      </Label>
+      <style>{`.roamjs-config-blocks > div > .rm-block-main {
+    display: none;
+  }
+  
+  .roamjs-config-blocks > div > .rm-block-children > .rm-multibar {
+    display: none;
+  }
+  
+  .roamjs-config-blocks > div > .rm-block-children {
+    margin-left: -4px;
+  }`}</style>
+      <div
+        ref={containerRef}
+        style={{
+          border: "1px solid #33333333",
+          padding: "8px 0",
+          borderRadius: 4,
+        }}
+        className={"roamjs-config-blocks"}
+      ></div>
+    </>
+  );
+};
+
+BlocksPanel.type = "blocks";
+
+export default BlocksPanel;

package/src/components/ConfigPanels/CustomPanel.tsx

@@ -0,0 +1,41 @@
+import { Label } from "@blueprintjs/core";
+import React, { useMemo } from "react";
+import idToTitle from "../../util/idToTitle";
+import createBlock from "../../writes/createBlock";
+import Description from "../Description";
+import type { FieldPanel, CustomField } from "./types";
+
+const CustomPanel: FieldPanel<CustomField> = ({
+  description,
+  title,
+  uid: inputUid,
+  options: { component: Component },
+  parentUid,
+  defaultValue = [],
+  order,
+}) => {
+  const uid = useMemo(() => {
+    if (inputUid) return inputUid;
+    const newUid = window.roamAlphaAPI.util.generateUID();
+    createBlock({ node: { text: title, uid: newUid }, parentUid, order });
+    return newUid;
+  }, [inputUid]);
+  return (
+    <>
+      <Label>
+        {idToTitle(title)}
+        <Description description={description} />
+      </Label>
+      <Component
+        uid={uid}
+        parentUid={parentUid}
+        title={title}
+        defaultValue={defaultValue}
+      />
+    </>
+  );
+};
+
+CustomPanel.type = "custom";
+
+export default CustomPanel;