@collabchron/notiq 0.2.0

package/src/utils/getDOMRangeRect.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.
+ *
+ */
+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 {
+    rect = domRange.getBoundingClientRect();
+  }
+
+  return rect;
+}

package/src/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/utils/getThemeSelector.ts

@@ -0,0 +1,25 @@
+/**
+ * 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 {EditorThemeClasses} from 'lexical';
+
+export function getThemeSelector(
+  getTheme: () => EditorThemeClasses | null | undefined,
+  name: keyof EditorThemeClasses,
+): string {
+  const className = getTheme()?.[name];
+  if (typeof className !== 'string') {
+    throw new Error(
+      `getThemeClass: required theme property ${name} not defined`,
+    );
+  }
+  return className
+    .split(/\s+/g)
+    .map((cls) => `.${cls}`)
+    .join();
+}

package/src/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/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/utils/setFloatingElemPosition.ts

@@ -0,0 +1,74 @@
+/**
+ * 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: DOMRect | null,
+  floatingElem: HTMLElement,
+  anchorElem: HTMLElement,
+  isLink: boolean = false,
+  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;
+
+  // Check if text is end-aligned
+  const selection = window.getSelection();
+  if (selection && selection.rangeCount > 0) {
+    const range = selection.getRangeAt(0);
+    const textNode = range.startContainer;
+    if (textNode.nodeType === Node.ELEMENT_NODE || textNode.parentElement) {
+      const textElement =
+        textNode.nodeType === Node.ELEMENT_NODE
+          ? (textNode as Element)
+          : (textNode.parentElement as Element);
+      const textAlign = window.getComputedStyle(textElement).textAlign;
+
+      if (textAlign === 'right' || textAlign === 'end') {
+        // For end-aligned text, position the toolbar relative to the text end
+        left = targetRect.right - floatingElemRect.width + horizontalOffset;
+      }
+    }
+  }
+
+  if (top < editorScrollerRect.top) {
+    // adjusted height for link element if the element is at top
+    top +=
+      floatingElemRect.height +
+      targetRect.height +
+      verticalGap * (isLink ? 9 : 2);
+  }
+
+  if (left + floatingElemRect.width > editorScrollerRect.right) {
+    left = editorScrollerRect.right - floatingElemRect.width - horizontalOffset;
+  }
+
+  if (left < editorScrollerRect.left) {
+    left = editorScrollerRect.left + horizontalOffset;
+  }
+
+  top -= anchorElementRect.top;
+  left -= anchorElementRect.left;
+
+  floatingElem.style.opacity = '1';
+  floatingElem.style.transform = `translate(${left}px, ${top}px)`;
+}

package/src/utils/setFloatingElemPositionForLinkEditor.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 setFloatingElemPositionForLinkEditor(
+  targetRect: DOMRect | 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 - 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/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/utils/url.ts

@@ -0,0 +1,38 @@
+/**
+ * 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 SUPPORTED_URL_PROTOCOLS = new Set([
+  'http:',
+  'https:',
+  'mailto:',
+  'sms:',
+  'tel:',
+]);
+
+export function sanitizeUrl(url: string): string {
+  try {
+    const parsedUrl = new URL(url);
+    // eslint-disable-next-line no-script-url
+    if (!SUPPORTED_URL_PROTOCOLS.has(parsedUrl.protocol)) {
+      return 'about:blank';
+    }
+  } catch {
+    return url;
+  }
+  return url;
+}
+
+// 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);
+}

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}