roamjs-components 0.85.1 → 0.86.0-alpha.2

package/src/date/parseNlpDate.ts

@@ -0,0 +1,255 @@
+import addWeeks from "date-fns/addWeeks";
+import addDays from "date-fns/addDays";
+import dateFnsStartOfWeek from "date-fns/startOfWeek";
+import startOfMonth from "date-fns/startOfMonth";
+import startOfYear from "date-fns/startOfYear";
+import dateFnsEndOfWeek from "date-fns/endOfWeek";
+import endOfMonth from "date-fns/endOfMonth";
+import endOfYear from "date-fns/endOfYear";
+import { Chrono, Parser } from "chrono-node";
+import { ParsingComponents } from "chrono-node/dist/results";
+import getCurrentUserUid from "../queries/getCurrentUserUid";
+
+const startOfWeek = (date: Date) => {
+  const weekStartsOn = window.roamAlphaAPI.pull("[:user/settings]", [
+    ":user/uid",
+    getCurrentUserUid(),
+  ])?.[":user/settings"]?.[":first-day-of-week"];
+  return dateFnsStartOfWeek(date, weekStartsOn ? { weekStartsOn } : undefined);
+};
+
+const endOfWeek = (date: Date) => {
+  const weekStartsOn = window.roamAlphaAPI.pull("[:user/settings]", [
+    ":user/uid",
+    getCurrentUserUid(),
+  ])?.[":user/settings"]?.[":first-day-of-week"];
+  return dateFnsEndOfWeek(date, weekStartsOn ? { weekStartsOn } : undefined);
+};
+
+const ORDINAL_WORD_DICTIONARY: { [word: string]: number } = {
+  first: 1,
+  second: 2,
+  third: 3,
+  fourth: 4,
+  fifth: 5,
+  sixth: 6,
+  seventh: 7,
+  eighth: 8,
+  ninth: 9,
+  tenth: 10,
+  eleventh: 11,
+  twelfth: 12,
+  thirteenth: 13,
+  fourteenth: 14,
+  fifteenth: 15,
+  sixteenth: 16,
+  seventeenth: 17,
+  eighteenth: 18,
+  nineteenth: 19,
+  twentieth: 20,
+  "twenty first": 21,
+  "twenty-first": 21,
+  "twenty second": 22,
+  "twenty-second": 22,
+  "twenty third": 23,
+  "twenty-third": 23,
+  "twenty fourth": 24,
+  "twenty-fourth": 24,
+  "twenty fifth": 25,
+  "twenty-fifth": 25,
+  "twenty sixth": 26,
+  "twenty-sixth": 26,
+  "twenty seventh": 27,
+  "twenty-seventh": 27,
+  "twenty eighth": 28,
+  "twenty-eighth": 28,
+  "twenty ninth": 29,
+  "twenty-ninth": 29,
+  thirtieth: 30,
+  "thirty first": 31,
+  "thirty-first": 31,
+};
+
+const ORDINAL_REGEX = new RegExp(
+  `\\b(?:${Object.keys(ORDINAL_WORD_DICTIONARY)
+    .sort((a, b) => b.length - a.length)
+    .join("|")}|(?:[1-9])?[0-9](?:st|nd|rd|th)?)\\b`,
+  "i"
+);
+
+const customDateNlp = new Chrono();
+const DAYS_OFFSET = {
+  sunday: 0,
+  sun: 0,
+  monday: 1,
+  mon: 1,
+  tuesday: 2,
+  tues: 2,
+  tue: 2,
+  wednesday: 3,
+  wed: 3,
+  thursday: 4,
+  thurs: 4,
+  thur: 4,
+  thu: 4,
+  friday: 5,
+  fri: 5,
+  saturday: 6,
+  sat: 6,
+};
+const UPCOMING_PATTERN = new RegExp(
+  "(\\W|^)" +
+    "(?:(?:\\,|\\(|\\（)\\s*)?" +
+    "(?:on\\s*?)?" +
+    "upcoming\\s*" +
+    "(" +
+    Object.keys(DAYS_OFFSET).join("|") +
+    ")" +
+    "(?=\\W|$)",
+  "i"
+);
+// https://github.com/wanasit/chrono/blob/d8da3c840c50c959a62a0840c9a627f39bc765df/src/parsers/en/ENWeekdayParser.js
+customDateNlp.parsers.unshift({
+  pattern: () => UPCOMING_PATTERN,
+  extract: (context, match) => {
+    const index = (match.index || 0) + match[1].length;
+    const text = match[0].substr(
+      match[1].length,
+      match[0].length - match[1].length
+    );
+    const result = context.createParsingResult(index, text);
+
+    const dayOfWeek = match[2].toLowerCase();
+    const offset = DAYS_OFFSET[dayOfWeek as keyof typeof DAYS_OFFSET];
+    if (offset === undefined) {
+      return null;
+    }
+
+    const startMoment = context.refDate;
+    const refOffset = startMoment.getDay();
+    result.start.assign("weekday", offset);
+    if (offset <= refOffset) {
+      startMoment.setDate(offset + 7 + startMoment.getDate() - refOffset);
+      result.start.assign("day", startMoment.getDate());
+      result.start.assign("month", startMoment.getMonth() + 1);
+      result.start.assign("year", startMoment.getFullYear());
+    } else {
+      startMoment.setDate(offset + startMoment.getDate() - refOffset);
+      result.start.imply("day", startMoment.getDate());
+      result.start.imply("month", startMoment.getMonth() + 1);
+      result.start.imply("year", startMoment.getFullYear());
+    }
+
+    return result;
+  },
+});
+customDateNlp.parsers.push(
+  {
+    pattern: () => /\b((start|end) )?of\b/i,
+    extract: () => ({}),
+  },
+  {
+    pattern: () => ORDINAL_REGEX,
+    extract: () => ({}),
+  }
+);
+
+export const addNlpDateParser = (p: Parser) => customDateNlp.parsers.push(p);
+
+const assignDay = (p: ParsingComponents, d: Date) => {
+  p.assign("year", d.getFullYear());
+  p.assign("month", d.getMonth() + 1);
+  p.assign("day", d.getDate());
+};
+customDateNlp.refiners.unshift({
+  refine: (_, results) => {
+    if (results.length >= 2) {
+      const [modifier, date, ...rest] = results;
+      if (/start of/i.test(modifier.text)) {
+        const dateObj = date.date();
+        if (/week/i.test(date.text)) {
+          const newDateObj = startOfWeek(dateObj);
+          assignDay(date.start, newDateObj);
+        }
+        if (/month/i.test(date.text)) {
+          const newDateObj = startOfMonth(dateObj);
+          assignDay(date.start, newDateObj);
+        }
+        if (/year/i.test(date.text)) {
+          const newDateObj = startOfYear(dateObj);
+          assignDay(date.start, newDateObj);
+        }
+      } else if (/end of/i.test(modifier.text)) {
+        const dateObj = date.date();
+        if (/week/i.test(date.text)) {
+          const newDateObj = endOfWeek(dateObj);
+          assignDay(date.start, newDateObj);
+        }
+        if (/month/i.test(date.text)) {
+          const newDateObj = endOfMonth(dateObj);
+          assignDay(date.start, newDateObj);
+        }
+        if (/year/i.test(date.text)) {
+          const newDateObj = endOfYear(dateObj);
+          assignDay(date.start, newDateObj);
+        }
+      } else if (rest.length >= 2) {
+        const [of, d, ...moreRest] = rest;
+        if (
+          ORDINAL_REGEX.test(modifier.text) &&
+          date.start.isOnlyWeekdayComponent() &&
+          /of/i.test(of.text)
+        ) {
+          const match = (
+            ORDINAL_REGEX.exec(modifier.text)?.[0] || ""
+          ).toLowerCase();
+          const num =
+            ORDINAL_WORD_DICTIONARY[match] ||
+            Number(match.replace(/(?:st|nd|rd|th)$/i, ""));
+          const dateObj = d.date();
+          if (/month/i.test(d.text)) {
+            const startOfMonthDate = startOfMonth(dateObj);
+            const originalMonth = startOfMonthDate.getMonth();
+            const startOfWeekDate = startOfWeek(startOfMonthDate);
+            const dayOfWeekDate = addDays(
+              startOfWeekDate,
+              date.start.get("weekday") || 0
+            );
+            const newDateObj = addWeeks(
+              dayOfWeekDate,
+              num - (originalMonth === dayOfWeekDate.getMonth() ? 1 : 0)
+            );
+            assignDay(d.start, newDateObj);
+          } else if (/year/i.test(d.text)) {
+            const startOfYearDate = startOfYear(dateObj);
+            const originalYear = startOfYearDate.getFullYear();
+            const startOfWeekDate = startOfWeek(startOfYearDate);
+            const dayOfWeekDate = addDays(
+              startOfWeekDate,
+              date.start.get("weekday") || 0
+            );
+            const newDateObj = addWeeks(
+              dayOfWeekDate,
+              num - (originalYear === dayOfWeekDate.getFullYear() ? 1 : 0)
+            );
+            assignDay(d.start, newDateObj);
+          } else {
+            return results;
+          }
+          return [d, ...moreRest];
+        }
+      } else {
+        return results;
+      }
+      return [date, ...rest];
+    }
+    return results;
+  },
+});
+
+const parseNlpDate = (s: string, ref?: Date): Date =>
+  customDateNlp.parseDate(s, ref) || new Date();
+
+export const parse = (t: string, ref?: Date) => customDateNlp.parse(t, ref);
+
+export default parseNlpDate;

package/src/date/parseRoamDateUid.ts

@@ -0,0 +1,6 @@
+const parseRoamDateUid = (s: string): Date => {
+  const [month, date, year] = s.split("-").map((s) => Number(s));
+  return new Date(year, month - 1, date);
+};
+
+export default parseRoamDateUid;

package/src/dom/addBlockCommand.ts

@@ -0,0 +1,59 @@
+import getChildrenLengthByPageUid from "../queries/getChildrenLengthByPageUid";
+import getOrderByBlockUid from "../queries/getOrderByBlockUid";
+import getParentUidByBlockUid from "../queries/getParentUidByBlockUid";
+import getTextByBlockUid from "../queries/getTextByBlockUid";
+import createBlock from "../writes/createBlock";
+import updateBlock from "../writes/updateBlock";
+import createHTMLObserver from "./createHTMLObserver";
+import getCurrentPageUid from "./getCurrentPageUid";
+import getUids from "./getUids";
+
+const addBlockCommand = ({
+  label,
+  callback,
+}: {
+  label: string;
+  callback: (uid: string) => void;
+}): void => {
+  const textareaRef: { current: HTMLTextAreaElement | null } = {
+    current: null,
+  };
+  const loadBlockUid = (pageUid: string) => {
+    if (textareaRef.current) {
+      const uid = getUids(textareaRef.current).blockUid;
+      const parentUid = getParentUidByBlockUid(uid);
+      const text = getTextByBlockUid(uid);
+      if (text.length) {
+        return createBlock({
+          node: { text: "Loading..." },
+          parentUid,
+          order: getOrderByBlockUid(uid) + 1,
+        });
+      }
+      return updateBlock({
+        uid,
+        text: "Loading...",
+      });
+    }
+    return createBlock({
+      node: { text: "Loading..." },
+      parentUid: pageUid,
+      order: getChildrenLengthByPageUid(pageUid),
+    });
+  };
+  createHTMLObserver({
+    tag: "TEXTAREA",
+    className: "rm-block-input",
+    callback: (t: HTMLElement) =>
+      (textareaRef.current = t as HTMLTextAreaElement),
+  });
+  window.roamAlphaAPI.ui.commandPalette.addCommand({
+    label,
+    callback: () => {
+      const parentUid = getCurrentPageUid();
+      loadBlockUid(parentUid).then(callback);
+    },
+  });
+};
+
+export default addBlockCommand;

package/src/dom/addKeyboardTriggers.ts

@@ -0,0 +1,52 @@
+import type { RoamBasicNode } from "../types/native";
+import getSettingValueFromTree from "../util/getSettingValueFromTree";
+
+const addKeybordTriggers = ({
+  triggers: inputTriggers,
+}: {
+  triggers: {
+    trigger:
+      | RegExp
+      | (() => RegExp)
+      | { tree: RoamBasicNode[]; defaultValue?: string };
+    callback: () => void;
+  }[];
+}) => {
+  const triggers = inputTriggers.map(({ trigger, callback }) => {
+    if (trigger instanceof RegExp) {
+      return { trigger, callback };
+    } else if (typeof trigger === "function") {
+      return { callback, trigger: trigger() };
+    } else {
+      const triggerValue = getSettingValueFromTree({
+        tree: trigger.tree,
+        key: "trigger",
+        defaultValue: trigger.defaultValue || "\\\\",
+      })
+        .replace(/"/g, "")
+        .replace(/\\/g, "\\\\")
+        .replace(/\+/g, "\\+")
+        .trim();
+
+      const triggerRegex = new RegExp(`${triggerValue}$`);
+      return { callback, trigger: triggerRegex };
+    }
+  });
+
+  document.addEventListener("input", (e) => {
+    const target = e.target as HTMLElement;
+    if (
+      target.tagName === "TEXTAREA" &&
+      target.classList.contains("rm-block-input")
+    ) {
+      const textarea = target as HTMLTextAreaElement;
+      const valueToCursor = textarea.value.substring(
+        0,
+        textarea.selectionStart
+      );
+      triggers.find((args) => args.trigger.test(valueToCursor))?.callback?.();
+    }
+  });
+};
+
+export default addKeybordTriggers;

package/src/dom/addOldRoamJSDependency.ts

@@ -0,0 +1,10 @@
+import addScriptAsDependency from "./addScriptAsDependency";
+
+const addOldRoamJSDependency = (extension: string, source?: string): void =>
+  addScriptAsDependency({
+    id: `roamjs-${extension.replace(/\/main$/, "")}`,
+    src: `https://roamjs.com/${extension}.js`,
+    dataAttributes: source ? { source } : {},
+  });
+
+export default addOldRoamJSDependency;

package/src/dom/addRoamJSDependency.ts

@@ -0,0 +1,7 @@
+import addOldRoamJSDependency from "./addOldRoamJSDependency";
+
+const addRoamJSDependency = (extension: string, source?: string): void => {
+  addOldRoamJSDependency(`${extension}/main`, source);
+};
+
+export default addRoamJSDependency;

package/src/dom/addScriptAsDependency.ts

@@ -0,0 +1,24 @@
+const addScriptAsDependency = ({
+  id,
+  src,
+  dataAttributes,
+}: {
+  id: string;
+  src: string;
+  dataAttributes: Record<string, string>;
+}): void => {
+  const existing = document.getElementById(id);
+  if (!existing) {
+    const script = document.createElement("script");
+    script.src = src;
+    script.async = true;
+    script.type = "text/javascript";
+    script.id = id;
+    Object.entries(dataAttributes).forEach(([k, v]) =>
+      script.setAttribute(`data-${k}`, v)
+    );
+    document.querySelector("head")?.appendChild(script);
+  }
+};
+
+export default addScriptAsDependency;

package/src/dom/addStyle.ts

@@ -0,0 +1,11 @@
+const addStyle = (content: string, id?: string): HTMLStyleElement => {
+  const existing = document.getElementById(id || "") as HTMLStyleElement;
+  if (existing) return existing;
+  const css = document.createElement("style");
+  css.textContent = content;
+  if (id) css.id = id;
+  document.getElementsByTagName("head")[0].appendChild(css);
+  return css;
+};
+
+export default addStyle;

package/src/dom/constants.ts

@@ -0,0 +1 @@
+export const BLOCK_REF_REGEX = /\(\(([\w\d-]{9,10})\)\)/;

package/src/dom/createBlockObserver.ts

@@ -0,0 +1,44 @@
+import createHTMLObserver from "./createHTMLObserver";
+
+const createBlockObserver = (
+  blockCallbackOrConfig:
+    | ((b: HTMLDivElement) => void)
+    | {
+        onBlockLoad?: (b: HTMLDivElement) => void;
+        onBlockUnload?: (b: HTMLDivElement) => void;
+        onBlockRefLoad?: (b: HTMLSpanElement) => void;
+        onBlockRefUnload?: (b: HTMLSpanElement) => void;
+      },
+  blockRefCallback?: (b: HTMLSpanElement) => void
+): MutationObserver[] => {
+  const blockObserver = createHTMLObserver({
+    callback: (e) =>
+      typeof blockCallbackOrConfig === "function"
+        ? blockCallbackOrConfig(e as HTMLDivElement)
+        : blockCallbackOrConfig.onBlockLoad?.(e as HTMLDivElement),
+    removeCallback: (e) =>
+      typeof blockCallbackOrConfig === "object" &&
+      blockCallbackOrConfig.onBlockUnload?.(e as HTMLDivElement),
+    tag: "DIV",
+    className: "roam-block",
+  });
+  if (blockRefCallback) {
+    return [
+      blockObserver,
+      createHTMLObserver({
+        callback: (e) =>
+          typeof blockCallbackOrConfig === "object"
+            ? blockCallbackOrConfig.onBlockRefLoad?.(e as HTMLSpanElement)
+            : blockRefCallback?.(e as HTMLSpanElement),
+        removeCallback: (e) =>
+          typeof blockCallbackOrConfig === "object" &&
+          blockCallbackOrConfig.onBlockRefUnload?.(e as HTMLSpanElement),
+        tag: "SPAN",
+        className: "rm-block-ref",
+      }),
+    ];
+  }
+  return [blockObserver];
+};
+
+export default createBlockObserver;

package/src/dom/createButtonObserver.ts

@@ -0,0 +1,31 @@
+import createHTMLObserver from "./createHTMLObserver";
+
+const createButtonObserver = ({
+  attribute,
+  render,
+  shortcut = attribute,
+}: {
+  shortcut?: string;
+  attribute: string;
+  render: (b: HTMLButtonElement) => void;
+}): MutationObserver =>
+  createHTMLObserver({
+    callback: (b) => {
+      if (
+        b.innerText.toUpperCase() ===
+          attribute.toUpperCase().replace(/-/g, " ") ||
+        b.innerText.toUpperCase() === shortcut.toUpperCase()
+      ) {
+        const dataAttribute = `data-roamjs-${attribute}`;
+        if (!b.getAttribute(dataAttribute)) {
+          b.setAttribute(dataAttribute, "true");
+          render(b as HTMLButtonElement);
+        }
+      }
+    },
+    tag: "BUTTON",
+    className: "bp3-button",
+    useBody: true,
+  });
+
+export default createButtonObserver;

package/src/dom/createDivObserver.ts

@@ -0,0 +1,15 @@
+import dispatchToRegistry from "../util/dispatchToRegistry";
+
+const createDivObserver = (
+  mutationCallback: MutationCallback,
+  mutationTarget: Element
+) => {
+  const observer = new MutationObserver(mutationCallback);
+  observer.observe(mutationTarget, { childList: true, subtree: true });
+  dispatchToRegistry({
+    observers: [observer],
+  });
+  return observer;
+};
+
+export default createDivObserver;

package/src/dom/createHTMLObserver.ts

@@ -0,0 +1,44 @@
+import createObserver from "./createObserver";
+import createOverlayObserver from "./createOverlayObserver";
+
+const createHTMLObserver = ({
+  callback,
+  tag,
+  className,
+  removeCallback,
+  useBody,
+}: {
+  callback: (b: HTMLElement) => void;
+  tag: string;
+  className: string;
+  removeCallback?: (b: HTMLElement) => void;
+  useBody?: boolean;
+}): MutationObserver => {
+  const getChildren = (d: Node) =>
+    Array.from((d as HTMLElement).getElementsByClassName(className)).filter(
+      (d) => d.nodeName === tag
+    ) as HTMLElement[];
+  getChildren(document).forEach(callback);
+
+  const isNode = (d: Node) =>
+    d.nodeName === tag &&
+    Array.from((d as HTMLElement).classList).includes(className);
+  const getNodes = (nodes: NodeList) =>
+    Array.from(nodes)
+      .filter((d: Node) => isNode(d) || d.hasChildNodes())
+      .flatMap((d) => (isNode(d) ? [d] : getChildren(d)));
+
+  return (useBody ? createOverlayObserver : createObserver)((ms) => {
+    const nodes = ms.flatMap((m) => [
+      ...getNodes(m.addedNodes).map((node) => ({ node, added: true })),
+      ...getNodes(m.removedNodes).map((node) => ({ node, added: false })),
+    ]);
+    nodes.forEach((b) =>
+      b.added
+        ? callback(b.node as HTMLElement)
+        : removeCallback?.(b.node as HTMLElement)
+    );
+  });
+};
+
+export default createHTMLObserver;

package/src/dom/createHashtagObserver.ts

@@ -0,0 +1,22 @@
+import createHTMLObserver from "./createHTMLObserver";
+
+const createHashtagObserver = ({
+  callback,
+  attribute,
+}: {
+  callback: (s: HTMLSpanElement) => void;
+  attribute: string;
+}): MutationObserver =>
+  createHTMLObserver({
+    useBody: true,
+    tag: "SPAN",
+    className: "rm-page-ref--tag",
+    callback: (s: HTMLSpanElement) => {
+      if (!s.getAttribute(attribute)) {
+        s.setAttribute(attribute, "true");
+        callback(s);
+      }
+    },
+  });
+
+export default createHashtagObserver;

package/src/dom/createIconButton.ts

@@ -0,0 +1,13 @@
+const createIconButton = (icon: string): HTMLSpanElement => {
+  const popoverButton = document.createElement("span");
+  popoverButton.className = "bp3-button bp3-minimal bp3-small";
+  popoverButton.tabIndex = 0;
+  
+  const popoverIcon = document.createElement("span");
+  popoverIcon.className = `bp3-icon bp3-icon-${icon}`;
+  popoverButton.appendChild(popoverIcon);
+  
+  return popoverButton;
+};
+
+export default createIconButton;

package/src/dom/createObserver.ts

@@ -0,0 +1,15 @@
+import createDivObserver from "./createDivObserver";
+
+const createObserver = (
+  mutationCallback: (
+    mutationList: MutationRecord[],
+    observer: MutationObserver
+  ) => void
+): MutationObserver => {
+  return createDivObserver(
+    mutationCallback,
+    document.getElementById("app") ?? document.body
+  );
+};
+
+export default createObserver;

package/src/dom/createOverlayObserver.ts

@@ -0,0 +1,7 @@
+import createDivObserver from "./createDivObserver";
+
+const createOverlayObserver = (
+  mutationCallback: (mutationList: MutationRecord[]) => void
+): MutationObserver => createDivObserver(mutationCallback, document.body);
+
+export default createOverlayObserver;

package/src/dom/createPageObserver.ts

@@ -0,0 +1,37 @@
+import getBlockUidsByPageTitle from "../queries/getBlockUidsByPageTitle";
+import createObserver from "./createObserver";
+import getMutatedNodes from "./getMutatedNodes";
+import getUids from "./getUids";
+
+const createPageObserver = (
+  name: string,
+  callback: (blockUid: string, added: boolean) => void
+): MutationObserver =>
+  createObserver((ms) => {
+    const addedNodes = getMutatedNodes({
+      ms,
+      nodeList: "addedNodes",
+      tag: "DIV",
+      className: "roam-block",
+    }).map((blockNode) => ({
+      blockUid: getUids(blockNode as HTMLDivElement).blockUid,
+      added: true,
+    }));
+    const removedNodes = getMutatedNodes({
+      ms,
+      nodeList: "removedNodes",
+      tag: "DIV",
+      className: "roam-block",
+    }).map((blockNode) => ({
+      blockUid: getUids(blockNode as HTMLDivElement).blockUid,
+      added: false,
+    }));
+    if (addedNodes.length || removedNodes.length) {
+      const blockUids = new Set(getBlockUidsByPageTitle(name));
+      [...removedNodes, ...addedNodes]
+        .filter(({ blockUid }) => blockUids.has(blockUid))
+        .forEach(({ blockUid, added }) => callback(blockUid, added));
+    }
+  })
+
+export default createPageObserver;