rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: upgrade lexical & make linting/formatting consistent with web codebase (#2144)

Browse Source
This commit is contained in:
Aman Harwara
2023-01-11 14:34:14 +05:30
committed by GitHub
parent 573538031e
commit c24be606ad
76 changed files with 2404 additions and 3203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
packages/blocks-editor/src/Lexical/Utils/getDOMRangeRect.ts
View File

@@ -5,23 +5,20 @@
* LICENSE file in the root directory of this source tree.
*
*/
export function getDOMRangeRect(
nativeSelection: Selection,
rootElement: HTMLElement,
): DOMRect {
const domRange = nativeSelection.getRangeAt(0);
export function getDOMRangeRect(nativeSelection: Selection, rootElement: HTMLElement): DOMRect {
const domRange = nativeSelection.getRangeAt(0)
let rect;
let rect
if (nativeSelection.anchorNode === rootElement) {
let inner = rootElement;
let inner = rootElement
while (inner.firstElementChild != null) {
inner = inner.firstElementChild as HTMLElement;
inner = inner.firstElementChild as HTMLElement
}
rect = inner.getBoundingClientRect();
rect = inner.getBoundingClientRect()
} else {
rect = domRange.getBoundingClientRect();
rect = domRange.getBoundingClientRect()
}
return rect;
return rect
}

24
packages/blocks-editor/src/Lexical/Utils/getSelectedNode.ts
View File

@@ -5,23 +5,21 @@
* LICENSE file in the root directory of this source tree.
*
*/
import {$isAtNodeEnd} from '@lexical/selection';
import {ElementNode, RangeSelection, TextNode} from 'lexical';
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();
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;
return anchorNode
}
const isBackward = selection.isBackward();
const isBackward = selection.isBackward()
if (isBackward) {
return $isAtNodeEnd(focus) ? anchorNode : focusNode;
return $isAtNodeEnd(focus) ? anchorNode : focusNode
} else {
return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
return $isAtNodeEnd(anchor) ? focusNode : anchorNode
}
}

2
packages/blocks-editor/src/Lexical/Utils/guard.ts
View File

@@ -6,5 +6,5 @@
*
*/
export function isHTMLElement(x: unknown): x is HTMLElement {
return x instanceof HTMLElement;
return x instanceof HTMLElement
}

6
packages/blocks-editor/src/Lexical/Utils/join-classes.ts
View File

@@ -6,8 +6,6 @@
*
*/
export default function joinClasses(
...args: Array<string | boolean | null | undefined>
) {
return args.filter(Boolean).join(' ');
export default function joinClasses(...args: Array<string | boolean | null | undefined>) {
return args.filter(Boolean).join(' ')
}

35
packages/blocks-editor/src/Lexical/Utils/point.ts
View File

@@ -6,50 +6,47 @@
*
*/
export class Point {
private readonly _x: number;
private readonly _y: number;
private readonly _x: number
private readonly _y: number
constructor(x: number, y: number) {
this._x = x;
this._y = y;
this._x = x
this._y = y
}
get x(): number {
return this._x;
return this._x
}
get y(): number {
return this._y;
return this._y
}
public equals({x, y}: Point): boolean {
return this.x === x && this.y === y;
public equals({ x, y }: Point): boolean {
return this.x === x && this.y === y
}
public calcDeltaXTo({x}: Point): number {
return this.x - x;
public calcDeltaXTo({ x }: Point): number {
return this.x - x
}
public calcDeltaYTo({y}: Point): number {
return this.y - y;
public calcDeltaYTo({ y }: Point): number {
return this.y - y
}
public calcHorizontalDistanceTo(point: Point): number {
return Math.abs(this.calcDeltaXTo(point));
return Math.abs(this.calcDeltaXTo(point))
}
public calcVerticalDistance(point: Point): number {
return Math.abs(this.calcDeltaYTo(point));
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),
);
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;
return x instanceof Point
}

133
packages/blocks-editor/src/Lexical/Utils/rect.ts
View File

@@ -5,83 +5,75 @@
* LICENSE file in the root directory of this source tree.
*
*/
import {isPoint, Point} from './point';
import { isPoint, Point } from './point'
export type ContainsPointReturn = {
result: boolean;
result: boolean
reason: {
isOnTopSide: boolean;
isOnBottomSide: boolean;
isOnLeftSide: boolean;
isOnRightSide: boolean;
};
};
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;
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 [physicTop, physicBottom] = top <= bottom ? [top, bottom] : [bottom, top]
const [physicLeft, physicRight] =
left <= right ? [left, right] : [right, left];
const [physicLeft, physicRight] = left <= right ? [left, right] : [right, left]
this._top = physicTop;
this._right = physicRight;
this._left = physicLeft;
this._bottom = physicBottom;
this._top = physicTop
this._right = physicRight
this._left = physicLeft
this._bottom = physicBottom
}
get top(): number {
return this._top;
return this._top
}
get right(): number {
return this._right;
return this._right
}
get bottom(): number {
return this._bottom;
return this._bottom
}
get left(): number {
return this._left;
return this._left
}
get width(): number {
return Math.abs(this._left - this._right);
return Math.abs(this._left - this._right)
}
get height(): number {
return Math.abs(this._bottom - this._top);
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 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({ 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 { x, y } = target
const isOnTopSide = y < this._top;
const isOnBottomSide = y > this._bottom;
const isOnLeftSide = x < this._left;
const isOnRightSide = x > this._right;
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;
const result = !isOnTopSide && !isOnBottomSide && !isOnLeftSide && !isOnRightSide
return {
reason: {
@@ -91,9 +83,9 @@ export class Rect {
isOnTopSide,
},
result,
};
}
} else {
const {top, left, bottom, right} = target;
const { top, left, bottom, right } = target
return (
top >= this._top &&
@@ -104,55 +96,40 @@ export class Rect {
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;
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);
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 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 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);
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);
const { top, width, left, height } = dom.getBoundingClientRect()
return Rect.fromLWTH(left, width, top, height)
}
}

15
packages/blocks-editor/src/Lexical/Utils/sanitizeUrl.ts
View File

@@ -8,16 +8,17 @@
export const sanitizeUrl = (url: string): string => {
/** A pattern that matches safe URLs. */
const SAFE_URL_PATTERN =
/^(?:(?:https?|mailto|ftp|tel|file|sms):|[^&:/?#]*(?:[/?#]|$))/gi;
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;
/^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();
url = String(url).trim()
if (url.match(SAFE_URL_PATTERN) || url.match(DATA_URL_PATTERN)) return url;
if (url.match(SAFE_URL_PATTERN) || url.match(DATA_URL_PATTERN)) {
return url
}
return `https://`;
};
return 'https://'
}

34
packages/blocks-editor/src/Lexical/Utils/setFloatingElemPosition.ts
View File

@@ -5,8 +5,8 @@
* LICENSE file in the root directory of this source tree.
*
*/
const VERTICAL_GAP = 10;
const HORIZONTAL_OFFSET = 5;
const VERTICAL_GAP = 10
const HORIZONTAL_OFFSET = 5
export function setFloatingElemPosition(
targetRect: ClientRect | null,
@@ -15,32 +15,32 @@ export function setFloatingElemPosition(
verticalGap: number = VERTICAL_GAP,
horizontalOffset: number = HORIZONTAL_OFFSET,
): void {
const scrollerElem = anchorElem.parentElement;
const scrollerElem = anchorElem.parentElement
if (targetRect === null || !scrollerElem) {
floatingElem.style.opacity = '0';
floatingElem.style.transform = 'translate(-10000px, -10000px)';
return;
floatingElem.style.opacity = '0'
floatingElem.style.transform = 'translate(-10000px, -10000px)'
return
}
const floatingElemRect = floatingElem.getBoundingClientRect();
const anchorElementRect = anchorElem.getBoundingClientRect();
const editorScrollerRect = scrollerElem.getBoundingClientRect();
const floatingElemRect = floatingElem.getBoundingClientRect()
const anchorElementRect = anchorElem.getBoundingClientRect()
const editorScrollerRect = scrollerElem.getBoundingClientRect()
let top = targetRect.top - floatingElemRect.height - verticalGap;
let left = targetRect.left - horizontalOffset;
let top = targetRect.top - floatingElemRect.height - verticalGap
let left = targetRect.left - horizontalOffset
if (top < editorScrollerRect.top) {
top += floatingElemRect.height + targetRect.height + verticalGap * 2;
top += floatingElemRect.height + targetRect.height + verticalGap * 2
}
if (left + floatingElemRect.width > editorScrollerRect.right) {
left = editorScrollerRect.right - floatingElemRect.width - horizontalOffset;
left = editorScrollerRect.right - floatingElemRect.width - horizontalOffset
}
top -= anchorElementRect.top;
left -= anchorElementRect.left;
top -= anchorElementRect.top
left -= anchorElementRect.left
floatingElem.style.opacity = '1';
floatingElem.style.transform = `translate(${left}px, ${top}px)`;
floatingElem.style.opacity = '1'
floatingElem.style.transform = `translate(${left}px, ${top}px)`
}