mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-12 20:38:52 +00:00
387 lines
12 KiB
TypeScript
387 lines
12 KiB
TypeScript
import { assertInstanceOf } from '@blocksuite/global/utils';
|
|
import { effect } from '@preact/signals-core';
|
|
import * as Y from 'yjs';
|
|
|
|
import type { VLine } from '../components/v-line.js';
|
|
import type { InlineEditor } from '../inline-editor.js';
|
|
import type { InlineRange, TextPoint } from '../types.js';
|
|
import type { BaseTextAttributes } from '../utils/base-attributes.js';
|
|
import { isInEmbedGap } from '../utils/embed.js';
|
|
import { isMaybeInlineRangeEqual } from '../utils/inline-range.js';
|
|
import {
|
|
domRangeToInlineRange,
|
|
inlineRangeToDomRange,
|
|
} from '../utils/range-conversion.js';
|
|
import { calculateTextLength, getTextNodesFromElement } from '../utils/text.js';
|
|
|
|
export class RangeService<TextAttributes extends BaseTextAttributes> {
|
|
private _lastEndRelativePosition: Y.RelativePosition | null = null;
|
|
|
|
private _lastStartRelativePosition: Y.RelativePosition | null = null;
|
|
|
|
focusEnd = (): void => {
|
|
this.editor.setInlineRange({
|
|
index: this.editor.yTextLength,
|
|
length: 0,
|
|
});
|
|
};
|
|
|
|
focusIndex = (index: number): void => {
|
|
this.editor.setInlineRange({
|
|
index,
|
|
length: 0,
|
|
});
|
|
};
|
|
|
|
focusStart = (): void => {
|
|
this.editor.setInlineRange({
|
|
index: 0,
|
|
length: 0,
|
|
});
|
|
};
|
|
|
|
getInlineRangeFromElement = (element: Element): InlineRange | null => {
|
|
const range = document.createRange();
|
|
const text = element.querySelector('[data-v-text]');
|
|
if (!text) {
|
|
return null;
|
|
}
|
|
const textNode = text.childNodes[1];
|
|
assertInstanceOf(textNode, Text);
|
|
range.setStart(textNode, 0);
|
|
range.setEnd(textNode, textNode.textContent?.length ?? 0);
|
|
const inlineRange = this.toInlineRange(range);
|
|
return inlineRange;
|
|
};
|
|
|
|
// the number is related to the VLine's textLength
|
|
getLine = (
|
|
rangeIndex: InlineRange['index']
|
|
): {
|
|
line: VLine;
|
|
lineIndex: number;
|
|
rangeIndexRelatedToLine: number;
|
|
} | null => {
|
|
const rootElement = this.editor.rootElement;
|
|
if (!rootElement) return null;
|
|
|
|
const lineElements = Array.from(rootElement.querySelectorAll('v-line'));
|
|
|
|
let beforeIndex = 0;
|
|
for (const [lineIndex, lineElement] of lineElements.entries()) {
|
|
if (
|
|
rangeIndex >= beforeIndex &&
|
|
rangeIndex < beforeIndex + lineElement.vTextLength + 1
|
|
) {
|
|
return {
|
|
line: lineElement,
|
|
lineIndex,
|
|
rangeIndexRelatedToLine: rangeIndex - beforeIndex,
|
|
};
|
|
}
|
|
beforeIndex += lineElement.vTextLength + 1;
|
|
}
|
|
|
|
console.error('failed to find line');
|
|
return null;
|
|
};
|
|
|
|
getNativeRange = (): Range | null => {
|
|
const selection = this.getNativeSelection();
|
|
if (!selection) return null;
|
|
return selection.getRangeAt(0);
|
|
};
|
|
|
|
getNativeSelection = (): Selection | null => {
|
|
const selection = document.getSelection();
|
|
if (!selection) return null;
|
|
if (selection.rangeCount === 0) return null;
|
|
|
|
return selection;
|
|
};
|
|
|
|
getTextPoint = (rangeIndex: InlineRange['index']): TextPoint | null => {
|
|
const rootElement = this.editor.rootElement;
|
|
if (!rootElement) return null;
|
|
|
|
const vLines = Array.from(rootElement.querySelectorAll('v-line'));
|
|
|
|
let index = 0;
|
|
for (const vLine of vLines) {
|
|
const texts = getTextNodesFromElement(vLine);
|
|
if (texts.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
for (const text of texts.filter(text => !isInEmbedGap(text))) {
|
|
if (!text.textContent) {
|
|
return null;
|
|
}
|
|
if (index + text.textContent.length >= rangeIndex) {
|
|
return [text, rangeIndex - index];
|
|
}
|
|
index += calculateTextLength(text);
|
|
}
|
|
|
|
index += 1;
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
/**
|
|
* There are two cases to have the second line:
|
|
* 1. long text auto wrap in span element
|
|
* 2. soft break
|
|
*/
|
|
isFirstLine = (inlineRange: InlineRange | null): boolean => {
|
|
if (!inlineRange || inlineRange.length > 0) return false;
|
|
|
|
const range = this.toDomRange(inlineRange);
|
|
if (!range) {
|
|
console.error('failed to convert inline range to domRange');
|
|
return false;
|
|
}
|
|
|
|
// check case 1:
|
|
const beforeText = this.editor.yTextString.slice(0, inlineRange.index);
|
|
if (beforeText.includes('\n')) {
|
|
return false;
|
|
}
|
|
|
|
// check case 2:
|
|
// If there is a wrapped text, there are two possible positions for
|
|
// cursor: (in first line and in second line)
|
|
// aaaaaaaa| or aaaaaaaa
|
|
// bb |bb
|
|
// We have no way to distinguish them and we just assume that the cursor
|
|
// can not in the first line because if we apply the inline ranage manually the
|
|
// cursor will jump to the second line.
|
|
const container = range.commonAncestorContainer.parentElement;
|
|
if (!container) {
|
|
console.error('failed to get container');
|
|
return false;
|
|
}
|
|
const containerRect = container.getBoundingClientRect();
|
|
// There will be two rects if the cursor is at the edge of the line:
|
|
// aaaaaaaa| or aaaaaaaa
|
|
// bb |bb
|
|
const rangeRects = range.getClientRects();
|
|
// We use last rect here to make sure we get the second rect.
|
|
// (Based on the assumption that the cursor can not in the first line)
|
|
const rangeRect = rangeRects[rangeRects.length - 1];
|
|
const tolerance = 1;
|
|
return Math.abs(rangeRect.top - containerRect.top) < tolerance;
|
|
};
|
|
|
|
/**
|
|
* There are two cases to have the second line:
|
|
* 1. long text auto wrap in span element
|
|
* 2. soft break
|
|
*/
|
|
isLastLine = (inlineRange: InlineRange | null): boolean => {
|
|
if (!inlineRange || inlineRange.length > 0) return false;
|
|
|
|
// check case 1:
|
|
const afterText = this.editor.yTextString.slice(inlineRange.index);
|
|
if (afterText.includes('\n')) {
|
|
return false;
|
|
}
|
|
|
|
const range = this.toDomRange(inlineRange);
|
|
if (!range) {
|
|
console.error('failed to convert inline range to domRange');
|
|
return false;
|
|
}
|
|
|
|
// check case 2:
|
|
// If there is a wrapped text, there are two possible positions for
|
|
// cursor: (in first line and in second line)
|
|
// aaaaaaaa| or aaaaaaaa
|
|
// bb |bb
|
|
// We have no way to distinguish them and we just assume that the cursor
|
|
// can not in the first line because if we apply the inline range manually the
|
|
// cursor will jump to the second line.
|
|
const container = range.commonAncestorContainer.parentElement;
|
|
if (!container) {
|
|
console.error('failed to get container');
|
|
return false;
|
|
}
|
|
const containerRect = container.getBoundingClientRect();
|
|
// There will be two rects if the cursor is at the edge of the line:
|
|
// aaaaaaaa| or aaaaaaaa
|
|
// bb |bb
|
|
const rangeRects = range.getClientRects();
|
|
// We use last rect here to make sure we get the second rect.
|
|
// (Based on the assumption that the cursor can not be in the first line)
|
|
const rangeRect = rangeRects[rangeRects.length - 1];
|
|
|
|
const tolerance = 1;
|
|
return Math.abs(rangeRect.bottom - containerRect.bottom) < tolerance;
|
|
};
|
|
|
|
isValidInlineRange = (inlineRange: InlineRange | null): boolean => {
|
|
return !(
|
|
inlineRange &&
|
|
(inlineRange.index < 0 ||
|
|
inlineRange.index + inlineRange.length > this.editor.yText.length)
|
|
);
|
|
};
|
|
|
|
mount = () => {
|
|
const editor = this.editor;
|
|
let lastInlineRange: InlineRange | null = editor.inlineRange$.value;
|
|
editor.disposables.add(
|
|
effect(() => {
|
|
const newInlineRange = editor.inlineRange$.value;
|
|
if (!editor.mounted) return;
|
|
|
|
const eq = isMaybeInlineRangeEqual(lastInlineRange, newInlineRange);
|
|
if (eq) return;
|
|
lastInlineRange = newInlineRange;
|
|
|
|
const yText = editor.yText;
|
|
if (newInlineRange) {
|
|
this._lastStartRelativePosition =
|
|
Y.createRelativePositionFromTypeIndex(yText, newInlineRange.index);
|
|
this._lastEndRelativePosition = Y.createRelativePositionFromTypeIndex(
|
|
yText,
|
|
newInlineRange.index + newInlineRange.length
|
|
);
|
|
} else {
|
|
this._lastStartRelativePosition = null;
|
|
this._lastEndRelativePosition = null;
|
|
}
|
|
|
|
if (editor.inlineRangeProviderOverride) return;
|
|
|
|
if (this.editor.renderService.rendering) {
|
|
editor.slots.renderComplete.once(() => {
|
|
this.syncInlineRange(newInlineRange);
|
|
});
|
|
} else {
|
|
this.syncInlineRange();
|
|
}
|
|
})
|
|
);
|
|
};
|
|
|
|
selectAll = (): void => {
|
|
this.editor.setInlineRange({
|
|
index: 0,
|
|
length: this.editor.yTextLength,
|
|
});
|
|
};
|
|
|
|
private _syncInlineRangeLock = false;
|
|
lockSyncInlineRange = () => {
|
|
this._syncInlineRangeLock = true;
|
|
};
|
|
unlockSyncInlineRange = () => {
|
|
this._syncInlineRangeLock = false;
|
|
};
|
|
/**
|
|
* sync the dom selection from inline range for **this Editor**
|
|
*/
|
|
syncInlineRange = (inlineRange?: InlineRange | null) => {
|
|
if (!this.editor.mounted || this._syncInlineRangeLock) return;
|
|
inlineRange = inlineRange ?? this.editor.getInlineRange();
|
|
|
|
const handler = () => {
|
|
const selection = document.getSelection();
|
|
if (!selection) return;
|
|
if (!this.editor.rootElement) return;
|
|
|
|
if (inlineRange === null) {
|
|
if (selection.rangeCount > 0) {
|
|
const range = selection.getRangeAt(0);
|
|
if (range.intersectsNode(this.editor.rootElement)) {
|
|
selection.removeAllRanges();
|
|
}
|
|
}
|
|
} else {
|
|
try {
|
|
const newRange = this.toDomRange(inlineRange);
|
|
if (newRange) {
|
|
selection.removeAllRanges();
|
|
selection.addRange(newRange);
|
|
this.editor.rootElement.focus();
|
|
|
|
this.editor.slots.inlineRangeSync.emit(newRange);
|
|
} else {
|
|
this.editor.slots.renderComplete.once(() => {
|
|
this.syncInlineRange(inlineRange);
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error('failed to apply inline range');
|
|
console.error(error);
|
|
}
|
|
}
|
|
};
|
|
|
|
if (this.editor.renderService.rendering) {
|
|
this.editor.slots.renderComplete.once(handler);
|
|
} else {
|
|
handler();
|
|
}
|
|
};
|
|
|
|
/**
|
|
* calculate the dom selection from inline ranage for **this Editor**
|
|
*/
|
|
toDomRange = (inlineRange: InlineRange): Range | null => {
|
|
const rootElement = this.editor.rootElement;
|
|
if (!rootElement) return null;
|
|
return inlineRangeToDomRange(rootElement, inlineRange);
|
|
};
|
|
|
|
/**
|
|
* calculate the inline ranage from dom selection for **this Editor**
|
|
* there are three cases when the inline ranage of this Editor is not null:
|
|
* (In the following, "|" mean anchor and focus, each line is a separate Editor)
|
|
* 1. anchor and focus are in this Editor
|
|
* ```
|
|
* aaaaaa
|
|
* b|bbbb|b
|
|
* cccccc
|
|
* ```
|
|
* the inline ranage of second Editor is `{index: 1, length: 4}`, the others are null
|
|
* 2. anchor and focus one in this Editor, one in another Editor
|
|
* ```
|
|
* aaa|aaa aaaaaa
|
|
* bbbbb|b or bbbbb|b
|
|
* cccccc cc|cccc
|
|
* ```
|
|
* 2.1
|
|
* the inline ranage of first Editor is `{index: 3, length: 3}`, the second is `{index: 0, length: 5}`,
|
|
* the third is null
|
|
* 2.2
|
|
* the inline ranage of first Editor is null, the second is `{index: 5, length: 1}`,
|
|
* the third is `{index: 0, length: 2}`
|
|
* 3. anchor and focus are in another Editor
|
|
* ```
|
|
* aa|aaaa
|
|
* bbbbbb
|
|
* cccc|cc
|
|
* ```
|
|
* the inline range of first Editor is `{index: 2, length: 4}`,
|
|
* the second is `{index: 0, length: 6}`, the third is `{index: 0, length: 4}`
|
|
*/
|
|
toInlineRange = (range: Range): InlineRange | null => {
|
|
const { rootElement, yText } = this.editor;
|
|
if (!rootElement || !yText) return null;
|
|
return domRangeToInlineRange(range, rootElement, yText);
|
|
};
|
|
|
|
get lastEndRelativePosition() {
|
|
return this._lastEndRelativePosition;
|
|
}
|
|
|
|
get lastStartRelativePosition() {
|
|
return this._lastStartRelativePosition;
|
|
}
|
|
|
|
constructor(readonly editor: InlineEditor<TextAttributes>) {}
|
|
}
|