refactor: inner blocks note links (#1973)

packages/blocks-editor/src/Lexical/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;
+}

packages/blocks-editor/src/Lexical/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) ? focusNode : anchorNode;
+  }
+}

packages/blocks-editor/src/Lexical/Utils/sanitizeUrl.ts

@@ -0,0 +1,23 @@
+/**
+ * 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 const 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://`;
+};

packages/blocks-editor/src/Lexical/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)`;
+}