@thangph2146/lexical-editor 0.0.1

package/src/utils/get-dom-range-rect.ts

@@ -0,0 +1,20 @@
+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/get-selected-node.ts

@@ -0,0 +1,20 @@
+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/set-floating-elem-position-for-link-editor.ts

@@ -0,0 +1,39 @@
+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/set-floating-elem-position.ts

@@ -0,0 +1,44 @@
+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
+
+  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
+  }
+
+  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,119 @@
+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 Array.from(listeners)) {
+        if (end !== null) {
+          listener([end[0] - start[0], end[1] - start[1]], e)
+        }
+      }
+    }
+    element.addEventListener("touchstart", handleTouchstart, { passive: true })
+    element.addEventListener("touchend", handleTouchend, { passive: true })
+
+    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,32 @@
+const SUPPORTED_URL_PROTOCOLS = new Set([
+  "http:",
+  "https:",
+  "mailto:",
+  "sms:",
+  "tel:",
+])
+
+export function sanitizeUrl(url: string): string {
+  try {
+    const parsedUrl = new URL(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 {
+  // Reject invalid URLs like "https://" (incomplete URLs)
+  if (!url || url === "https://" || url === "http://") {
+    return false
+  }
+  // Validate using regex pattern
+  return urlRegExp.test(url)
+}