refactor: packages/

3 files changed, 649 insertions, 0 deletions

diff --git a/packages/excalidraw/components/hyperlink/Hyperlink.scss b/packages/excalidraw/components/hyperlink/Hyperlink.scss
new file mode 100644
index 0000000..6a5db32
--- /dev/null
+++ b/packages/excalidraw/components/hyperlink/Hyperlink.scss
@@ -0,0 +1,70 @@
+@import "../../css/variables.module.scss";
+
+.excalidraw-hyperlinkContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: absolute;
+  box-shadow: 0px 2px 4px 0 rgb(0 0 0 / 30%);
+  z-index: var(--zIndex-hyperlinkContainer);
+  background: var(--island-bg-color);
+  border-radius: var(--border-radius-md);
+  box-sizing: border-box;
+  // to account for LS due to rendering icons after new link created
+  min-height: 42px;
+
+  &-input,
+  button {
+    z-index: 100;
+  }
+
+  &-input,
+  &-link {
+    height: 24px;
+    padding: 0 8px;
+    line-height: 24px;
+    font-size: 0.9rem;
+    font-weight: 500;
+    font-family: var(--ui-font);
+  }
+
+  &-input {
+    width: 18rem;
+    border: none;
+    background-color: transparent;
+    color: var(--text-primary-color);
+
+    outline: none;
+    border: none;
+    box-shadow: none !important;
+  }
+
+  &-link {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 15rem;
+  }
+
+  button {
+    color: $oc-blue-6;
+    background-color: transparent !important;
+    font-weight: 500;
+    &.excalidraw-hyperlinkContainer--remove {
+      color: $oc-red-9;
+    }
+  }
+
+  &--remove .ToolIcon__icon svg {
+    color: $oc-red-6;
+  }
+
+  .ToolIcon__icon {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  &__buttons {
+    flex: 0 0 auto;
+  }
+}
diff --git a/packages/excalidraw/components/hyperlink/Hyperlink.tsx b/packages/excalidraw/components/hyperlink/Hyperlink.tsx
new file mode 100644
index 0000000..4d3dce6
--- /dev/null
+++ b/packages/excalidraw/components/hyperlink/Hyperlink.tsx
@@ -0,0 +1,480 @@
+import type { AppState, ExcalidrawProps, UIAppState } from "../../types";
+import {
+  sceneCoordsToViewportCoords,
+  viewportCoordsToSceneCoords,
+  wrapEvent,
+} from "../../utils";
+import { getEmbedLink, embeddableURLValidator } from "../../element/embeddable";
+import { mutateElement } from "../../element/mutateElement";
+import type {
+  ElementsMap,
+  ExcalidrawEmbeddableElement,
+  NonDeletedExcalidrawElement,
+} from "../../element/types";
+
+import { ToolButton } from "../ToolButton";
+import { FreedrawIcon, TrashIcon, elementLinkIcon } from "../icons";
+import { t } from "../../i18n";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import clsx from "clsx";
+import { KEYS } from "../../keys";
+import { EVENT, HYPERLINK_TOOLTIP_DELAY } from "../../constants";
+import { getElementAbsoluteCoords } from "../../element/bounds";
+import { getTooltipDiv, updateTooltipPosition } from "../../components/Tooltip";
+import { getSelectedElements } from "../../scene";
+import { hitElementBoundingBox } from "../../element/collision";
+import { isLocalLink, normalizeLink } from "../../data/url";
+import { trackEvent } from "../../analytics";
+import { useAppProps, useDevice, useExcalidrawAppState } from "../App";
+import { isEmbeddableElement } from "../../element/typeChecks";
+import { getLinkHandleFromCoords } from "./helpers";
+import { pointFrom, type GlobalPoint } from "@excalidraw/math";
+import { isElementLink } from "../../element/elementLink";
+
+import "./Hyperlink.scss";
+
+const POPUP_WIDTH = 380;
+const POPUP_HEIGHT = 42;
+const POPUP_PADDING = 5;
+const SPACE_BOTTOM = 85;
+const AUTO_HIDE_TIMEOUT = 500;
+
+let IS_HYPERLINK_TOOLTIP_VISIBLE = false;
+
+const embeddableLinkCache = new Map<
+  ExcalidrawEmbeddableElement["id"],
+  string
+>();
+
+export const Hyperlink = ({
+  element,
+  elementsMap,
+  setAppState,
+  onLinkOpen,
+  setToast,
+  updateEmbedValidationStatus,
+}: {
+  element: NonDeletedExcalidrawElement;
+  elementsMap: ElementsMap;
+  setAppState: React.Component<any, AppState>["setState"];
+  onLinkOpen: ExcalidrawProps["onLinkOpen"];
+  setToast: (
+    toast: { message: string; closable?: boolean; duration?: number } | null,
+  ) => void;
+  updateEmbedValidationStatus: (
+    element: ExcalidrawEmbeddableElement,
+    status: boolean,
+  ) => void;
+}) => {
+  const appState = useExcalidrawAppState();
+  const appProps = useAppProps();
+  const device = useDevice();
+
+  const linkVal = element.link || "";
+
+  const [inputVal, setInputVal] = useState(linkVal);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const isEditing = appState.showHyperlinkPopup === "editor";
+
+  const handleSubmit = useCallback(() => {
+    if (!inputRef.current) {
+      return;
+    }
+
+    const link = normalizeLink(inputRef.current.value) || null;
+
+    if (!element.link && link) {
+      trackEvent("hyperlink", "create");
+    }
+
+    if (isEmbeddableElement(element)) {
+      if (appState.activeEmbeddable?.element === element) {
+        setAppState({ activeEmbeddable: null });
+      }
+      if (!link) {
+        mutateElement(element, {
+          link: null,
+        });
+        updateEmbedValidationStatus(element, false);
+        return;
+      }
+
+      if (!embeddableURLValidator(link, appProps.validateEmbeddable)) {
+        if (link) {
+          setToast({ message: t("toast.unableToEmbed"), closable: true });
+        }
+        element.link && embeddableLinkCache.set(element.id, element.link);
+        mutateElement(element, {
+          link,
+        });
+        updateEmbedValidationStatus(element, false);
+      } else {
+        const { width, height } = element;
+        const embedLink = getEmbedLink(link);
+        if (embedLink?.error instanceof URIError) {
+          setToast({
+            message: t("toast.unrecognizedLinkFormat"),
+            closable: true,
+          });
+        }
+        const ar = embedLink
+          ? embedLink.intrinsicSize.w / embedLink.intrinsicSize.h
+          : 1;
+        const hasLinkChanged =
+          embeddableLinkCache.get(element.id) !== element.link;
+        mutateElement(element, {
+          ...(hasLinkChanged
+            ? {
+                width:
+                  embedLink?.type === "video"
+                    ? width > height
+                      ? width
+                      : height * ar
+                    : width,
+                height:
+                  embedLink?.type === "video"
+                    ? width > height
+                      ? width / ar
+                      : height
+                    : height,
+              }
+            : {}),
+          link,
+        });
+        updateEmbedValidationStatus(element, true);
+        if (embeddableLinkCache.has(element.id)) {
+          embeddableLinkCache.delete(element.id);
+        }
+      }
+    } else {
+      mutateElement(element, { link });
+    }
+  }, [
+    element,
+    setToast,
+    appProps.validateEmbeddable,
+    appState.activeEmbeddable,
+    setAppState,
+    updateEmbedValidationStatus,
+  ]);
+
+  useLayoutEffect(() => {
+    return () => {
+      handleSubmit();
+    };
+  }, [handleSubmit]);
+
+  useEffect(() => {
+    if (
+      isEditing &&
+      inputRef?.current &&
+      !(device.viewport.isMobile || device.isTouchScreen)
+    ) {
+      inputRef.current.select();
+    }
+  }, [isEditing, device.viewport.isMobile, device.isTouchScreen]);
+
+  useEffect(() => {
+    let timeoutId: number | null = null;
+
+    const handlePointerMove = (event: PointerEvent) => {
+      if (isEditing) {
+        return;
+      }
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+      const shouldHide = shouldHideLinkPopup(
+        element,
+        elementsMap,
+        appState,
+        pointFrom(event.clientX, event.clientY),
+      ) as boolean;
+      if (shouldHide) {
+        timeoutId = window.setTimeout(() => {
+          setAppState({ showHyperlinkPopup: false });
+        }, AUTO_HIDE_TIMEOUT);
+      }
+    };
+    window.addEventListener(EVENT.POINTER_MOVE, handlePointerMove, false);
+    return () => {
+      window.removeEventListener(EVENT.POINTER_MOVE, handlePointerMove, false);
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [appState, element, isEditing, setAppState, elementsMap]);
+
+  const handleRemove = useCallback(() => {
+    trackEvent("hyperlink", "delete");
+    mutateElement(element, { link: null });
+    setAppState({ showHyperlinkPopup: false });
+  }, [setAppState, element]);
+
+  const onEdit = () => {
+    trackEvent("hyperlink", "edit", "popup-ui");
+    setAppState({ showHyperlinkPopup: "editor" });
+  };
+  const { x, y } = getCoordsForPopover(element, appState, elementsMap);
+  if (
+    appState.contextMenu ||
+    appState.selectedElementsAreBeingDragged ||
+    appState.resizingElement ||
+    appState.isRotating ||
+    appState.openMenu ||
+    appState.viewModeEnabled
+  ) {
+    return null;
+  }
+
+  return (
+    <div
+      className="excalidraw-hyperlinkContainer"
+      style={{
+        top: `${y}px`,
+        left: `${x}px`,
+        width: POPUP_WIDTH,
+        padding: POPUP_PADDING,
+      }}
+    >
+      {isEditing ? (
+        <input
+          className={clsx("excalidraw-hyperlinkContainer-input")}
+          placeholder={t("labels.link.hint")}
+          ref={inputRef}
+          value={inputVal}
+          onChange={(event) => setInputVal(event.target.value)}
+          autoFocus
+          onKeyDown={(event) => {
+            event.stopPropagation();
+            // prevent cmd/ctrl+k shortcut when editing link
+            if (event[KEYS.CTRL_OR_CMD] && event.key === KEYS.K) {
+              event.preventDefault();
+            }
+            if (event.key === KEYS.ENTER || event.key === KEYS.ESCAPE) {
+              handleSubmit();
+              setAppState({ showHyperlinkPopup: "info" });
+            }
+          }}
+        />
+      ) : element.link ? (
+        <a
+          href={normalizeLink(element.link || "")}
+          className="excalidraw-hyperlinkContainer-link"
+          target={isLocalLink(element.link) ? "_self" : "_blank"}
+          onClick={(event) => {
+            if (element.link && onLinkOpen) {
+              const customEvent = wrapEvent(
+                EVENT.EXCALIDRAW_LINK,
+                event.nativeEvent,
+              );
+              onLinkOpen(
+                {
+                  ...element,
+                  link: normalizeLink(element.link),
+                },
+                customEvent,
+              );
+              if (customEvent.defaultPrevented) {
+                event.preventDefault();
+              }
+            }
+          }}
+          rel="noopener noreferrer"
+        >
+          {element.link}
+        </a>
+      ) : (
+        <div className="excalidraw-hyperlinkContainer-link">
+          {t("labels.link.empty")}
+        </div>
+      )}
+      <div className="excalidraw-hyperlinkContainer__buttons">
+        {!isEditing && (
+          <ToolButton
+            type="button"
+            title={t("buttons.edit")}
+            aria-label={t("buttons.edit")}
+            label={t("buttons.edit")}
+            onClick={onEdit}
+            className="excalidraw-hyperlinkContainer--edit"
+            icon={FreedrawIcon}
+          />
+        )}
+        <ToolButton
+          type="button"
+          title={t("labels.linkToElement")}
+          aria-label={t("labels.linkToElement")}
+          label={t("labels.linkToElement")}
+          onClick={() => {
+            setAppState({
+              openDialog: {
+                name: "elementLinkSelector",
+                sourceElementId: element.id,
+              },
+            });
+          }}
+          icon={elementLinkIcon}
+        />
+        {linkVal && !isEmbeddableElement(element) && (
+          <ToolButton
+            type="button"
+            title={t("buttons.remove")}
+            aria-label={t("buttons.remove")}
+            label={t("buttons.remove")}
+            onClick={handleRemove}
+            className="excalidraw-hyperlinkContainer--remove"
+            icon={TrashIcon}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+const getCoordsForPopover = (
+  element: NonDeletedExcalidrawElement,
+  appState: AppState,
+  elementsMap: ElementsMap,
+) => {
+  const [x1, y1] = getElementAbsoluteCoords(element, elementsMap);
+  const { x: viewportX, y: viewportY } = sceneCoordsToViewportCoords(
+    { sceneX: x1 + element.width / 2, sceneY: y1 },
+    appState,
+  );
+  const x = viewportX - appState.offsetLeft - POPUP_WIDTH / 2;
+  const y = viewportY - appState.offsetTop - SPACE_BOTTOM;
+  return { x, y };
+};
+
+export const getContextMenuLabel = (
+  elements: readonly NonDeletedExcalidrawElement[],
+  appState: UIAppState,
+) => {
+  const selectedElements = getSelectedElements(elements, appState);
+  const label = isEmbeddableElement(selectedElements[0])
+    ? "labels.link.editEmbed"
+    : selectedElements[0]?.link
+    ? "labels.link.edit"
+    : "labels.link.create";
+  return label;
+};
+
+let HYPERLINK_TOOLTIP_TIMEOUT_ID: number | null = null;
+export const showHyperlinkTooltip = (
+  element: NonDeletedExcalidrawElement,
+  appState: AppState,
+  elementsMap: ElementsMap,
+) => {
+  if (HYPERLINK_TOOLTIP_TIMEOUT_ID) {
+    clearTimeout(HYPERLINK_TOOLTIP_TIMEOUT_ID);
+  }
+  HYPERLINK_TOOLTIP_TIMEOUT_ID = window.setTimeout(
+    () => renderTooltip(element, appState, elementsMap),
+    HYPERLINK_TOOLTIP_DELAY,
+  );
+};
+
+const renderTooltip = (
+  element: NonDeletedExcalidrawElement,
+  appState: AppState,
+  elementsMap: ElementsMap,
+) => {
+  if (!element.link) {
+    return;
+  }
+
+  const tooltipDiv = getTooltipDiv();
+
+  tooltipDiv.classList.add("excalidraw-tooltip--visible");
+  tooltipDiv.style.maxWidth = "20rem";
+  tooltipDiv.textContent = isElementLink(element.link)
+    ? t("labels.link.goToElement")
+    : element.link;
+
+  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
+
+  const [linkX, linkY, linkWidth, linkHeight] = getLinkHandleFromCoords(
+    [x1, y1, x2, y2],
+    element.angle,
+    appState,
+  );
+
+  const linkViewportCoords = sceneCoordsToViewportCoords(
+    { sceneX: linkX, sceneY: linkY },
+    appState,
+  );
+
+  updateTooltipPosition(
+    tooltipDiv,
+    {
+      left: linkViewportCoords.x,
+      top: linkViewportCoords.y,
+      width: linkWidth,
+      height: linkHeight,
+    },
+    "top",
+  );
+  trackEvent("hyperlink", "tooltip", "link-icon");
+
+  IS_HYPERLINK_TOOLTIP_VISIBLE = true;
+};
+export const hideHyperlinkToolip = () => {
+  if (HYPERLINK_TOOLTIP_TIMEOUT_ID) {
+    clearTimeout(HYPERLINK_TOOLTIP_TIMEOUT_ID);
+  }
+  if (IS_HYPERLINK_TOOLTIP_VISIBLE) {
+    IS_HYPERLINK_TOOLTIP_VISIBLE = false;
+    getTooltipDiv().classList.remove("excalidraw-tooltip--visible");
+  }
+};
+
+const shouldHideLinkPopup = (
+  element: NonDeletedExcalidrawElement,
+  elementsMap: ElementsMap,
+  appState: AppState,
+  [clientX, clientY]: GlobalPoint,
+): Boolean => {
+  const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords(
+    { clientX, clientY },
+    appState,
+  );
+
+  const threshold = 15 / appState.zoom.value;
+  // hitbox to prevent hiding when hovered in element bounding box
+  if (hitElementBoundingBox(sceneX, sceneY, element, elementsMap)) {
+    return false;
+  }
+  const [x1, y1, x2] = getElementAbsoluteCoords(element, elementsMap);
+  // hit box to prevent hiding when hovered in the vertical area between element and popover
+  if (
+    sceneX >= x1 &&
+    sceneX <= x2 &&
+    sceneY >= y1 - SPACE_BOTTOM &&
+    sceneY <= y1
+  ) {
+    return false;
+  }
+  // hit box to prevent hiding when hovered around popover within threshold
+  const { x: popoverX, y: popoverY } = getCoordsForPopover(
+    element,
+    appState,
+    elementsMap,
+  );
+
+  if (
+    clientX >= popoverX - threshold &&
+    clientX <= popoverX + POPUP_WIDTH + POPUP_PADDING * 2 + threshold &&
+    clientY >= popoverY - threshold &&
+    clientY <= popoverY + threshold + POPUP_PADDING * 2 + POPUP_HEIGHT
+  ) {
+    return false;
+  }
+  return true;
+};
diff --git a/packages/excalidraw/components/hyperlink/helpers.ts b/packages/excalidraw/components/hyperlink/helpers.ts
new file mode 100644
index 0000000..75c5dad
--- /dev/null
+++ b/packages/excalidraw/components/hyperlink/helpers.ts
@@ -0,0 +1,99 @@
+import type { GlobalPoint, Radians } from "@excalidraw/math";
+import { pointFrom, pointRotateRads } from "@excalidraw/math";
+import { MIME_TYPES } from "../../constants";
+import type { Bounds } from "../../element/bounds";
+import { getElementAbsoluteCoords } from "../../element/bounds";
+import { hitElementBoundingBox } from "../../element/collision";
+import type {
+  ElementsMap,
+  NonDeletedExcalidrawElement,
+} from "../../element/types";
+import { DEFAULT_LINK_SIZE } from "../../renderer/renderElement";
+import type { AppState, UIAppState } from "../../types";
+
+export const EXTERNAL_LINK_IMG = document.createElement("img");
+EXTERNAL_LINK_IMG.src = `data:${MIME_TYPES.svg}, ${encodeURIComponent(
+  `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1971c2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>`,
+)}`;
+
+export const ELEMENT_LINK_IMG = document.createElement("img");
+ELEMENT_LINK_IMG.src = `data:${MIME_TYPES.svg}, ${encodeURIComponent(
+  `<svg  xmlns="http://www.w3.org/2000/svg"  width="16"  height="16"  viewBox="0 0 24 24"  fill="none"  stroke="#1971c2"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-big-right-line"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 9v-3.586a1 1 0 0 1 1.707 -.707l6.586 6.586a1 1 0 0 1 0 1.414l-6.586 6.586a1 1 0 0 1 -1.707 -.707v-3.586h-6v-6h6z" /><path d="M3 9v6" /></svg>`,
+)}`;
+
+export const getLinkHandleFromCoords = (
+  [x1, y1, x2, y2]: Bounds,
+  angle: Radians,
+  appState: Pick<UIAppState, "zoom">,
+): Bounds => {
+  const size = DEFAULT_LINK_SIZE;
+  const linkWidth = size / appState.zoom.value;
+  const linkHeight = size / appState.zoom.value;
+  const linkMarginY = size / appState.zoom.value;
+  const centerX = (x1 + x2) / 2;
+  const centerY = (y1 + y2) / 2;
+  const centeringOffset = (size - 8) / (2 * appState.zoom.value);
+  const dashedLineMargin = 4 / appState.zoom.value;
+
+  // Same as `ne` resize handle
+  const x = x2 + dashedLineMargin - centeringOffset;
+  const y = y1 - dashedLineMargin - linkMarginY + centeringOffset;
+
+  const [rotatedX, rotatedY] = pointRotateRads(
+    pointFrom(x + linkWidth / 2, y + linkHeight / 2),
+    pointFrom(centerX, centerY),
+    angle,
+  );
+  return [
+    rotatedX - linkWidth / 2,
+    rotatedY - linkHeight / 2,
+    linkWidth,
+    linkHeight,
+  ];
+};
+
+export const isPointHittingLinkIcon = (
+  element: NonDeletedExcalidrawElement,
+  elementsMap: ElementsMap,
+  appState: AppState,
+  [x, y]: GlobalPoint,
+) => {
+  const threshold = 4 / appState.zoom.value;
+  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
+  const [linkX, linkY, linkWidth, linkHeight] = getLinkHandleFromCoords(
+    [x1, y1, x2, y2],
+    element.angle,
+    appState,
+  );
+  const hitLink =
+    x > linkX - threshold &&
+    x < linkX + threshold + linkWidth &&
+    y > linkY - threshold &&
+    y < linkY + linkHeight + threshold;
+  return hitLink;
+};
+
+export const isPointHittingLink = (
+  element: NonDeletedExcalidrawElement,
+  elementsMap: ElementsMap,
+  appState: AppState,
+  [x, y]: GlobalPoint,
+  isMobile: boolean,
+) => {
+  if (!element.link || appState.selectedElementIds[element.id]) {
+    return false;
+  }
+  if (
+    !isMobile &&
+    appState.viewModeEnabled &&
+    hitElementBoundingBox(x, y, element, elementsMap)
+  ) {
+    return true;
+  }
+  return isPointHittingLinkIcon(
+    element,
+    elementsMap,
+    appState,
+    pointFrom(x, y),
+  );
+};