@crystallize/design-system 1.3.2 → 1.4.1

package/src/rich-text-editor/ui/LinkPreview.tsx

@@ -0,0 +1,169 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import './LinkPreview.css';
+import { CSSProperties, Suspense, useEffect, useState } from 'react';
+import { $getSelection, $isTextNode } from 'lexical';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+
+import { Button } from '../../button';
+
+type MetaTagBaseShared = {
+  description?: string;
+  image?: string;
+  title?: string;
+};
+
+type MetaTags = {
+  facebook: MetaTagBaseShared;
+  google: MetaTagBaseShared;
+  linkedin: MetaTagBaseShared;
+  pinterest: MetaTagBaseShared;
+  slack: MetaTagBaseShared;
+  twitter: MetaTagBaseShared;
+  metatags: MetaTagBaseShared;
+  favicon?: string;
+};
+
+type MetaTagsRequestResponse =
+  | (MetaTags & {
+      success: boolean;
+    })
+  | null;
+
+// Cached responses or running request promises
+const PREVIEW_CACHE: Record<string, Promise<void | MetaTagsRequestResponse> | { preview: MetaTagsRequestResponse }> =
+  {};
+
+const URL_MATCHER =
+  /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
+
+function useSuspenseRequest(url: string) {
+  let cached = PREVIEW_CACHE[url];
+
+  if (!url.match(URL_MATCHER)) {
+    return { preview: null };
+  }
+
+  if (!cached) {
+    cached = PREVIEW_CACHE[url] = fetch(`https://service-metatags.crystallize.workers.dev/?url=${encodeURI(url)}`)
+      .then(response => response.json() as Promise<MetaTagsRequestResponse>)
+      .then(preview => {
+        PREVIEW_CACHE[url] = { preview };
+        return preview;
+      })
+      .catch(() => {
+        PREVIEW_CACHE[url] = { preview: null };
+      });
+  }
+
+  if (cached instanceof Promise) {
+    throw cached;
+  }
+
+  return cached;
+}
+
+function LinkPreviewContent({
+  url,
+}: Readonly<{
+  url: string;
+}>): JSX.Element | null {
+  const [textContent, setTextContent] = useState('');
+  const { preview } = useSuspenseRequest(url);
+  const [editor] = useLexicalComposerContext();
+
+  const hasPreview = preview !== null && preview.google?.title;
+
+  // Get the textContent from the link node (if the link is a single node)
+  useEffect(() => {
+    editor.update(() => {
+      const sel = $getSelection();
+      const nodes = sel?.getNodes();
+      if (hasPreview && nodes?.length === 1) {
+        const [firstNode] = nodes;
+        if ($isTextNode(firstNode)) {
+          setTextContent(firstNode.getTextContent());
+        }
+      }
+    });
+  }, [editor, preview]);
+
+  /**
+   * Replace the current
+   */
+  function useTitleForText() {
+    editor.update(() => {
+      const sel = $getSelection();
+      const nodes = sel?.getNodes();
+      if (hasPreview && nodes?.length === 1) {
+        const [firstNode] = nodes;
+        if ($isTextNode(firstNode)) {
+          // @ts-expect-error
+          firstNode.setTextContent(preview.google.title);
+          // @ts-expect-error
+          setTextContent(preview.google.title);
+        }
+      }
+    });
+  }
+
+  if (!hasPreview) {
+    return null;
+  }
+
+  return (
+    <div className="LinkPreview__container">
+      {preview.google.image && (
+        <div className="LinkPreview__imageWrapper bg-purple-50-900">
+          <img src={preview.google.image} alt={preview.google.title} className="LinkPreview__image" />
+        </div>
+      )}
+      {preview.google.title && <div className="LinkPreview__title">{preview.google.title}</div>}
+      {preview.google.description && <div className="LinkPreview__description">{preview.google.description}</div>}
+      {textContent && textContent !== preview.google.title ? (
+        <Button className="mb-4 ml-5" onClick={useTitleForText}>
+          Replace link text with its title
+        </Button>
+      ) : null}
+    </div>
+  );
+}
+
+function Glimmer(props: { style: CSSProperties; index: number }): JSX.Element {
+  return (
+    <div
+      className="LinkPreview__glimmer"
+      {...props}
+      style={{
+        animationDelay: String((props.index || 0) * 300),
+        ...(props.style || {}),
+      }}
+    />
+  );
+}
+
+export default function LinkPreview({
+  url,
+}: Readonly<{
+  url: string;
+}>): JSX.Element {
+  return (
+    <Suspense
+      fallback={
+        <>
+          <Glimmer style={{ height: '80px' }} index={0} />
+          <Glimmer style={{ width: '60%' }} index={1} />
+          <Glimmer style={{ width: '80%' }} index={2} />
+        </>
+      }
+    >
+      <LinkPreviewContent url={url} />
+    </Suspense>
+  );
+}

package/src/rich-text-editor/utils/environment.ts

@@ -0,0 +1 @@
+export const IS_APPLE: boolean = typeof navigator !== 'undefined' && /Mac|iPod|iPhone|iPad/.test(navigator.platform);

package/src/rich-text-editor/utils/getDOMRangeRect.ts

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export function getDOMRangeRect(nativeSelection: Selection, rootElement: HTMLElement): DOMRect {
+  const domRange = nativeSelection.getRangeAt(0);
+
+  let rect;
+
+  if (nativeSelection.anchorNode === rootElement) {
+    let inner = rootElement;
+    while (inner.firstElementChild != null) {
+      inner = inner.firstElementChild as HTMLElement;
+    }
+    rect = inner.getBoundingClientRect();
+  } else {
+    /**
+     * Catch errors that might occur during testing with
+     * @testing-library
+     */
+    if ('getBoundingClientRect' in domRange) {
+      rect = domRange.getBoundingClientRect();
+    } else {
+      // @ts-expect-error
+      return {
+        height: 0,
+        width: 0,
+        x: 0,
+        y: 0,
+        bottom: 0,
+        left: 0,
+        top: 0,
+        right: 0,
+      };
+    }
+  }
+
+  return rect;
+}

package/src/rich-text-editor/utils/getSelectedNode.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import {$isAtNodeEnd} from '@lexical/selection';
+import {ElementNode, RangeSelection, TextNode} from 'lexical';
+
+export function getSelectedNode(
+  selection: RangeSelection,
+): TextNode | ElementNode {
+  const anchor = selection.anchor;
+  const focus = selection.focus;
+  const anchorNode = selection.anchor.getNode();
+  const focusNode = selection.focus.getNode();
+  if (anchorNode === focusNode) {
+    return anchorNode;
+  }
+  const isBackward = selection.isBackward();
+  if (isBackward) {
+    return $isAtNodeEnd(focus) ? anchorNode : focusNode;
+  } else {
+    return $isAtNodeEnd(anchor) ? anchorNode : focusNode;
+  }
+}

package/src/rich-text-editor/utils/guard.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export function isHTMLElement(x: unknown): x is HTMLElement {
+  return x instanceof HTMLElement;
+}

package/src/rich-text-editor/utils/isMobileWidth.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */

package/src/rich-text-editor/utils/joinClasses.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export default function joinClasses(
+  ...args: Array<string | boolean | null | undefined>
+) {
+  return args.filter(Boolean).join(' ');
+}

package/src/rich-text-editor/utils/point.ts

@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export class Point {
+  private readonly _x: number;
+  private readonly _y: number;
+
+  constructor(x: number, y: number) {
+    this._x = x;
+    this._y = y;
+  }
+
+  get x(): number {
+    return this._x;
+  }
+
+  get y(): number {
+    return this._y;
+  }
+
+  public equals({x, y}: Point): boolean {
+    return this.x === x && this.y === y;
+  }
+
+  public calcDeltaXTo({x}: Point): number {
+    return this.x - x;
+  }
+
+  public calcDeltaYTo({y}: Point): number {
+    return this.y - y;
+  }
+
+  public calcHorizontalDistanceTo(point: Point): number {
+    return Math.abs(this.calcDeltaXTo(point));
+  }
+
+  public calcVerticalDistance(point: Point): number {
+    return Math.abs(this.calcDeltaYTo(point));
+  }
+
+  public calcDistanceTo(point: Point): number {
+    return Math.sqrt(
+      Math.pow(this.calcDeltaXTo(point), 2) +
+        Math.pow(this.calcDeltaYTo(point), 2),
+    );
+  }
+}
+
+export function isPoint(x: unknown): x is Point {
+  return x instanceof Point;
+}

package/src/rich-text-editor/utils/rect.ts

@@ -0,0 +1,158 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import {isPoint, Point} from './point';
+
+type ContainsPointReturn = {
+  result: boolean;
+  reason: {
+    isOnTopSide: boolean;
+    isOnBottomSide: boolean;
+    isOnLeftSide: boolean;
+    isOnRightSide: boolean;
+  };
+};
+
+export class Rect {
+  private readonly _left: number;
+  private readonly _top: number;
+  private readonly _right: number;
+  private readonly _bottom: number;
+
+  constructor(left: number, top: number, right: number, bottom: number) {
+    const [physicTop, physicBottom] =
+      top <= bottom ? [top, bottom] : [bottom, top];
+
+    const [physicLeft, physicRight] =
+      left <= right ? [left, right] : [right, left];
+
+    this._top = physicTop;
+    this._right = physicRight;
+    this._left = physicLeft;
+    this._bottom = physicBottom;
+  }
+
+  get top(): number {
+    return this._top;
+  }
+
+  get right(): number {
+    return this._right;
+  }
+
+  get bottom(): number {
+    return this._bottom;
+  }
+
+  get left(): number {
+    return this._left;
+  }
+
+  get width(): number {
+    return Math.abs(this._left - this._right);
+  }
+
+  get height(): number {
+    return Math.abs(this._bottom - this._top);
+  }
+
+  public equals({top, left, bottom, right}: Rect): boolean {
+    return (
+      top === this._top &&
+      bottom === this._bottom &&
+      left === this._left &&
+      right === this._right
+    );
+  }
+
+  public contains({x, y}: Point): ContainsPointReturn;
+  public contains({top, left, bottom, right}: Rect): boolean;
+  public contains(target: Point | Rect): boolean | ContainsPointReturn {
+    if (isPoint(target)) {
+      const {x, y} = target;
+
+      const isOnTopSide = y < this._top;
+      const isOnBottomSide = y > this._bottom;
+      const isOnLeftSide = x < this._left;
+      const isOnRightSide = x > this._right;
+
+      const result =
+        !isOnTopSide && !isOnBottomSide && !isOnLeftSide && !isOnRightSide;
+
+      return {
+        reason: {
+          isOnBottomSide,
+          isOnLeftSide,
+          isOnRightSide,
+          isOnTopSide,
+        },
+        result,
+      };
+    } else {
+      const {top, left, bottom, right} = target;
+
+      return (
+        top >= this._top &&
+        top <= this._bottom &&
+        bottom >= this._top &&
+        bottom <= this._bottom &&
+        left >= this._left &&
+        left <= this._right &&
+        right >= this._left &&
+        right <= this._right
+      );
+    }
+  }
+
+  public intersectsWith(rect: Rect): boolean {
+    const {left: x1, top: y1, width: w1, height: h1} = rect;
+    const {left: x2, top: y2, width: w2, height: h2} = this;
+    const maxX = x1 + w1 >= x2 + w2 ? x1 + w1 : x2 + w2;
+    const maxY = y1 + h1 >= y2 + h2 ? y1 + h1 : y2 + h2;
+    const minX = x1 <= x2 ? x1 : x2;
+    const minY = y1 <= y2 ? y1 : y2;
+    return maxX - minX <= w1 + w2 && maxY - minY <= h1 + h2;
+  }
+
+  public generateNewRect({
+    left = this.left,
+    top = this.top,
+    right = this.right,
+    bottom = this.bottom,
+  }): Rect {
+    return new Rect(left, top, right, bottom);
+  }
+
+  static fromLTRB(
+    left: number,
+    top: number,
+    right: number,
+    bottom: number,
+  ): Rect {
+    return new Rect(left, top, right, bottom);
+  }
+
+  static fromLWTH(
+    left: number,
+    width: number,
+    top: number,
+    height: number,
+  ): Rect {
+    return new Rect(left, top, left + width, top + height);
+  }
+
+  static fromPoints(startPoint: Point, endPoint: Point): Rect {
+    const {y: top, x: left} = startPoint;
+    const {y: bottom, x: right} = endPoint;
+    return Rect.fromLTRB(left, top, right, bottom);
+  }
+
+  static fromDOM(dom: HTMLElement): Rect {
+    const {top, width, left, height} = dom.getBoundingClientRect();
+    return Rect.fromLWTH(left, width, top, height);
+  }
+}

package/src/rich-text-editor/utils/setFloatingElemPosition.ts

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+const VERTICAL_GAP = 10;
+const HORIZONTAL_OFFSET = 5;
+
+export function setFloatingElemPosition(
+  targetRect: ClientRect | null,
+  floatingElem: HTMLElement,
+  anchorElem: HTMLElement,
+  verticalGap: number = VERTICAL_GAP,
+  horizontalOffset: number = HORIZONTAL_OFFSET,
+): void {
+  const scrollerElem = anchorElem.parentElement;
+
+  if (targetRect === null || !scrollerElem) {
+    floatingElem.style.opacity = '0';
+    floatingElem.style.transform = 'translate(-10000px, -10000px)';
+    return;
+  }
+
+  const floatingElemRect = floatingElem.getBoundingClientRect();
+  const anchorElementRect = anchorElem.getBoundingClientRect();
+  const editorScrollerRect = scrollerElem.getBoundingClientRect();
+
+  let top = targetRect.top - floatingElemRect.height - verticalGap;
+  let left = targetRect.left - horizontalOffset;
+
+  if (top < editorScrollerRect.top) {
+    top += floatingElemRect.height + targetRect.height + verticalGap * 2;
+  }
+
+  if (left + floatingElemRect.width > editorScrollerRect.right) {
+    left = editorScrollerRect.right - floatingElemRect.width - horizontalOffset;
+  }
+
+  top -= anchorElementRect.top;
+  left -= anchorElementRect.left;
+
+  floatingElem.style.opacity = '1';
+  floatingElem.style.transform = `translate(${left}px, ${top}px)`;
+}

package/src/rich-text-editor/utils/swipe.ts

@@ -0,0 +1,127 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+type Force = [number, number];
+type Listener = (force: Force, e: TouchEvent) => void;
+type ElementValues = {
+  start: null | Force;
+  listeners: Set<Listener>;
+  handleTouchstart: (e: TouchEvent) => void;
+  handleTouchend: (e: TouchEvent) => void;
+};
+
+const elements = new WeakMap<HTMLElement, ElementValues>();
+
+function readTouch(e: TouchEvent): [number, number] | null {
+  const touch = e.changedTouches[0];
+  if (touch === undefined) {
+    return null;
+  }
+  return [touch.clientX, touch.clientY];
+}
+
+function addListener(element: HTMLElement, cb: Listener): () => void {
+  let elementValues = elements.get(element);
+  if (elementValues === undefined) {
+    const listeners = new Set<Listener>();
+    const handleTouchstart = (e: TouchEvent) => {
+      if (elementValues !== undefined) {
+        elementValues.start = readTouch(e);
+      }
+    };
+    const handleTouchend = (e: TouchEvent) => {
+      if (elementValues === undefined) {
+        return;
+      }
+      const start = elementValues.start;
+      if (start === null) {
+        return;
+      }
+      const end = readTouch(e);
+      for (const listener of listeners) {
+        if (end !== null) {
+          listener([end[0] - start[0], end[1] - start[1]], e);
+        }
+      }
+    };
+    element.addEventListener('touchstart', handleTouchstart);
+    element.addEventListener('touchend', handleTouchend);
+
+    elementValues = {
+      handleTouchend,
+      handleTouchstart,
+      listeners,
+      start: null,
+    };
+    elements.set(element, elementValues);
+  }
+  elementValues.listeners.add(cb);
+  return () => deleteListener(element, cb);
+}
+
+function deleteListener(element: HTMLElement, cb: Listener): void {
+  const elementValues = elements.get(element);
+  if (elementValues === undefined) {
+    return;
+  }
+  const listeners = elementValues.listeners;
+  listeners.delete(cb);
+  if (listeners.size === 0) {
+    elements.delete(element);
+    element.removeEventListener('touchstart', elementValues.handleTouchstart);
+    element.removeEventListener('touchend', elementValues.handleTouchend);
+  }
+}
+
+export function addSwipeLeftListener(
+  element: HTMLElement,
+  cb: (_force: number, e: TouchEvent) => void,
+) {
+  return addListener(element, (force, e) => {
+    const [x, y] = force;
+    if (x < 0 && -x > Math.abs(y)) {
+      cb(x, e);
+    }
+  });
+}
+
+export function addSwipeRightListener(
+  element: HTMLElement,
+  cb: (_force: number, e: TouchEvent) => void,
+) {
+  return addListener(element, (force, e) => {
+    const [x, y] = force;
+    if (x > 0 && x > Math.abs(y)) {
+      cb(x, e);
+    }
+  });
+}
+
+export function addSwipeUpListener(
+  element: HTMLElement,
+  cb: (_force: number, e: TouchEvent) => void,
+) {
+  return addListener(element, (force, e) => {
+    const [x, y] = force;
+    if (y < 0 && -y > Math.abs(x)) {
+      cb(x, e);
+    }
+  });
+}
+
+export function addSwipeDownListener(
+  element: HTMLElement,
+  cb: (_force: number, e: TouchEvent) => void,
+) {
+  return addListener(element, (force, e) => {
+    const [x, y] = force;
+    if (y > 0 && y > Math.abs(x)) {
+      cb(x, e);
+    }
+  });
+}

package/src/rich-text-editor/utils/url.ts

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export function sanitizeUrl(url: string): string {
+  /** A pattern that matches safe  URLs. */
+  const SAFE_URL_PATTERN =
+    /^(?:(?:https?|mailto|ftp|tel|file|sms):|[^&:/?#]*(?:[/?#]|$))/gi;
+
+  /** A pattern that matches safe data URLs. */
+  const DATA_URL_PATTERN =
+    /^data:(?:image\/(?:bmp|gif|jpeg|jpg|png|tiff|webp)|video\/(?:mpeg|mp4|ogg|webm)|audio\/(?:mp3|oga|ogg|opus));base64,[a-z0-9+/]+=*$/i;
+
+  url = String(url).trim();
+
+  if (url.match(SAFE_URL_PATTERN) || url.match(DATA_URL_PATTERN)) return url;
+
+  return 'https://';
+}
+
+// Source: https://stackoverflow.com/a/8234912/2013580
+const urlRegExp = new RegExp(
+  /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)/,
+);
+export function validateUrl(url: string): boolean {
+  // TODO Fix UI for link insertion; it should never default to an invalid URL such as https://.
+  // Maybe show a dialog where they user can type the URL before inserting it.
+  return url === 'https://' || urlRegExp.test(url);
+}