fix: test for ios range line break error (#2635)

This commit is contained in:
Niklas von Hertzen
2021-08-09 17:14:40 +08:00
committed by GitHub
parent 7a06d0c2c2
commit f43f942fcd
3 changed files with 78 additions and 4 deletions

View File

@@ -15,6 +15,20 @@ export class Bounds {
clientRect.height
);
}
static fromDOMRectList(context: Context, domRectList: DOMRectList): Bounds {
const domRect = domRectList[0];
return domRect
? new Bounds(
domRect.x + context.windowBounds.left,
domRect.y + context.windowBounds.top,
domRect.width,
domRect.height
)
: Bounds.EMPTY;
}
static EMPTY = new Bounds(0, 0, 0, 0);
}
export const parseBounds = (context: Context, node: Element): Bounds => {

View File

@@ -27,7 +27,16 @@ export const parseTextBounds = (
textList.forEach((text) => {
if (styles.textDecorationLine.length || text.trim().length > 0) {
if (FEATURES.SUPPORT_RANGE_BOUNDS) {
textBounds.push(new TextBounds(text, getRangeBounds(context, node, offset, text.length)));
if (!FEATURES.SUPPORT_WORD_BREAKING) {
textBounds.push(
new TextBounds(
text,
Bounds.fromDOMRectList(context, createRange(node, offset, text.length).getClientRects())
)
);
} else {
textBounds.push(new TextBounds(text, getRangeBounds(context, node, offset, text.length)));
}
} else {
const replacementNode = node.splitText(text.length);
textBounds.push(new TextBounds(text, getWrapperBounds(context, node)));
@@ -58,10 +67,10 @@ const getWrapperBounds = (context: Context, node: Text): Bounds => {
}
}
return new Bounds(0, 0, 0, 0);
return Bounds.EMPTY;
};
const getRangeBounds = (context: Context, node: Text, offset: number, length: number): Bounds => {
const createRange = (node: Text, offset: number, length: number): Range => {
const ownerDocument = node.ownerDocument;
if (!ownerDocument) {
throw new Error('Node has no owner document');
@@ -69,7 +78,11 @@ const getRangeBounds = (context: Context, node: Text, offset: number, length: nu
const range = ownerDocument.createRange();
range.setStart(node, offset);
range.setEnd(node, offset + length);
return Bounds.fromClientRect(context, range.getBoundingClientRect());
return range;
};
const getRangeBounds = (context: Context, node: Text, offset: number, length: number): Bounds => {
return Bounds.fromClientRect(context, createRange(node, offset, length).getBoundingClientRect());
};
const breakText = (value: string, styles: CSSParsedDeclaration): string[] => {