@team-monolith/cds 1.3.3 → 1.4.0

package/dist/patterns/LexicalEditor/utils/getSelectedNode.js

@@ -0,0 +1,24 @@
+/**
+ * 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";
+export function getSelectedNode(selection) {
+    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/dist/patterns/LexicalEditor/utils/guard.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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 declare function isHTMLElement(x: unknown): x is HTMLElement;

package/dist/patterns/LexicalEditor/utils/guard.js

@@ -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) {
+    return x instanceof HTMLElement;
+}

package/dist/patterns/LexicalEditor/utils/point.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 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 declare class Point {
+    private readonly _x;
+    private readonly _y;
+    constructor(x: number, y: number);
+    get x(): number;
+    get y(): number;
+    equals({ x, y }: Point): boolean;
+    calcDeltaXTo({ x }: Point): number;
+    calcDeltaYTo({ y }: Point): number;
+    calcHorizontalDistanceTo(point: Point): number;
+    calcVerticalDistance(point: Point): number;
+    calcDistanceTo(point: Point): number;
+}
+export declare function isPoint(x: unknown): x is Point;

package/dist/patterns/LexicalEditor/utils/point.js

@@ -0,0 +1,41 @@
+/**
+ * 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 {
+    constructor(x, y) {
+        this._x = x;
+        this._y = y;
+    }
+    get x() {
+        return this._x;
+    }
+    get y() {
+        return this._y;
+    }
+    equals({ x, y }) {
+        return this.x === x && this.y === y;
+    }
+    calcDeltaXTo({ x }) {
+        return this.x - x;
+    }
+    calcDeltaYTo({ y }) {
+        return this.y - y;
+    }
+    calcHorizontalDistanceTo(point) {
+        return Math.abs(this.calcDeltaXTo(point));
+    }
+    calcVerticalDistance(point) {
+        return Math.abs(this.calcDeltaYTo(point));
+    }
+    calcDistanceTo(point) {
+        return Math.sqrt(Math.pow(this.calcDeltaXTo(point), 2) +
+            Math.pow(this.calcDeltaYTo(point), 2));
+    }
+}
+export function isPoint(x) {
+    return x instanceof Point;
+}

package/dist/patterns/LexicalEditor/utils/rect.d.ts

@@ -0,0 +1,45 @@
+/**
+ * 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 { Point } from "./point";
+type ContainsPointReturn = {
+    result: boolean;
+    reason: {
+        isOnTopSide: boolean;
+        isOnBottomSide: boolean;
+        isOnLeftSide: boolean;
+        isOnRightSide: boolean;
+    };
+};
+export declare class Rect {
+    private readonly _left;
+    private readonly _top;
+    private readonly _right;
+    private readonly _bottom;
+    constructor(left: number, top: number, right: number, bottom: number);
+    get top(): number;
+    get right(): number;
+    get bottom(): number;
+    get left(): number;
+    get width(): number;
+    get height(): number;
+    equals({ top, left, bottom, right }: Rect): boolean;
+    contains({ x, y }: Point): ContainsPointReturn;
+    contains({ top, left, bottom, right }: Rect): boolean;
+    intersectsWith(rect: Rect): boolean;
+    generateNewRect({ left, top, right, bottom, }: {
+        left?: number | undefined;
+        top?: number | undefined;
+        right?: number | undefined;
+        bottom?: number | undefined;
+    }): Rect;
+    static fromLTRB(left: number, top: number, right: number, bottom: number): Rect;
+    static fromLWTH(left: number, width: number, top: number, height: number): Rect;
+    static fromPoints(startPoint: Point, endPoint: Point): Rect;
+    static fromDOM(dom: HTMLElement): Rect;
+}
+export {};

package/dist/patterns/LexicalEditor/utils/rect.js

@@ -0,0 +1,99 @@
+/**
+ * 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 } from "./point";
+export class Rect {
+    constructor(left, top, right, bottom) {
+        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() {
+        return this._top;
+    }
+    get right() {
+        return this._right;
+    }
+    get bottom() {
+        return this._bottom;
+    }
+    get left() {
+        return this._left;
+    }
+    get width() {
+        return Math.abs(this._left - this._right);
+    }
+    get height() {
+        return Math.abs(this._bottom - this._top);
+    }
+    equals({ top, left, bottom, right }) {
+        return (top === this._top &&
+            bottom === this._bottom &&
+            left === this._left &&
+            right === this._right);
+    }
+    contains(target) {
+        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);
+        }
+    }
+    intersectsWith(rect) {
+        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;
+    }
+    generateNewRect({ left = this.left, top = this.top, right = this.right, bottom = this.bottom, }) {
+        return new Rect(left, top, right, bottom);
+    }
+    static fromLTRB(left, top, right, bottom) {
+        return new Rect(left, top, right, bottom);
+    }
+    static fromLWTH(left, width, top, height) {
+        return new Rect(left, top, left + width, top + height);
+    }
+    static fromPoints(startPoint, endPoint) {
+        const { y: top, x: left } = startPoint;
+        const { y: bottom, x: right } = endPoint;
+        return Rect.fromLTRB(left, top, right, bottom);
+    }
+    static fromDOM(dom) {
+        const { top, width, left, height } = dom.getBoundingClientRect();
+        return Rect.fromLWTH(left, width, top, height);
+    }
+}

package/dist/patterns/LexicalEditor/utils/setFloatingElemPosition.d.ts

@@ -0,0 +1 @@
+export declare function setFloatingElemPosition(targetRect: DOMRect | null, floatingElem: HTMLElement, anchorElem: HTMLElement, isLink?: boolean, verticalGap?: number, horizontalOffset?: number): void;

package/dist/patterns/LexicalEditor/utils/setFloatingElemPosition.js

@@ -0,0 +1,36 @@
+/**
+ * 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, floatingElem, anchorElem, isLink = false, verticalGap = VERTICAL_GAP, horizontalOffset = HORIZONTAL_OFFSET) {
+    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/dist/patterns/LexicalEditor/utils/setFloatingElemPositionForLinkEditor.d.ts

@@ -0,0 +1 @@
+export declare function setFloatingElemPositionForLinkEditor(targetRect: DOMRect | null, floatingElem: HTMLElement, anchorElem: HTMLElement, verticalGap?: number, horizontalOffset?: number): void;

package/dist/patterns/LexicalEditor/utils/setFloatingElemPositionForLinkEditor.js

@@ -0,0 +1,32 @@
+/**
+ * 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, floatingElem, anchorElem, verticalGap = VERTICAL_GAP, horizontalOffset = HORIZONTAL_OFFSET) {
+    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/dist/patterns/LexicalEditor/utils/url.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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 declare function sanitizeUrl(url: string): string;
+export declare function validateUrl(url: string): boolean;

package/dist/patterns/LexicalEditor/utils/url.js

@@ -0,0 +1,34 @@
+/**
+ * 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) {
+    try {
+        const parsedUrl = new URL(url);
+        // eslint-disable-next-line no-script-url
+        if (!SUPPORTED_URL_PROTOCOLS.has(parsedUrl.protocol)) {
+            return "about:blank";
+        }
+    }
+    catch (_a) {
+        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) {
+    // 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,
@@ -16,16 +16,19 @@
     "@editorjs/raw": "^2.5.0",
     "@editorjs/table": "^2.3.0",
     "@editorjs/underline": "^1.1.0",
+    "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
+    "@lexical/react": "^0.12.4",
     "@mui/material": "^5.13.6",
     "@types/node": "^16.11.26",
     "@types/react": "^18.2.28",
     "@types/react-dom": "^18.2.13",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "editorjs-strikethrough": "^1.0.0",
     "hex-to-css-filter": "^5.4.0",
+    "lexical": "^0.12.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-editor-js": "^2.1.0",
     "remixicon": "^3.4.0",
     "typescript": "^4.5.5",