roamjs-components 0.85.1 → 0.86.0-alpha.2

package/src/dom/createPageTitleObserver.ts

@@ -0,0 +1,43 @@
+import getPageUidByPageTitle from "../queries/getPageUidByPageTitle";
+import getRoamUrl from "./getRoamUrl";
+
+const createPageTitleObserver = ({
+  title,
+  callback,
+  log = false,
+}: {
+  title: string;
+  callback: (d: HTMLDivElement) => void;
+  log?: boolean;
+}): (() => void) => {
+  const listener = (url: string) => {
+    const d = document.getElementsByClassName(
+      "roam-article"
+    )[0] as HTMLDivElement;
+    if (d) {
+      const uid = getPageUidByPageTitle(title);
+      const attribute = `data-roamjs-${uid}`;
+      if ((uid && url === getRoamUrl(uid)) || (log && url === getRoamUrl())) {
+        // React's rerender crushes the old article/heading
+        setTimeout(() => {
+          if (!d.hasAttribute(attribute)) {
+            d.setAttribute(attribute, "true");
+            callback(
+              document.getElementsByClassName(
+                "roam-article"
+              )[0] as HTMLDivElement
+            );
+          }
+        }, 1);
+      } else {
+        d.removeAttribute(attribute);
+      }
+    }
+  };
+  const wrapped = (e: HashChangeEvent) => listener(e.newURL);
+  window.addEventListener("hashchange", wrapped);
+  listener(window.location.href);
+  return () => window.removeEventListener("hashchange", wrapped);
+};
+
+export default createPageTitleObserver;

package/src/dom/elToTitle.ts

@@ -0,0 +1,21 @@
+const elToTitle = (e?: Node): string => {
+  if (!e) {
+    return "";
+  } else if (e.nodeName === "#text") {
+    return e.nodeValue || "";
+  } else if (
+    e.nodeName === "SPAN" &&
+    (e as HTMLSpanElement).classList.contains("rm-page-ref__brackets")
+  ) {
+    return "";
+  } else if (
+    e.nodeName === "SPAN" &&
+    (e as HTMLSpanElement).classList.contains("rm-page-ref")
+  ) {
+    return `[[${Array.from(e.childNodes).map(elToTitle).join("")}]]`;
+  } else {
+    return Array.from(e.childNodes).map(elToTitle).join("");
+  }
+};
+
+export default elToTitle;

package/src/dom/genericError.ts

@@ -0,0 +1,13 @@
+import type { RoamError } from "../types";
+import updateActiveBlock from "../writes/updateActiveBlock";
+
+const genericError = (e: Partial<Error & RoamError>): string => {
+  const message = e.message || e.raw || "Unknown Error Occurred";
+  const errMsg = `Error: ${
+    message.length > 50 ? `${message.substring(0, 50)}...` : message
+  }`;
+  updateActiveBlock(errMsg);
+  return errMsg;
+};
+
+export default genericError;

package/src/dom/getActiveUids.ts

@@ -0,0 +1,6 @@
+import getUids from "./getUids";
+
+const getActiveUids = (): ReturnType<typeof getUids> =>
+  getUids(document.activeElement as HTMLTextAreaElement)
+
+export default getActiveUids;

package/src/dom/getBlockUidFromTarget.ts

@@ -0,0 +1,39 @@
+import getNthChildUidByBlockUid from "../queries/getNthChildUidByBlockUid";
+import getReferenceBlockUid from "./getReferenceBlockUid";
+import getUids from "./getUids";
+
+const getBlockUidFromTarget = (target: HTMLElement): string => {
+  const ref = target.closest(".rm-block-ref") as HTMLSpanElement;
+  if (ref) {
+    return ref.getAttribute("data-uid") || "";
+  }
+
+  const customView = target.closest(".roamjs-block-view") as HTMLDivElement;
+  if (customView) {
+    return getUids(customView).blockUid;
+  }
+
+  const aliasTooltip = target.closest(".rm-alias-tooltip__content");
+  if (aliasTooltip) {
+    const aliasRef = document.querySelector(
+      ".bp3-popover-open .rm-alias--block"
+    ) as HTMLAnchorElement;
+    return getReferenceBlockUid(aliasRef, "rm-alias--block");
+  }
+
+  const { blockUid } = getUids(target.closest(".roam-block") as HTMLDivElement);
+  const kanbanTitle = target.closest(".kanban-title");
+  if (kanbanTitle) {
+    const container = kanbanTitle.closest(".kanban-column-container");
+    if (container) {
+      const column = kanbanTitle.closest(".kanban-column");
+      const order = Array.from(container.children).findIndex(
+        (d) => d === column
+      );
+      return getNthChildUidByBlockUid({ blockUid, order });
+    }
+  }
+  return blockUid;
+}
+
+export default getBlockUidFromTarget;

package/src/dom/getCurrentPageUid.ts

@@ -0,0 +1,5 @@
+const getCurrentPageUid = (): string =>
+  window.location.hash.match(/\/page\/(.*)$/)?.[1] ||
+  window.roamAlphaAPI.util.dateToPageUid(new Date());
+
+export default getCurrentPageUid;

package/src/dom/getDomRefs.ts

@@ -0,0 +1,15 @@
+import getUids from "./getUids";
+
+const getDomRefs = (blockUid: string): string[] => {
+  const currentlyEditingBlock = document.querySelector(
+    "textarea.rm-block-input"
+  ) as HTMLTextAreaElement;
+  if (getUids(currentlyEditingBlock).blockUid === blockUid) {
+    return (
+      currentlyEditingBlock.value.match(/\(\(([\w\d-]{9})\)\)/g) || []
+    ).map((s) => s.slice(2, -2));
+  }
+  return [];
+};
+
+export default getDomRefs;

package/src/dom/getDropUidOffset.ts

@@ -0,0 +1,36 @@
+import getPageUidByPageTitle from "../queries/getPageUidByPageTitle";
+import getPageTitleByHtmlElement from "./getPageTitleByHtmlElement";
+import getUids from "./getUids";
+
+const getDropUidOffset = (
+  d: HTMLDivElement
+): { parentUid: string; offset: number } => {
+  const separator = d.parentElement;
+  const childrenContainer = separator?.parentElement;
+  const children = Array.from(childrenContainer?.children || []);
+  const index = children.findIndex((c) => c === separator);
+  const offset = children.reduce(
+    (prev, cur, ind) =>
+      cur.classList.contains("roam-block-container") && ind < index
+        ? prev + 1
+        : prev,
+    0
+  );
+  const parentBlock =
+    childrenContainer?.previousElementSibling?.getElementsByClassName(
+      "roam-block"
+    )?.[0] as HTMLDivElement;
+  const parentUid = parentBlock
+    ? getUids(parentBlock).blockUid
+    : childrenContainer
+    ? getPageUidByPageTitle(
+        getPageTitleByHtmlElement(childrenContainer)?.textContent || ""
+      )
+    : "";
+  return {
+    parentUid,
+    offset,
+  };
+};
+
+export default getDropUidOffset;

package/src/dom/getMutatedNodes.ts

@@ -0,0 +1,31 @@
+
+
+const getMutatedNodes = ({
+  ms,
+  tag,
+  className,
+  nodeList,
+}: {
+  ms: MutationRecord[];
+  tag: string;
+  className: string;
+  nodeList: "addedNodes" | "removedNodes";
+}): Node[] => {
+  const blocks = ms.flatMap((m) =>
+    Array.from(m[nodeList]).filter(
+      (d: Node) =>
+        d.nodeName === tag &&
+        Array.from((d as HTMLElement).classList).includes(className)
+    )
+  );
+  const childBlocks = ms.flatMap((m) =>
+    Array.from(m[nodeList])
+      .filter((n) => n.hasChildNodes())
+      .flatMap((d) =>
+        Array.from((d as HTMLElement).getElementsByClassName(className))
+      )
+  );
+  return [...blocks, ...childBlocks];
+}
+
+export default getMutatedNodes;

package/src/dom/getPageTitleByHtmlElement.ts

@@ -0,0 +1,19 @@
+const getPageTitleByHtmlElement = (e: Element): ChildNode | undefined => {
+  const container =
+    e.closest(".roam-log-page") ||
+    e.closest(".rm-sidebar-outline") ||
+    e.closest(".roam-article") ||
+    document;
+  const heading =
+    (container.getElementsByClassName(
+      "rm-title-display"
+    )[0] as HTMLHeadingElement) ||
+    (container.getElementsByClassName(
+      "rm-zoom-item-content"
+    )[0] as HTMLSpanElement);
+  return Array.from(heading.childNodes).find(
+    (n) => n.nodeName === "#text" || n.nodeName === "SPAN"
+  );
+};
+
+export default getPageTitleByHtmlElement;

package/src/dom/getPageTitleValueByHtmlElement.ts

@@ -0,0 +1,8 @@
+import elToTitle from "./elToTitle";
+import getPageTitleByHtmlElement from "./getPageTitleByHtmlElement";
+
+const getPageTitleValueByHtmlElement = (e: Element): string => {
+  return elToTitle(getPageTitleByHtmlElement(e));
+};
+
+export default getPageTitleValueByHtmlElement;

package/src/dom/getReferenceBlockUid.ts

@@ -0,0 +1,22 @@
+import getBlockUidsReferencingBlock from "../queries/getBlockUidsReferencingBlock";
+import getDomRefs from "./getDomRefs";
+import getUids from "./getUids";
+
+const getReferenceBlockUid = (
+  e: HTMLElement,
+  className: "rm-block-ref" | "rm-alias--block"
+): string => {
+  const parent = e.closest(".roam-block") as HTMLDivElement;
+  if (!parent) {
+    return "";
+  }
+  const { blockUid } = getUids(parent);
+  const childRefs = getBlockUidsReferencingBlock(blockUid);
+  const refs = childRefs.length ? childRefs : getDomRefs(blockUid);
+  const index = Array.from(parent.getElementsByClassName(className)).findIndex(
+    (el) => el === e || el.contains(e)
+  );
+  return refs[index];
+};
+
+export default getReferenceBlockUid;

package/src/dom/getRoamUrl.ts

@@ -0,0 +1,6 @@
+const getRoamUrl = (blockUid?: string): string =>
+  `${window.location.href.replace(/\/page\/.*$/, "")}${
+    blockUid ? `/page/${blockUid}` : ""
+  }`;
+
+export default getRoamUrl;

package/src/dom/getRoamUrlByPage.ts

@@ -0,0 +1,9 @@
+import getPageUidByPageTitle from "../queries/getPageUidByPageTitle";
+import getRoamUrl from "./getRoamUrl";
+
+const getRoamUrlByPage = (page: string): string => {
+  const uid = getPageUidByPageTitle(page);
+  return uid && getRoamUrl(uid);
+};
+
+export default getRoamUrlByPage;

package/src/dom/getUids.ts

@@ -0,0 +1,9 @@
+import getUidsFromId from "./getUidsFromId";
+
+const getUids = (
+  block?: HTMLDivElement | HTMLTextAreaElement | null
+): ReturnType<typeof getUidsFromId> => {
+  return block ? getUidsFromId(block.id) : { blockUid: "", windowId: "" };
+};
+
+export default getUids;

package/src/dom/getUidsFromButton.ts

@@ -0,0 +1,9 @@
+import getUids from "./getUids";
+
+const getUidsFromButton = (
+  button: HTMLButtonElement
+): ReturnType<typeof getUids> => {
+  return getUids(button.closest<HTMLDivElement>(".roam-block"));
+};
+
+export default getUidsFromButton;

package/src/dom/getUidsFromId.ts

@@ -0,0 +1,13 @@
+const getUidsFromId = (id?: string): { blockUid: string; windowId: string } => {
+  if (!id) return { blockUid: "", windowId: "" };
+  const blockUid = id.substring(id.length - 9, id.length);
+  const restOfHTMLId = id.substring(0, id.length - 10);
+  const windowId =
+    restOfHTMLId.match(/^block-input-([a-zA-Z0-9_-]+)$/)?.[1] || "";
+  return {
+    blockUid,
+    windowId,
+  };
+};
+
+export default getUidsFromId;

package/{dom/index.d.ts → src/dom/index.ts}

@@ -1,30 +1,30 @@
-export * from "./constants";
-export { default as addBlockCommand } from "./addBlockCommand";
-export { default as addOldRoamJSDependency } from "./addOldRoamJSDependency";
-export { default as addRoamJSDependency } from "./addRoamJSDependency";
-export { default as addScriptAsDependency } from "./addScriptAsDependency";
-export { default as addStyle } from "./addStyle";
-export { default as createBlockObserver } from "./createBlockObserver";
-export { default as createButtonObserver } from "./createButtonObserver";
-export { default as createHTMLObserver } from "./createHTMLObserver";
-export { default as createHashtagObserver } from "./createHashtagObserver";
-export { default as createIconButton } from "./createIconButton";
-export { default as createObserver } from "./createObserver";
-export { default as createOverlayObserver } from "./createOverlayObserver";
-export { default as createPageObserver } from "./createPageObserver";
-export { default as createPageTitleObserver } from "./createPageTitleObserver";
-export { default as genericError } from "./genericError";
-export { default as getActiveUids } from "./getActiveUids";
-export { default as getBlockUidFromTarget } from "./getBlockUidFromTarget";
-export { default as getCurrentPageUid } from "./getCurrentPageUid";
-export { default as getDropUidOffset } from "./getDropUidOffset";
-export { default as getPageTitleByHtmlElement } from "./getPageTitleByHtmlElement";
-export { default as getPageTitleValueByHtmlElement } from "./getPageTitleValueByHtmlElement";
-export { default as getReferenceBlockUid } from "./getReferenceBlockUid";
-export { default as getRoamUrl } from "./getRoamUrl";
-export { default as getRoamUrlByPage } from "./getRoamUrlByPage";
-export { default as getUids } from "./getUids";
-export { default as getUidsFromButton } from "./getUidsFromButton";
-export { default as getUidsFromId } from "./getUidsFromId";
-export { default as parseRoamBlocksToHtml } from "./parseRoamBlocksToHtml";
-export { default as resolveRefs } from "./resolveRefs";
+export * from "./constants";
+export { default as addBlockCommand } from "./addBlockCommand";
+export { default as addOldRoamJSDependency } from "./addOldRoamJSDependency";
+export { default as addRoamJSDependency } from "./addRoamJSDependency";
+export { default as addScriptAsDependency } from "./addScriptAsDependency";
+export { default as addStyle } from "./addStyle";
+export { default as createBlockObserver } from "./createBlockObserver";
+export { default as createButtonObserver } from "./createButtonObserver";
+export { default as createHTMLObserver } from "./createHTMLObserver";
+export { default as createHashtagObserver } from "./createHashtagObserver";
+export { default as createIconButton } from "./createIconButton";
+export { default as createObserver } from "./createObserver";
+export { default as createOverlayObserver } from "./createOverlayObserver";
+export { default as createPageObserver } from "./createPageObserver";
+export { default as createPageTitleObserver } from "./createPageTitleObserver";
+export { default as genericError } from "./genericError";
+export { default as getActiveUids } from "./getActiveUids";
+export { default as getBlockUidFromTarget } from "./getBlockUidFromTarget";
+export { default as getCurrentPageUid } from "./getCurrentPageUid";
+export { default as getDropUidOffset } from "./getDropUidOffset";
+export { default as getPageTitleByHtmlElement } from "./getPageTitleByHtmlElement";
+export { default as getPageTitleValueByHtmlElement } from "./getPageTitleValueByHtmlElement";
+export { default as getReferenceBlockUid } from "./getReferenceBlockUid";
+export { default as getRoamUrl } from "./getRoamUrl";
+export { default as getRoamUrlByPage } from "./getRoamUrlByPage";
+export { default as getUids } from "./getUids";
+export { default as getUidsFromButton } from "./getUidsFromButton";
+export { default as getUidsFromId } from "./getUidsFromId";
+export { default as parseRoamBlocksToHtml } from "./parseRoamBlocksToHtml";
+export { default as resolveRefs } from "./resolveRefs";

package/src/dom/parseRoamBlocksToHtml.ts

@@ -0,0 +1,118 @@
+import { getParseInline, RoamContext } from "../marked";
+import type { TreeNode, ViewType } from "../types";
+
+const VIEW_CONTAINER = {
+  bullet: "ul",
+  document: "div",
+  numbered: "ol",
+};
+const HEADINGS = ["p", "h1", "h2", "h3"];
+
+export const syncParseRoamBlocksToHtml = ({
+  content,
+  viewType,
+  level,
+  context,
+  parseInline,
+}: {
+  level: number;
+  context: Required<RoamContext>;
+  content: TreeNode[];
+  viewType: ViewType;
+  parseInline: Awaited<ReturnType<typeof getParseInline>>;
+}): string => {
+  if (content.length === 0) {
+    return "";
+  }
+  const items = content.map((t) => {
+    let skipChildren = false;
+    const componentsWithChildren = (s: string, ac?: string): string | false => {
+      const parent = context.components(s, ac);
+      if (parent) {
+        return parent;
+      } else if (/table/i.test(s)) {
+        skipChildren = true;
+        const flatten = (n: TreeNode): TreeNode[][] =>
+          n.children.length
+            ? n.children
+                .map((c) => flatten(c))
+                .flatMap((c) => c.map((cc) => [n, ...cc]))
+            : [[n]];
+        const rows = flatten(t).map((row) =>
+          row.slice(1).map(
+            (td) =>
+              `<td>${parseInline(td.text, {
+                ...context,
+                components: componentsWithChildren,
+              })}</td`
+          )
+        );
+        const columns = Math.max(...rows.map((row) => row.length), 0);
+        const fill = Array<string>(columns).fill("<td></td>");
+        const normalizedRows = rows.map((row) =>
+          [...row, ...fill.slice(0, columns - row.length)].join("")
+        );
+        return `<table class="roam-table"><tbody>${normalizedRows
+          .map((row) => `<tr>${row}</tr>`)
+          .join("")}</tbody></table>`;
+      } else if (/roam\/render/i.test(s)) {
+        skipChildren = true;
+        const acCode = ac || "";
+        return `<div class="roam-render">${acCode}</div>`;
+      }
+      return false;
+    };
+    const classlist =
+      t.textAlign === "left"
+        ? ["text-align-left"]
+        : t.textAlign === "center"
+        ? ["text-align-center"]
+        : t.textAlign === "right"
+        ? ["text-align-right"]
+        : [];
+    const textToParse = t.text.replace(/#\.([^\s]*)/g, (_, className) => {
+      classlist.push(className);
+      return "";
+    });
+    const inlineMarked = parseInline(textToParse, {
+      ...context,
+      components: componentsWithChildren,
+    });
+    const innerHtml = `<${HEADINGS[t.heading]}>${inlineMarked}</${
+      HEADINGS[t.heading]
+    }>\n${
+      skipChildren
+        ? ""
+        : syncParseRoamBlocksToHtml({
+            content: t.children,
+            viewType: t.viewType,
+            level: level + 1,
+            context,
+            parseInline,
+          })
+    }`;
+    if (level > 0 && viewType === "document") {
+      classlist.push("document-bullet");
+    }
+    const attrs = `id="${t.uid}"${
+      classlist.length ? ` class="${classlist.join(" ")}"` : ""
+    }`;
+    const blockHtml =
+      level === 0 && viewType === "document"
+        ? `<div ${attrs}>${innerHtml}</div>`
+        : `<li ${attrs}>${innerHtml}</li>`;
+    return blockHtml;
+  });
+  const containerTag =
+    level > 0 && viewType === "document" ? "ul" : VIEW_CONTAINER[viewType];
+  return `<${containerTag}>${items.join("\n")}</${containerTag}>`;
+};
+
+const parseRoamBlocksToHtml = (
+  args: Omit<Parameters<typeof syncParseRoamBlocksToHtml>[0], "parseInline">
+) =>
+  getParseInline().then((parseInline) =>
+    syncParseRoamBlocksToHtml({ ...args, parseInline })
+  );
+
+export default parseRoamBlocksToHtml;

package/src/dom/resolveRefs.ts

@@ -0,0 +1,31 @@
+import getPageUidByPageTitle from "../queries/getPageUidByPageTitle";
+import getTextByBlockUid from "../queries/getTextByBlockUid";
+import { BLOCK_REF_REGEX } from "./constants";
+import getRoamUrl from "./getRoamUrl";
+
+const aliasTagRegex = new RegExp(
+  `\\[[^\\]]*\\]\\((\\[\\[([^\\]]*)\\]\\])\\)`,
+  "g"
+);
+
+const aliasRefRegex = new RegExp(
+  `\\[[^\\]]*\\]\\((${BLOCK_REF_REGEX.source})\\)`,
+  "g"
+);
+
+const resolveRefs = (text: string): string => {
+  return text
+    .replace(aliasTagRegex, (alias, del, pageName) => {
+      const blockUid = getPageUidByPageTitle(pageName);
+      return alias.replace(del, `${getRoamUrl(blockUid)}`);
+    })
+    .replace(aliasRefRegex, (alias, del, blockUid) => {
+      return alias.replace(del, `${getRoamUrl(blockUid)}`);
+    })
+    .replace(new RegExp(BLOCK_REF_REGEX, "g"), (_, blockUid) => {
+      const reference = getTextByBlockUid(blockUid);
+      return reference || blockUid;
+    });
+};
+
+export default resolveRefs;

package/{events/index.d.ts → src/events/index.ts}

@@ -1 +1 @@
-export { default as watchOnce } from "./watchOnce";
+export { default as watchOnce } from "./watchOnce";

package/src/events/watchOnce.ts

@@ -0,0 +1,17 @@
+import type { AddPullWatch, PullBlock } from "../types/native";
+
+const watchOnce = (
+  pullPattern: string,
+  entityId: string,
+  callback: (before: PullBlock | null, after: PullBlock | null) => boolean
+): void => {
+  const watcher: Parameters<AddPullWatch>[2] = (before, after) => {
+    if (callback(before, after)) {
+      window.roamAlphaAPI.data.removePullWatch(pullPattern, entityId, watcher);
+    }
+    return true;
+  };
+  window.roamAlphaAPI.data.addPullWatch(pullPattern, entityId, watcher);
+};
+
+export default watchOnce;

package/{hooks/index.d.ts → src/hooks/index.ts}

@@ -1,2 +1,2 @@
-export { default as useArrowKeyDown } from "./useArrowKeyDown";
-export { default as useSubTree } from "./useSubTree";
+export { default as useArrowKeyDown } from "./useArrowKeyDown";
+export { default as useSubTree } from "./useSubTree";

package/src/hooks/useArrowKeyDown.ts

@@ -0,0 +1,72 @@
+import React, { useCallback, useState } from "react";
+
+const isElInView = (el: HTMLElement, ul: HTMLElement) => {
+  const containerTop = ul.scrollTop;
+  const containerBottom = containerTop + ul.offsetHeight;
+
+  const elemTop = el.offsetTop;
+  const elemBottom = elemTop + el.offsetHeight;
+
+  return elemBottom <= containerBottom && elemTop >= containerTop;
+};
+
+const useArrowKeyDown = <T>({
+  results,
+  onEnter,
+  menuRef,
+}: {
+  results: T[];
+  onEnter: (i: T) => void;
+  menuRef: React.RefObject<HTMLUListElement>;
+}): {
+  activeIndex: number;
+  onKeyDown: (
+    e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => void;
+} => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const onKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      if (results.length > 0) {
+        if (e.key === "ArrowDown") {
+          const newIndex = (activeIndex + 1) % results.length;
+          setActiveIndex(newIndex);
+          const ul = menuRef.current;
+          if (ul) {
+            const el = ul.children[newIndex] as HTMLElement;
+            if (el && !isElInView(el, ul)) {
+              el.scrollIntoView(false);
+            }
+          }
+          e.preventDefault();
+          e.stopPropagation();
+        } else if (e.key === "ArrowUp") {
+          const newIndex = (activeIndex + results.length - 1) % results.length;
+          setActiveIndex(newIndex);
+          const ul = menuRef.current;
+          if (ul) {
+            const el = ul.children[newIndex] as HTMLElement;
+            if (el && !isElInView(el, ul)) {
+              el.scrollIntoView(true);
+            }
+          }
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      }
+      if (e.key === "Enter") {
+        onEnter(results[activeIndex]);
+        setActiveIndex(0);
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    },
+    [activeIndex, setActiveIndex, results, onEnter]
+  );
+  return {
+    activeIndex,
+    onKeyDown,
+  };
+};
+
+export default useArrowKeyDown;

package/src/hooks/useSubTree.ts

@@ -0,0 +1,16 @@
+import { useMemo } from "react";
+import getSubTree from "../util/getSubTree";
+
+const useSubTree = (
+  props: Parameters<typeof getSubTree>[0]
+): ReturnType<typeof getSubTree> =>
+  useMemo(
+    () => getSubTree(props),
+    [
+      ...Object.entries(props)
+        .filter(([key]) => key === "tree" || key === "parentUid")
+        .map(([, v]) => v),
+    ]
+  );
+
+export default useSubTree;