mirror of
https://github.com/codex-team/editor.js
synced 2026-03-17 16:10:07 +01:00
fix: replace deprecated APIs with the modern ones
This commit is contained in:
JackUait
parent
799cf6055f
commit
5d5f19a61c
15 changed files with 603 additions and 752 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -9,6 +9,7 @@ node_modules/*
|
|||
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
.yarn/install-state.gz
|
||||
|
||||
test-results
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -116,7 +116,9 @@ export default class RectangleSelection extends Module {
|
|||
* @param {number} pageY - Y coord of mouse
|
||||
*/
|
||||
public startSelection(pageX: number, pageY: number): void {
|
||||
const elemWhereSelectionStart = document.elementFromPoint(pageX - window.pageXOffset, pageY - window.pageYOffset);
|
||||
const scrollLeft = this.getScrollLeft();
|
||||
const scrollTop = this.getScrollTop();
|
||||
const elemWhereSelectionStart = document.elementFromPoint(pageX - scrollLeft, pageY - scrollTop);
|
||||
|
||||
if (!elemWhereSelectionStart) {
|
||||
return;
|
||||
|
|
@ -338,10 +340,10 @@ export default class RectangleSelection extends Module {
|
|||
if (!(this.inScrollZone && this.mousedown)) {
|
||||
return;
|
||||
}
|
||||
const lastOffset = window.pageYOffset;
|
||||
const lastOffset = this.getScrollTop();
|
||||
|
||||
window.scrollBy(0, speed);
|
||||
this.mouseY += window.pageYOffset - lastOffset;
|
||||
this.mouseY += this.getScrollTop() - lastOffset;
|
||||
setTimeout(() => {
|
||||
this.scrollVertical(speed);
|
||||
}, 0);
|
||||
|
|
@ -413,10 +415,13 @@ export default class RectangleSelection extends Module {
|
|||
return;
|
||||
}
|
||||
|
||||
this.overlayRectangle.style.left = `${this.startX - window.pageXOffset}px`;
|
||||
this.overlayRectangle.style.top = `${this.startY - window.pageYOffset}px`;
|
||||
this.overlayRectangle.style.bottom = `calc(100% - ${this.startY - window.pageYOffset}px)`;
|
||||
this.overlayRectangle.style.right = `calc(100% - ${this.startX - window.pageXOffset}px)`;
|
||||
const scrollLeft = this.getScrollLeft();
|
||||
const scrollTop = this.getScrollTop();
|
||||
|
||||
this.overlayRectangle.style.left = `${this.startX - scrollLeft}px`;
|
||||
this.overlayRectangle.style.top = `${this.startY - scrollTop}px`;
|
||||
this.overlayRectangle.style.bottom = `calc(100% - ${this.startY - scrollTop}px)`;
|
||||
this.overlayRectangle.style.right = `calc(100% - ${this.startX - scrollLeft}px)`;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -456,22 +461,25 @@ export default class RectangleSelection extends Module {
|
|||
return;
|
||||
}
|
||||
|
||||
const scrollLeft = this.getScrollLeft();
|
||||
const scrollTop = this.getScrollTop();
|
||||
|
||||
// Depending on the position of the mouse relative to the starting point,
|
||||
// change this.e distance from the desired edge of the screen*/
|
||||
if (this.mouseY >= this.startY) {
|
||||
this.overlayRectangle.style.top = `${this.startY - window.pageYOffset}px`;
|
||||
this.overlayRectangle.style.bottom = `calc(100% - ${this.mouseY - window.pageYOffset}px)`;
|
||||
this.overlayRectangle.style.top = `${this.startY - scrollTop}px`;
|
||||
this.overlayRectangle.style.bottom = `calc(100% - ${this.mouseY - scrollTop}px)`;
|
||||
} else {
|
||||
this.overlayRectangle.style.bottom = `calc(100% - ${this.startY - window.pageYOffset}px)`;
|
||||
this.overlayRectangle.style.top = `${this.mouseY - window.pageYOffset}px`;
|
||||
this.overlayRectangle.style.bottom = `calc(100% - ${this.startY - scrollTop}px)`;
|
||||
this.overlayRectangle.style.top = `${this.mouseY - scrollTop}px`;
|
||||
}
|
||||
|
||||
if (this.mouseX >= this.startX) {
|
||||
this.overlayRectangle.style.left = `${this.startX - window.pageXOffset}px`;
|
||||
this.overlayRectangle.style.right = `calc(100% - ${this.mouseX - window.pageXOffset}px)`;
|
||||
this.overlayRectangle.style.left = `${this.startX - scrollLeft}px`;
|
||||
this.overlayRectangle.style.right = `calc(100% - ${this.mouseX - scrollLeft}px)`;
|
||||
} else {
|
||||
this.overlayRectangle.style.right = `calc(100% - ${this.startX - window.pageXOffset}px)`;
|
||||
this.overlayRectangle.style.left = `${this.mouseX - window.pageXOffset}px`;
|
||||
this.overlayRectangle.style.right = `calc(100% - ${this.startX - scrollLeft}px)`;
|
||||
this.overlayRectangle.style.left = `${this.mouseX - scrollLeft}px`;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -483,7 +491,8 @@ export default class RectangleSelection extends Module {
|
|||
private genInfoForMouseSelection(): {index: number | undefined; leftPos: number; rightPos: number} {
|
||||
const widthOfRedactor = document.body.offsetWidth;
|
||||
const centerOfRedactor = widthOfRedactor / 2;
|
||||
const y = this.mouseY - window.pageYOffset;
|
||||
const scrollTop = this.getScrollTop();
|
||||
const y = this.mouseY - scrollTop;
|
||||
const elementUnderMouse = document.elementFromPoint(centerOfRedactor, y);
|
||||
const lastBlockHolder = this.Editor.BlockManager.lastBlock?.holder;
|
||||
const contentElement = lastBlockHolder?.querySelector('.' + Block.CSS.content);
|
||||
|
|
@ -512,6 +521,28 @@ export default class RectangleSelection extends Module {
|
|||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Normalized vertical scroll value that does not rely on deprecated APIs.
|
||||
*/
|
||||
private getScrollTop(): number {
|
||||
if (typeof window.scrollY === 'number') {
|
||||
return window.scrollY;
|
||||
}
|
||||
|
||||
return document.documentElement?.scrollTop ?? document.body?.scrollTop ?? 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Normalized horizontal scroll value that does not rely on deprecated APIs.
|
||||
*/
|
||||
private getScrollLeft(): number {
|
||||
if (typeof window.scrollX === 'number') {
|
||||
return window.scrollX;
|
||||
}
|
||||
|
||||
return document.documentElement?.scrollLeft ?? document.body?.scrollLeft ?? 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Select block with index index
|
||||
*
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import Paragraph from '@editorjs/paragraph';
|
|||
import Module from '../__module';
|
||||
import * as _ from '../utils';
|
||||
import type { ChainData } from '../utils';
|
||||
import PromiseQueue from '../utils/promise-queue';
|
||||
import type { SanitizerConfig, ToolConfig, ToolConstructable, ToolSettings } from '../../../types';
|
||||
import BoldInlineTool from '../inline-tools/inline-tool-bold';
|
||||
import ItalicInlineTool from '../inline-tools/inline-tool-italic';
|
||||
|
|
@ -186,7 +187,22 @@ export default class Tools extends Module {
|
|||
this.toolPrepareMethodFallback({ toolName: data.toolName });
|
||||
};
|
||||
|
||||
await _.sequence(sequenceData, handlePrepareSuccess, handlePrepareFallback);
|
||||
const queue = new PromiseQueue();
|
||||
|
||||
sequenceData.forEach(chainData => {
|
||||
void queue.add(async () => {
|
||||
const callbackData = !_.isUndefined(chainData.data) ? chainData.data : {};
|
||||
|
||||
try {
|
||||
await chainData.function(chainData.data);
|
||||
handlePrepareSuccess(callbackData);
|
||||
} catch (error) {
|
||||
handlePrepareFallback(callbackData);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
await queue.completed;
|
||||
|
||||
this.prepareBlockTools();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -526,17 +526,19 @@ export default class UI extends Module<UINodes> {
|
|||
* @param {KeyboardEvent} event - keyboard event
|
||||
*/
|
||||
private documentKeydown(event: KeyboardEvent): void {
|
||||
switch (event.keyCode) {
|
||||
case _.keyCodes.ENTER:
|
||||
const key = event.key ?? '';
|
||||
|
||||
switch (key) {
|
||||
case 'Enter':
|
||||
this.enterPressed(event);
|
||||
break;
|
||||
|
||||
case _.keyCodes.BACKSPACE:
|
||||
case _.keyCodes.DELETE:
|
||||
case 'Backspace':
|
||||
case 'Delete':
|
||||
this.backspacePressed(event);
|
||||
break;
|
||||
|
||||
case _.keyCodes.ESC:
|
||||
case 'Escape':
|
||||
this.escapePressed(event);
|
||||
break;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,116 +1,14 @@
|
|||
'use strict';
|
||||
|
||||
/**
|
||||
* Extend Element interface to include prefixed and experimental properties
|
||||
*/
|
||||
interface Element {
|
||||
matchesSelector: (selector: string) => boolean;
|
||||
mozMatchesSelector: (selector: string) => boolean;
|
||||
msMatchesSelector: (selector: string) => boolean;
|
||||
oMatchesSelector: (selector: string) => boolean;
|
||||
|
||||
prepend: (...nodes: Array<string | Node>) => void;
|
||||
append: (...nodes: Array<string | Node>) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* The Element.matches() method returns true if the element
|
||||
* would be selected by the specified selector string;
|
||||
* otherwise, returns false.
|
||||
*
|
||||
* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Polyfill}
|
||||
* @param {string} s - selector
|
||||
*/
|
||||
if (typeof Element.prototype.matches === 'undefined') {
|
||||
const proto = Element.prototype as Element & {
|
||||
matchesSelector?: (selector: string) => boolean;
|
||||
mozMatchesSelector?: (selector: string) => boolean;
|
||||
msMatchesSelector?: (selector: string) => boolean;
|
||||
oMatchesSelector?: (selector: string) => boolean;
|
||||
webkitMatchesSelector?: (selector: string) => boolean;
|
||||
};
|
||||
|
||||
Element.prototype.matches = proto.matchesSelector ??
|
||||
proto.mozMatchesSelector ??
|
||||
proto.msMatchesSelector ??
|
||||
proto.oMatchesSelector ??
|
||||
proto.webkitMatchesSelector ??
|
||||
function (this: Element, s: string): boolean {
|
||||
const doc = this.ownerDocument;
|
||||
const matches = doc.querySelectorAll(s);
|
||||
const index = Array.from(matches).findIndex(match => match === this);
|
||||
|
||||
return index !== -1;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* The Element.closest() method returns the closest ancestor
|
||||
* of the current element (or the current element itself) which
|
||||
* matches the selectors given in parameter.
|
||||
* If there isn't such an ancestor, it returns null.
|
||||
*
|
||||
* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill}
|
||||
* @param {string} s - selector
|
||||
*/
|
||||
if (typeof Element.prototype.closest === 'undefined') {
|
||||
Element.prototype.closest = function (this: Element, s: string): Element | null {
|
||||
// eslint-disable-next-line @typescript-eslint/no-this-alias
|
||||
const startEl: Element = this;
|
||||
|
||||
if (!document.documentElement.contains(startEl)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const findClosest = (el: Element | null): Element | null => {
|
||||
if (el === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (el.matches(s)) {
|
||||
return el;
|
||||
}
|
||||
|
||||
const parent: ParentNode | null = el.parentElement || el.parentNode;
|
||||
|
||||
return findClosest(parent instanceof Element ? parent : null);
|
||||
};
|
||||
|
||||
return findClosest(startEl);
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* The ParentNode.prepend method inserts a set of Node objects
|
||||
* or DOMString objects before the first child of the ParentNode.
|
||||
* DOMString objects are inserted as equivalent Text nodes.
|
||||
*
|
||||
* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/prepend#Polyfill}
|
||||
* @param {Node | Node[] | string | string[]} nodes - nodes to prepend
|
||||
*/
|
||||
if (typeof Element.prototype.prepend === 'undefined') {
|
||||
Element.prototype.prepend = function prepend(nodes: Array<Node | string> | Node | string): void {
|
||||
const docFrag = document.createDocumentFragment();
|
||||
|
||||
const nodesArray = Array.isArray(nodes) ? nodes : [ nodes ];
|
||||
|
||||
nodesArray.forEach((node: Node | string) => {
|
||||
const isNode = node instanceof Node;
|
||||
|
||||
docFrag.appendChild(isNode ? node as Node : document.createTextNode(node as string));
|
||||
});
|
||||
|
||||
this.insertBefore(docFrag, this.firstChild);
|
||||
};
|
||||
}
|
||||
|
||||
interface Element {
|
||||
/**
|
||||
* Scrolls the current element into the visible area of the browser window
|
||||
*
|
||||
* @param centerIfNeeded - true, if the element should be aligned so it is centered within the visible area of the scrollable ancestor.
|
||||
*/
|
||||
scrollIntoViewIfNeeded(centerIfNeeded?: boolean): void;
|
||||
declare global {
|
||||
interface Element {
|
||||
/**
|
||||
* Scrolls the current element into the visible area of the browser window
|
||||
*
|
||||
* @param centerIfNeeded - true, if the element should be aligned so it is centered within the visible area of the scrollable ancestor.
|
||||
*/
|
||||
scrollIntoViewIfNeeded(centerIfNeeded?: boolean): void;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -214,3 +112,5 @@ if (typeof window.cancelIdleCallback === 'undefined') {
|
|||
globalThis.clearTimeout(id);
|
||||
};
|
||||
}
|
||||
|
||||
export {};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import * as _ from '../utils';
|
||||
import { BlockToolAPI } from '../block';
|
||||
import Shortcuts from '../utils/shortcuts';
|
||||
import type BlockToolAdapter from '../tools/block';
|
||||
import type ToolsCollection from '../tools/collection';
|
||||
|
|
@ -436,11 +435,6 @@ export default class Toolbox extends EventsDispatcher<ToolboxEventMap> {
|
|||
currentBlock.isEmpty
|
||||
);
|
||||
|
||||
/**
|
||||
* Apply callback before inserting html
|
||||
*/
|
||||
newBlock.call(BlockToolAPI.APPEND_CALLBACK);
|
||||
|
||||
this.api.caret.setToBlock(index);
|
||||
|
||||
this.emit(ToolboxEvent.BlockAdded, {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,18 @@
|
|||
*/
|
||||
|
||||
import { nanoid } from 'nanoid';
|
||||
import lodashDelay from 'lodash/delay';
|
||||
import lodashIsBoolean from 'lodash/isBoolean';
|
||||
import lodashIsEmpty from 'lodash/isEmpty';
|
||||
import lodashIsEqual from 'lodash/isEqual';
|
||||
import lodashIsFunction from 'lodash/isFunction';
|
||||
import lodashIsNumber from 'lodash/isNumber';
|
||||
import lodashIsPlainObject from 'lodash/isPlainObject';
|
||||
import lodashIsString from 'lodash/isString';
|
||||
import lodashIsUndefined from 'lodash/isUndefined';
|
||||
import lodashMergeWith from 'lodash/mergeWith';
|
||||
import lodashThrottle from 'lodash/throttle';
|
||||
import lodashToArray from 'lodash/toArray';
|
||||
|
||||
/**
|
||||
* Possible log levels
|
||||
|
|
@ -141,17 +153,6 @@ const getGlobalWindow = (): Window | undefined => {
|
|||
return undefined;
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns globally available document object if it exists.
|
||||
*/
|
||||
const getGlobalDocument = (): Document | undefined => {
|
||||
if (globalScope?.document) {
|
||||
return globalScope.document;
|
||||
}
|
||||
|
||||
return undefined;
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns globally available navigator object if it exists.
|
||||
*/
|
||||
|
|
@ -312,18 +313,6 @@ export const logLabeled = (
|
|||
_log(true, msg, type, args, style);
|
||||
};
|
||||
|
||||
/**
|
||||
* Return string representation of the object type
|
||||
*
|
||||
* @param {*} object - object to get type
|
||||
* @returns {string}
|
||||
*/
|
||||
export const typeOf = (object: unknown): string => {
|
||||
const match = Object.prototype.toString.call(object).match(/\s([a-zA-Z]+)/);
|
||||
|
||||
return match ? match[1].toLowerCase() : 'unknown';
|
||||
};
|
||||
|
||||
/**
|
||||
* Check if passed variable is a function
|
||||
*
|
||||
|
|
@ -331,7 +320,7 @@ export const typeOf = (object: unknown): string => {
|
|||
* @returns {boolean}
|
||||
*/
|
||||
export const isFunction = (fn: unknown): fn is (...args: unknown[]) => unknown => {
|
||||
return typeOf(fn) === 'function' || typeOf(fn) === 'asyncfunction';
|
||||
return lodashIsFunction(fn);
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -341,7 +330,7 @@ export const isFunction = (fn: unknown): fn is (...args: unknown[]) => unknown =
|
|||
* @returns {boolean}
|
||||
*/
|
||||
export const isObject = (v: unknown): v is object => {
|
||||
return typeOf(v) === 'object';
|
||||
return lodashIsPlainObject(v);
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -351,7 +340,7 @@ export const isObject = (v: unknown): v is object => {
|
|||
* @returns {boolean}
|
||||
*/
|
||||
export const isString = (v: unknown): v is string => {
|
||||
return typeOf(v) === 'string';
|
||||
return lodashIsString(v);
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -361,7 +350,7 @@ export const isString = (v: unknown): v is string => {
|
|||
* @returns {boolean}
|
||||
*/
|
||||
export const isBoolean = (v: unknown): v is boolean => {
|
||||
return typeOf(v) === 'boolean';
|
||||
return lodashIsBoolean(v);
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -371,7 +360,7 @@ export const isBoolean = (v: unknown): v is boolean => {
|
|||
* @returns {boolean}
|
||||
*/
|
||||
export const isNumber = (v: unknown): v is number => {
|
||||
return typeOf(v) === 'number';
|
||||
return lodashIsNumber(v);
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -381,17 +370,7 @@ export const isNumber = (v: unknown): v is number => {
|
|||
* @returns {boolean}
|
||||
*/
|
||||
export const isUndefined = function (v: unknown): v is undefined {
|
||||
return typeOf(v) === 'undefined';
|
||||
};
|
||||
|
||||
/**
|
||||
* Check if passed function is a class
|
||||
*
|
||||
* @param {Function} fn - function to check
|
||||
* @returns {boolean}
|
||||
*/
|
||||
export const isClass = (fn: unknown): boolean => {
|
||||
return isFunction(fn) && /^\s*class\s+/.test(fn.toString());
|
||||
return lodashIsUndefined(v);
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -401,21 +380,7 @@ export const isClass = (fn: unknown): boolean => {
|
|||
* @returns {boolean}
|
||||
*/
|
||||
export const isEmpty = (object: object | null | undefined): boolean => {
|
||||
if (!object) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return Object.keys(object).length === 0 && object.constructor === Object;
|
||||
};
|
||||
|
||||
/**
|
||||
* Check if passed object is a Promise
|
||||
*
|
||||
* @param {*} object - object to check
|
||||
* @returns {boolean}
|
||||
*/
|
||||
export const isPromise = (object: unknown): object is Promise<unknown> => {
|
||||
return Promise.resolve(object) === object;
|
||||
return lodashIsEmpty(object);
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -491,7 +456,7 @@ export const sequence = async (
|
|||
*/
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
export const array = (collection: ArrayLike<any>): any[] => {
|
||||
return Array.prototype.slice.call(collection);
|
||||
return lodashToArray(collection);
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -502,7 +467,7 @@ export const array = (collection: ArrayLike<any>): any[] => {
|
|||
*/
|
||||
export const delay = (method: (...args: unknown[]) => unknown, timeout: number) => {
|
||||
return function (this: unknown, ...args: unknown[]): void {
|
||||
setTimeout(() => method.apply(this, args), timeout);
|
||||
void lodashDelay(() => method.apply(this, args), timeout);
|
||||
};
|
||||
};
|
||||
|
||||
|
|
@ -572,130 +537,12 @@ export const debounce = (func: (...args: unknown[]) => void, wait?: number, imme
|
|||
* but if you'd like to disable the execution on the leading edge, pass
|
||||
* `{leading: false}`. To disable execution on the trailing edge, ditto.
|
||||
*/
|
||||
export const throttle = (func: (...args: unknown[]) => unknown, wait: number, options?: {leading?: boolean; trailing?: boolean}): (...args: unknown[]) => unknown => {
|
||||
const state: {
|
||||
args: unknown[] | null;
|
||||
result: unknown;
|
||||
timeoutId: ReturnType<typeof setTimeout> | null;
|
||||
previous: number;
|
||||
boundFunc: ((...boundArgs: unknown[]) => unknown) | null;
|
||||
} = {
|
||||
args: null,
|
||||
result: undefined,
|
||||
timeoutId: null,
|
||||
previous: 0,
|
||||
boundFunc: null,
|
||||
};
|
||||
|
||||
const opts = options || {};
|
||||
|
||||
const later = function (): void {
|
||||
state.previous = opts.leading === false ? 0 : Date.now();
|
||||
state.timeoutId = null;
|
||||
if (state.args !== null && state.boundFunc !== null) {
|
||||
state.result = state.boundFunc(...state.args);
|
||||
}
|
||||
|
||||
state.boundFunc = null;
|
||||
state.args = null;
|
||||
};
|
||||
|
||||
return function (this: unknown, ...restArgs: unknown[]): unknown {
|
||||
const now = Date.now();
|
||||
|
||||
if (!state.previous && opts.leading === false) {
|
||||
state.previous = now;
|
||||
}
|
||||
|
||||
const remaining = wait - (now - state.previous);
|
||||
|
||||
state.boundFunc = func.bind(this);
|
||||
state.args = restArgs;
|
||||
|
||||
const shouldInvokeNow = remaining <= 0 || remaining > wait;
|
||||
|
||||
if (!shouldInvokeNow && state.timeoutId === null && opts.trailing !== false) {
|
||||
state.timeoutId = setTimeout(later, remaining);
|
||||
}
|
||||
|
||||
if (!shouldInvokeNow) {
|
||||
return state.result;
|
||||
}
|
||||
|
||||
if (state.timeoutId !== null) {
|
||||
clearTimeout(state.timeoutId);
|
||||
state.timeoutId = null;
|
||||
}
|
||||
|
||||
state.previous = now;
|
||||
|
||||
if (state.args !== null && state.boundFunc !== null) {
|
||||
state.result = state.boundFunc(...state.args);
|
||||
}
|
||||
|
||||
state.boundFunc = null;
|
||||
state.args = null;
|
||||
|
||||
return state.result;
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Legacy fallback method for copying text to clipboard
|
||||
*
|
||||
* @param text - text to copy
|
||||
*/
|
||||
const fallbackCopyTextToClipboard = (text: string): void => {
|
||||
const win = getGlobalWindow();
|
||||
const doc = getGlobalDocument();
|
||||
|
||||
if (!win || !doc || !doc.body) {
|
||||
return;
|
||||
}
|
||||
|
||||
const el = doc.createElement('div');
|
||||
|
||||
el.className = 'codex-editor-clipboard';
|
||||
el.innerHTML = text;
|
||||
|
||||
doc.body.appendChild(el);
|
||||
|
||||
const selection = win.getSelection();
|
||||
const range = doc.createRange();
|
||||
|
||||
range.selectNode(el);
|
||||
|
||||
win.getSelection()?.removeAllRanges();
|
||||
selection?.addRange(range);
|
||||
|
||||
if (typeof doc.execCommand === 'function') {
|
||||
doc.execCommand('copy');
|
||||
}
|
||||
|
||||
doc.body.removeChild(el);
|
||||
};
|
||||
|
||||
/**
|
||||
* Copies passed text to the clipboard
|
||||
*
|
||||
* @param text - text to copy
|
||||
*/
|
||||
export const copyTextToClipboard = (text: string): void => {
|
||||
const win = getGlobalWindow();
|
||||
const navigatorRef = getGlobalNavigator();
|
||||
|
||||
// Use modern Clipboard API if available
|
||||
if (win?.isSecureContext && navigatorRef?.clipboard) {
|
||||
navigatorRef.clipboard.writeText(text).catch(() => {
|
||||
// Fallback to legacy method if Clipboard API fails
|
||||
fallbackCopyTextToClipboard(text);
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Fallback to legacy method for older browsers
|
||||
fallbackCopyTextToClipboard(text);
|
||||
export const throttle = (
|
||||
func: (...args: unknown[]) => unknown,
|
||||
wait: number,
|
||||
options?: {leading?: boolean; trailing?: boolean}
|
||||
): ((...args: unknown[]) => unknown) => {
|
||||
return lodashThrottle(func, wait, options);
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -710,7 +557,7 @@ export const getUserOS = (): {[key: string]: boolean} => {
|
|||
};
|
||||
|
||||
const navigatorRef = getGlobalNavigator();
|
||||
const userAgent = navigatorRef?.appVersion?.toLowerCase() ?? '';
|
||||
const userAgent = navigatorRef?.userAgent?.toLowerCase() ?? '';
|
||||
const userOS = userAgent ? Object.keys(OS).find((os: string) => userAgent.indexOf(os) !== -1) : undefined;
|
||||
|
||||
if (userOS !== undefined) {
|
||||
|
|
@ -729,73 +576,42 @@ export const getUserOS = (): {[key: string]: boolean} => {
|
|||
* @returns {string}
|
||||
*/
|
||||
export const capitalize = (text: string): string => {
|
||||
return text[0].toUpperCase() + text.slice(1);
|
||||
if (!text) {
|
||||
return text;
|
||||
}
|
||||
|
||||
return text.slice(0, 1).toUpperCase() + text.slice(1);
|
||||
};
|
||||
|
||||
/**
|
||||
* Merge to objects recursively
|
||||
* Customizer function for deep merge that overwrites arrays
|
||||
*
|
||||
* @param {object} target - merge target
|
||||
* @param {object[]} sources - merge sources
|
||||
* @returns {object}
|
||||
* @param {unknown} objValue - object value
|
||||
* @param {unknown} srcValue - source value
|
||||
* @returns {unknown}
|
||||
*/
|
||||
const overwriteArrayMerge = (objValue: unknown, srcValue: unknown): unknown => {
|
||||
if (Array.isArray(srcValue)) {
|
||||
return srcValue;
|
||||
}
|
||||
|
||||
return undefined;
|
||||
};
|
||||
|
||||
export const deepMerge = <T extends object> (target: T, ...sources: Partial<T>[]): T => {
|
||||
if (sources.length === 0) {
|
||||
if (!isObject(target) || sources.length === 0) {
|
||||
return target;
|
||||
}
|
||||
|
||||
const [source, ...rest] = sources;
|
||||
|
||||
if (!isObject(target) || !isObject(source)) {
|
||||
return deepMerge(target, ...rest);
|
||||
}
|
||||
|
||||
const targetRecord = target as Record<string, unknown>;
|
||||
|
||||
Object.entries(source).forEach(([key, value]) => {
|
||||
if (value === null || value === undefined) {
|
||||
targetRecord[key] = value as unknown;
|
||||
|
||||
return;
|
||||
return sources.reduce((acc: T, source) => {
|
||||
if (!isObject(source)) {
|
||||
return acc;
|
||||
}
|
||||
|
||||
if (typeof value !== 'object') {
|
||||
targetRecord[key] = value;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (Array.isArray(value)) {
|
||||
targetRecord[key] = value;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isObject(targetRecord[key])) {
|
||||
targetRecord[key] = {};
|
||||
}
|
||||
|
||||
deepMerge(targetRecord[key] as object, value as object);
|
||||
});
|
||||
|
||||
return deepMerge(target, ...rest);
|
||||
return lodashMergeWith(acc, source, overwriteArrayMerge) as T;
|
||||
}, target);
|
||||
};
|
||||
|
||||
/**
|
||||
* Return true if current device supports touch events
|
||||
*
|
||||
* Note! This is a simple solution, it can give false-positive results.
|
||||
* To detect touch devices more carefully, use 'touchstart' event listener
|
||||
*
|
||||
* @see http://www.stucox.com/blog/you-cant-detect-a-touchscreen/
|
||||
* @returns {boolean}
|
||||
*/
|
||||
export const isTouchSupported: boolean = (() => {
|
||||
const doc = getGlobalDocument();
|
||||
|
||||
return Boolean(doc?.documentElement && 'ontouchstart' in doc.documentElement);
|
||||
})();
|
||||
|
||||
/**
|
||||
* Make shortcut command more human-readable
|
||||
*
|
||||
|
|
@ -1168,12 +984,5 @@ export const isIosDevice = (() => {
|
|||
* @returns {boolean} true if they are equal
|
||||
*/
|
||||
export const equals = (var1: unknown, var2: unknown): boolean => {
|
||||
const isVar1NonPrimitive = Array.isArray(var1) || isObject(var1);
|
||||
const isVar2NonPrimitive = Array.isArray(var2) || isObject(var2);
|
||||
|
||||
if (isVar1NonPrimitive || isVar2NonPrimitive) {
|
||||
return JSON.stringify(var1) === JSON.stringify(var2);
|
||||
}
|
||||
|
||||
return var1 === var2;
|
||||
return lodashIsEqual(var1, var2);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@ export default class ScrollLocker {
|
|||
* Locks scroll in a hard way (via setting fixed position to body element)
|
||||
*/
|
||||
private lockHard(): void {
|
||||
// eslint-disable-next-line deprecation/deprecation
|
||||
this.scrollPosition = window.pageYOffset;
|
||||
document.documentElement.style.setProperty(
|
||||
'--window-scroll-offset',
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { afterEach, beforeAll, beforeEach, describe, expect, it, vi, type Mock }
|
|||
|
||||
import RectangleSelection from '../../../../src/components/modules/rectangleSelection';
|
||||
import Block from '../../../../src/components/block';
|
||||
import SelectionUtils from '../../../../src/components/selection';
|
||||
import EventsDispatcher from '../../../../src/components/utils/events';
|
||||
import type { EditorEventMap } from '../../../../src/components/events';
|
||||
import type { EditorModules } from '../../../../src/types-internal/editor-modules';
|
||||
|
|
@ -257,6 +258,58 @@ describe('RectangleSelection', () => {
|
|||
elementFromPointSpy.mockRestore();
|
||||
});
|
||||
|
||||
it('ignores selection attempts outside of selectable area', () => {
|
||||
const {
|
||||
rectangleSelection,
|
||||
editorWrapper,
|
||||
} = createRectangleSelection();
|
||||
|
||||
const internal = rectangleSelection as unknown as { mousedown: boolean };
|
||||
|
||||
const outsideNode = document.createElement('div');
|
||||
|
||||
document.body.appendChild(outsideNode);
|
||||
|
||||
const elementFromPointSpy = vi.spyOn(document, 'elementFromPoint').mockReturnValue(outsideNode);
|
||||
|
||||
rectangleSelection.startSelection(10, 15);
|
||||
|
||||
expect(internal.mousedown).toBe(false);
|
||||
|
||||
const blockContent = document.createElement('div');
|
||||
|
||||
blockContent.className = Block.CSS.content;
|
||||
editorWrapper.appendChild(blockContent);
|
||||
elementFromPointSpy.mockReturnValue(blockContent);
|
||||
|
||||
rectangleSelection.startSelection(20, 25);
|
||||
|
||||
expect(internal.mousedown).toBe(false);
|
||||
|
||||
elementFromPointSpy.mockRestore();
|
||||
});
|
||||
|
||||
it('clears selection activation flag when clearSelection is called', () => {
|
||||
const { rectangleSelection } = createRectangleSelection();
|
||||
const internal = rectangleSelection as unknown as { isRectSelectionActivated: boolean };
|
||||
|
||||
internal.isRectSelectionActivated = true;
|
||||
rectangleSelection.clearSelection();
|
||||
|
||||
expect(internal.isRectSelectionActivated).toBe(false);
|
||||
});
|
||||
|
||||
it('reports whether rectangle selection is active', () => {
|
||||
const { rectangleSelection } = createRectangleSelection();
|
||||
const internal = rectangleSelection as unknown as { isRectSelectionActivated: boolean };
|
||||
|
||||
internal.isRectSelectionActivated = false;
|
||||
expect(rectangleSelection.isRectActivated()).toBe(false);
|
||||
|
||||
internal.isRectSelectionActivated = true;
|
||||
expect(rectangleSelection.isRectActivated()).toBe(true);
|
||||
});
|
||||
|
||||
it('resets selection parameters on endSelection', () => {
|
||||
const {
|
||||
rectangleSelection,
|
||||
|
|
@ -346,6 +399,45 @@ describe('RectangleSelection', () => {
|
|||
expect(scrollSpy).toHaveBeenCalledWith(320);
|
||||
});
|
||||
|
||||
it('updates rectangle on scroll events', () => {
|
||||
const {
|
||||
rectangleSelection,
|
||||
} = createRectangleSelection();
|
||||
|
||||
const internal = rectangleSelection as unknown as {
|
||||
processScroll: (event: MouseEvent) => void;
|
||||
changingRectangle: (event: MouseEvent) => void;
|
||||
};
|
||||
|
||||
const changeSpy = vi.spyOn(internal, 'changingRectangle');
|
||||
const scrollEvent = { pageX: 50,
|
||||
pageY: 75 } as unknown as MouseEvent;
|
||||
|
||||
internal.processScroll(scrollEvent);
|
||||
|
||||
expect(changeSpy).toHaveBeenCalledWith(scrollEvent);
|
||||
});
|
||||
|
||||
it('stops scrolling when cursor leaves scroll zones', () => {
|
||||
const { rectangleSelection } = createRectangleSelection();
|
||||
const internal = rectangleSelection as unknown as {
|
||||
scrollByZones: (clientY: number) => void;
|
||||
isScrolling: boolean;
|
||||
inScrollZone: number | null;
|
||||
};
|
||||
|
||||
Object.defineProperty(document.documentElement, 'clientHeight', {
|
||||
configurable: true,
|
||||
value: 1000,
|
||||
});
|
||||
|
||||
internal.isScrolling = true;
|
||||
internal.scrollByZones(200);
|
||||
|
||||
expect(internal.isScrolling).toBe(false);
|
||||
expect(internal.inScrollZone).toBeNull();
|
||||
});
|
||||
|
||||
it('triggers vertical scrolling when mouse enters scroll zones', () => {
|
||||
const {
|
||||
rectangleSelection,
|
||||
|
|
@ -374,6 +466,75 @@ describe('RectangleSelection', () => {
|
|||
expect(scrollSpy).toHaveBeenCalledWith(3);
|
||||
});
|
||||
|
||||
it('scrolls vertically while mouse button is pressed in a scroll zone', () => {
|
||||
const { rectangleSelection } = createRectangleSelection();
|
||||
const internal = rectangleSelection as unknown as {
|
||||
scrollVertical: (speed: number) => void;
|
||||
inScrollZone: number | null;
|
||||
mousedown: boolean;
|
||||
mouseY: number;
|
||||
};
|
||||
|
||||
vi.useFakeTimers();
|
||||
|
||||
internal.inScrollZone = 1;
|
||||
internal.mousedown = true;
|
||||
internal.mouseY = 100;
|
||||
|
||||
let yOffset = 0;
|
||||
|
||||
const scrollYSpy = vi.spyOn(window, 'scrollY', 'get').mockImplementation(() => yOffset);
|
||||
|
||||
const scrollBySpy = vi.spyOn(window, 'scrollBy').mockImplementation((_x, y) => {
|
||||
yOffset += y;
|
||||
});
|
||||
|
||||
internal.scrollVertical(5);
|
||||
|
||||
internal.inScrollZone = null;
|
||||
vi.runOnlyPendingTimers();
|
||||
vi.useRealTimers();
|
||||
|
||||
expect(scrollBySpy).toHaveBeenCalledWith(0, 5);
|
||||
expect(internal.mouseY).toBe(105);
|
||||
|
||||
scrollBySpy.mockRestore();
|
||||
scrollYSpy.mockRestore();
|
||||
});
|
||||
|
||||
it('shrinks overlay rectangle to the starting point', () => {
|
||||
const {
|
||||
rectangleSelection,
|
||||
editorWrapper,
|
||||
} = createRectangleSelection();
|
||||
|
||||
rectangleSelection.prepare();
|
||||
|
||||
const internal = rectangleSelection as unknown as {
|
||||
shrinkRectangleToPoint: () => void;
|
||||
overlayRectangle: HTMLDivElement;
|
||||
startX: number;
|
||||
startY: number;
|
||||
};
|
||||
|
||||
internal.overlayRectangle = editorWrapper.querySelector(`.${RectangleSelection.CSS.rect}`) as HTMLDivElement;
|
||||
internal.startX = 150;
|
||||
internal.startY = 260;
|
||||
|
||||
const scrollXSpy = vi.spyOn(window, 'scrollX', 'get').mockReturnValue(10);
|
||||
const scrollYSpy = vi.spyOn(window, 'scrollY', 'get').mockReturnValue(20);
|
||||
|
||||
internal.shrinkRectangleToPoint();
|
||||
|
||||
expect(internal.overlayRectangle.style.left).toBe('140px');
|
||||
expect(internal.overlayRectangle.style.top).toBe('240px');
|
||||
expect(internal.overlayRectangle.style.bottom).toBe('calc(100% - 240px)');
|
||||
expect(internal.overlayRectangle.style.right).toBe('calc(100% - 140px)');
|
||||
|
||||
scrollXSpy.mockRestore();
|
||||
scrollYSpy.mockRestore();
|
||||
});
|
||||
|
||||
it('selects or unselects blocks based on rectangle overlap', () => {
|
||||
const {
|
||||
rectangleSelection,
|
||||
|
|
@ -411,6 +572,32 @@ describe('RectangleSelection', () => {
|
|||
expect(blockSelection.selectBlockByIndex).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('adds blocks to selection stack via addBlockInSelection', () => {
|
||||
const {
|
||||
rectangleSelection,
|
||||
blockSelection,
|
||||
} = createRectangleSelection();
|
||||
|
||||
const internal = rectangleSelection as unknown as {
|
||||
rectCrossesBlocks: boolean;
|
||||
stackOfSelected: number[];
|
||||
addBlockInSelection: (index: number) => void;
|
||||
};
|
||||
|
||||
internal.rectCrossesBlocks = true;
|
||||
internal.addBlockInSelection(2);
|
||||
|
||||
expect(blockSelection.selectBlockByIndex).toHaveBeenCalledWith(2);
|
||||
expect(internal.stackOfSelected).toEqual([ 2 ]);
|
||||
|
||||
blockSelection.selectBlockByIndex.mockClear();
|
||||
internal.rectCrossesBlocks = false;
|
||||
internal.addBlockInSelection(3);
|
||||
|
||||
expect(blockSelection.selectBlockByIndex).not.toHaveBeenCalled();
|
||||
expect(internal.stackOfSelected).toEqual([2, 3]);
|
||||
});
|
||||
|
||||
it('updates rectangle size based on cursor position', () => {
|
||||
const {
|
||||
rectangleSelection,
|
||||
|
|
@ -487,6 +674,110 @@ describe('RectangleSelection', () => {
|
|||
elementFromPointSpy.mockRestore();
|
||||
});
|
||||
|
||||
it('activates rectangle selection and updates state when cursor moves with pressed mouse', () => {
|
||||
const {
|
||||
rectangleSelection,
|
||||
toolbar,
|
||||
editorWrapper,
|
||||
} = createRectangleSelection();
|
||||
|
||||
rectangleSelection.prepare();
|
||||
|
||||
const internal = rectangleSelection as unknown as {
|
||||
changingRectangle: (event: MouseEvent) => void;
|
||||
mousedown: boolean;
|
||||
isRectSelectionActivated: boolean;
|
||||
overlayRectangle: HTMLDivElement;
|
||||
};
|
||||
|
||||
internal.mousedown = true;
|
||||
internal.isRectSelectionActivated = false;
|
||||
internal.overlayRectangle = editorWrapper.querySelector(`.${RectangleSelection.CSS.rect}`) as HTMLDivElement;
|
||||
|
||||
const genInfoSpy = vi.spyOn(
|
||||
rectangleSelection as unknown as { genInfoForMouseSelection: () => { rightPos: number; leftPos: number; index: number } },
|
||||
'genInfoForMouseSelection'
|
||||
).mockReturnValue({
|
||||
leftPos: 0,
|
||||
rightPos: 500,
|
||||
index: 1,
|
||||
});
|
||||
const trySelectSpy = vi.spyOn(
|
||||
rectangleSelection as unknown as { trySelectNextBlock: (index: number) => void },
|
||||
'trySelectNextBlock'
|
||||
);
|
||||
const inverseSpy = vi.spyOn(
|
||||
rectangleSelection as unknown as { inverseSelection: () => void },
|
||||
'inverseSelection'
|
||||
);
|
||||
const selectionRemove = vi.fn();
|
||||
const selectionSpy = vi.spyOn(SelectionUtils, 'get').mockReturnValue({
|
||||
removeAllRanges: selectionRemove,
|
||||
} as unknown as Selection);
|
||||
|
||||
internal.changingRectangle({
|
||||
pageX: 200,
|
||||
pageY: 220,
|
||||
} as MouseEvent);
|
||||
|
||||
expect(internal.isRectSelectionActivated).toBe(true);
|
||||
expect(internal.overlayRectangle.style.display).toBe('block');
|
||||
expect(toolbar.close).toHaveBeenCalled();
|
||||
expect(trySelectSpy).toHaveBeenCalledWith(1);
|
||||
expect(inverseSpy).toHaveBeenCalled();
|
||||
expect(selectionRemove).toHaveBeenCalled();
|
||||
|
||||
genInfoSpy.mockRestore();
|
||||
selectionSpy.mockRestore();
|
||||
});
|
||||
|
||||
it('does not attempt block selection when no block is detected under cursor', () => {
|
||||
const {
|
||||
rectangleSelection,
|
||||
toolbar,
|
||||
editorWrapper,
|
||||
} = createRectangleSelection();
|
||||
|
||||
rectangleSelection.prepare();
|
||||
|
||||
const internal = rectangleSelection as unknown as {
|
||||
changingRectangle: (event: MouseEvent) => void;
|
||||
mousedown: boolean;
|
||||
isRectSelectionActivated: boolean;
|
||||
overlayRectangle: HTMLDivElement;
|
||||
};
|
||||
|
||||
internal.mousedown = true;
|
||||
internal.isRectSelectionActivated = true;
|
||||
internal.overlayRectangle = editorWrapper.querySelector(`.${RectangleSelection.CSS.rect}`) as HTMLDivElement;
|
||||
|
||||
const genInfoSpy = vi.spyOn(
|
||||
rectangleSelection as unknown as { genInfoForMouseSelection: () => { rightPos: number; leftPos: number; index: number | undefined } },
|
||||
'genInfoForMouseSelection'
|
||||
).mockReturnValue({
|
||||
leftPos: 0,
|
||||
rightPos: 500,
|
||||
index: undefined,
|
||||
});
|
||||
const trySelectSpy = vi.spyOn(
|
||||
rectangleSelection as unknown as { trySelectNextBlock: (index: number) => void },
|
||||
'trySelectNextBlock'
|
||||
);
|
||||
const selectionSpy = vi.spyOn(SelectionUtils, 'get');
|
||||
|
||||
internal.changingRectangle({
|
||||
pageX: 120,
|
||||
pageY: 140,
|
||||
} as MouseEvent);
|
||||
|
||||
expect(toolbar.close).toHaveBeenCalled();
|
||||
expect(trySelectSpy).not.toHaveBeenCalled();
|
||||
expect(selectionSpy).not.toHaveBeenCalled();
|
||||
|
||||
genInfoSpy.mockRestore();
|
||||
selectionSpy.mockRestore();
|
||||
});
|
||||
|
||||
it('clears selection state on mouse leave and mouse up events', () => {
|
||||
const {
|
||||
rectangleSelection,
|
||||
|
|
@ -510,6 +801,49 @@ describe('RectangleSelection', () => {
|
|||
expect(clearSpy).toHaveBeenCalledTimes(2);
|
||||
expect(endSpy).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
|
||||
it('extends selection to skipped blocks in downward direction', () => {
|
||||
const {
|
||||
rectangleSelection,
|
||||
blockSelection,
|
||||
} = createRectangleSelection();
|
||||
|
||||
const internal = rectangleSelection as unknown as {
|
||||
stackOfSelected: number[];
|
||||
rectCrossesBlocks: boolean;
|
||||
trySelectNextBlock: (index: number) => void;
|
||||
};
|
||||
|
||||
internal.stackOfSelected.push(0, 1);
|
||||
internal.rectCrossesBlocks = true;
|
||||
|
||||
internal.trySelectNextBlock(4);
|
||||
|
||||
expect(internal.stackOfSelected).toEqual([0, 1, 2, 3, 4]);
|
||||
expect(blockSelection.selectBlockByIndex).toHaveBeenCalledWith(2);
|
||||
expect(blockSelection.selectBlockByIndex).toHaveBeenCalledWith(3);
|
||||
expect(blockSelection.selectBlockByIndex).toHaveBeenCalledWith(4);
|
||||
});
|
||||
|
||||
it('shrinks selection stack when cursor moves backwards', () => {
|
||||
const {
|
||||
rectangleSelection,
|
||||
blockSelection,
|
||||
} = createRectangleSelection();
|
||||
|
||||
const internal = rectangleSelection as unknown as {
|
||||
stackOfSelected: number[];
|
||||
rectCrossesBlocks: boolean;
|
||||
trySelectNextBlock: (index: number) => void;
|
||||
};
|
||||
|
||||
internal.stackOfSelected.push(0, 1, 2, 3);
|
||||
internal.rectCrossesBlocks = true;
|
||||
|
||||
internal.trySelectNextBlock(1);
|
||||
|
||||
expect(internal.stackOfSelected).toEqual([0, 1]);
|
||||
expect(blockSelection.unSelectBlockByIndex).toHaveBeenCalledWith(3);
|
||||
expect(blockSelection.unSelectBlockByIndex).toHaveBeenCalledWith(2);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
100
test/unit/components/utils/scroll-locker.test.ts
Normal file
100
test/unit/components/utils/scroll-locker.test.ts
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import ScrollLocker from '../../../../src/components/utils/scroll-locker';
|
||||
|
||||
const { getIsIosDeviceValue, setIsIosDeviceValue } = vi.hoisted(() => {
|
||||
let value = false;
|
||||
|
||||
return {
|
||||
getIsIosDeviceValue: () => value,
|
||||
setIsIosDeviceValue: (nextValue: boolean) => {
|
||||
value = nextValue;
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
vi.mock('../../../../src/components/utils', async () => {
|
||||
const actual = await vi.importActual('../../../../src/components/utils');
|
||||
|
||||
return {
|
||||
...actual,
|
||||
get isIosDevice() {
|
||||
return getIsIosDeviceValue();
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
const originalScrollTo = window.scrollTo;
|
||||
|
||||
describe('ScrollLocker', () => {
|
||||
beforeEach(() => {
|
||||
document.body.className = '';
|
||||
document.body.innerHTML = '';
|
||||
document.documentElement?.style.removeProperty('--window-scroll-offset');
|
||||
setIsIosDeviceValue(false);
|
||||
delete (window as { pageYOffset?: number }).pageYOffset;
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
if (originalScrollTo) {
|
||||
window.scrollTo = originalScrollTo;
|
||||
} else {
|
||||
delete (window as { scrollTo?: typeof window.scrollTo }).scrollTo;
|
||||
}
|
||||
document.body.className = '';
|
||||
document.documentElement?.style.removeProperty('--window-scroll-offset');
|
||||
setIsIosDeviceValue(false);
|
||||
delete (window as { pageYOffset?: number }).pageYOffset;
|
||||
});
|
||||
|
||||
it('adds and removes body class on non-iOS devices', () => {
|
||||
setIsIosDeviceValue(false);
|
||||
const locker = new ScrollLocker();
|
||||
|
||||
locker.lock();
|
||||
|
||||
expect(document.body.classList.contains('ce-scroll-locked')).toBe(true);
|
||||
|
||||
locker.unlock();
|
||||
|
||||
expect(document.body.classList.contains('ce-scroll-locked')).toBe(false);
|
||||
});
|
||||
|
||||
it('performs hard lock on iOS devices and restores scroll position', () => {
|
||||
const storedScroll = 160;
|
||||
|
||||
setIsIosDeviceValue(true);
|
||||
Object.defineProperty(window, 'pageYOffset', {
|
||||
configurable: true,
|
||||
value: storedScroll,
|
||||
});
|
||||
|
||||
const scrollTo = vi.fn();
|
||||
|
||||
window.scrollTo = scrollTo;
|
||||
|
||||
const locker = new ScrollLocker();
|
||||
|
||||
locker.lock();
|
||||
|
||||
expect(document.body.classList.contains('ce-scroll-locked--hard')).toBe(true);
|
||||
expect(document.documentElement?.style.getPropertyValue('--window-scroll-offset')).toBe(`${storedScroll}px`);
|
||||
|
||||
locker.unlock();
|
||||
|
||||
expect(document.body.classList.contains('ce-scroll-locked--hard')).toBe(false);
|
||||
expect(scrollTo).toHaveBeenCalledWith(0, storedScroll);
|
||||
});
|
||||
|
||||
it('does not restore scroll when hard lock was never applied', () => {
|
||||
setIsIosDeviceValue(true);
|
||||
const scrollTo = vi.fn();
|
||||
|
||||
window.scrollTo = scrollTo;
|
||||
|
||||
const locker = new ScrollLocker();
|
||||
|
||||
locker.unlock();
|
||||
|
||||
expect(scrollTo).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
|
@ -7,197 +7,7 @@ const importPolyfills = async (): Promise<void> => {
|
|||
await import(POLYFILLS_PATH);
|
||||
};
|
||||
|
||||
type VendorMatchesKey =
|
||||
| 'matchesSelector'
|
||||
| 'mozMatchesSelector'
|
||||
| 'msMatchesSelector'
|
||||
| 'oMatchesSelector'
|
||||
| 'webkitMatchesSelector';
|
||||
|
||||
describe('polyfills', () => {
|
||||
describe('Element.matches', () => {
|
||||
type VendorImplementation = (selector: string) => boolean;
|
||||
type MutableMatchesPrototype = Omit<
|
||||
Element,
|
||||
| 'matches'
|
||||
| 'matchesSelector'
|
||||
| 'mozMatchesSelector'
|
||||
| 'msMatchesSelector'
|
||||
| 'oMatchesSelector'
|
||||
| 'webkitMatchesSelector'
|
||||
> & {
|
||||
matches: VendorImplementation | undefined;
|
||||
} & Partial<Record<VendorMatchesKey, VendorImplementation>>;
|
||||
|
||||
const prototype = Element.prototype as MutableMatchesPrototype;
|
||||
const vendorKeys: VendorMatchesKey[] = [
|
||||
'matchesSelector',
|
||||
'mozMatchesSelector',
|
||||
'msMatchesSelector',
|
||||
'oMatchesSelector',
|
||||
'webkitMatchesSelector',
|
||||
];
|
||||
|
||||
let originalMatches: ((selector: string) => boolean) | undefined;
|
||||
const originalVendors: Partial<Record<VendorMatchesKey, VendorImplementation>> = {};
|
||||
|
||||
beforeEach(() => {
|
||||
originalMatches = prototype.matches;
|
||||
prototype.matches = undefined;
|
||||
|
||||
vendorKeys.forEach((key) => {
|
||||
originalVendors[key] = prototype[key];
|
||||
delete prototype[key];
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
prototype.matches = originalMatches;
|
||||
|
||||
vendorKeys.forEach((key) => {
|
||||
const storedVendor = originalVendors[key];
|
||||
|
||||
if (typeof storedVendor === 'undefined') {
|
||||
delete prototype[key];
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
prototype[key] = storedVendor;
|
||||
});
|
||||
});
|
||||
|
||||
it('delegates to vendor-specific implementation when available', async () => {
|
||||
const vendorImplementation = vi.fn((_selector: string) => true);
|
||||
|
||||
prototype.matchesSelector = (selector: string): boolean => vendorImplementation(selector);
|
||||
|
||||
await importPolyfills();
|
||||
|
||||
const element = document.createElement('div');
|
||||
|
||||
expect(element.matches('div')).toBe(true);
|
||||
expect(vendorImplementation).toHaveBeenCalledTimes(1);
|
||||
expect(vendorImplementation).toHaveBeenCalledWith('div');
|
||||
});
|
||||
|
||||
it('falls back to querySelectorAll when no vendor implementations exist', async () => {
|
||||
await importPolyfills();
|
||||
|
||||
const container = document.createElement('div');
|
||||
const child = document.createElement('span');
|
||||
const other = document.createElement('p');
|
||||
|
||||
container.appendChild(child);
|
||||
container.appendChild(other);
|
||||
document.body.appendChild(container);
|
||||
|
||||
expect(child.matches('span')).toBe(true);
|
||||
expect(child.matches('button')).toBe(false);
|
||||
|
||||
container.remove();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Element.closest', () => {
|
||||
type MutableClosestPrototype = Omit<Element, 'closest'> & {
|
||||
closest: Element['closest'] | undefined;
|
||||
};
|
||||
|
||||
const prototype = Element.prototype as MutableClosestPrototype;
|
||||
let originalClosest: ((selector: string) => Element | null) | undefined;
|
||||
|
||||
beforeEach(() => {
|
||||
originalClosest = prototype.closest;
|
||||
prototype.closest = undefined;
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
prototype.closest = originalClosest;
|
||||
});
|
||||
|
||||
it('returns the nearest ancestor that matches the selector', async () => {
|
||||
await importPolyfills();
|
||||
|
||||
const wrapper = document.createElement('section');
|
||||
const parent = document.createElement('div');
|
||||
const target = document.createElement('button');
|
||||
|
||||
parent.className = 'parent';
|
||||
target.className = 'child';
|
||||
|
||||
parent.appendChild(target);
|
||||
wrapper.appendChild(parent);
|
||||
document.body.appendChild(wrapper);
|
||||
|
||||
expect(target.closest('.parent')).toBe(parent);
|
||||
expect(target.closest('section')).toBe(wrapper);
|
||||
|
||||
wrapper.remove();
|
||||
});
|
||||
|
||||
it('returns null when no ancestor matches the selector', async () => {
|
||||
await importPolyfills();
|
||||
|
||||
const parent = document.createElement('div');
|
||||
const target = document.createElement('button');
|
||||
|
||||
parent.appendChild(target);
|
||||
document.body.appendChild(parent);
|
||||
|
||||
expect(target.closest('.missing')).toBeNull();
|
||||
|
||||
parent.remove();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Element.prepend', () => {
|
||||
type MutablePrependPrototype = Omit<Element, 'prepend'> & {
|
||||
prepend: ((nodes: Array<Node | string> | Node | string) => void) | undefined;
|
||||
};
|
||||
|
||||
const prototype = Element.prototype as MutablePrependPrototype;
|
||||
let originalPrepend: ((nodes: Array<Node | string> | Node | string) => void) | undefined;
|
||||
|
||||
beforeEach(() => {
|
||||
originalPrepend = prototype.prepend;
|
||||
prototype.prepend = undefined;
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
prototype.prepend = originalPrepend;
|
||||
});
|
||||
|
||||
it('inserts nodes and strings before the first child', async () => {
|
||||
await importPolyfills();
|
||||
|
||||
const element = document.createElement('div');
|
||||
const existing = document.createElement('p');
|
||||
const newSpan = document.createElement('span');
|
||||
|
||||
existing.textContent = 'existing';
|
||||
newSpan.textContent = 'new';
|
||||
|
||||
element.appendChild(existing);
|
||||
|
||||
const elementWithPolyfill = element as unknown as MutablePrependPrototype;
|
||||
const prepend = elementWithPolyfill.prepend;
|
||||
|
||||
if (typeof prepend !== 'function') {
|
||||
throw new Error('Expected element.prepend to be defined after applying polyfills');
|
||||
}
|
||||
|
||||
prepend.call(elementWithPolyfill, ['text', newSpan]);
|
||||
|
||||
const childNodes = Array.from(element.childNodes);
|
||||
|
||||
expect(childNodes).toHaveLength(3);
|
||||
expect(childNodes[0].textContent).toBe('text');
|
||||
expect(childNodes[1]).toBe(newSpan);
|
||||
expect(childNodes[2]).toBe(existing);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Element.scrollIntoViewIfNeeded', () => {
|
||||
type MutableScrollPrototype = Omit<Element, 'scrollIntoViewIfNeeded'> & {
|
||||
scrollIntoViewIfNeeded: ((centerIfNeeded?: boolean) => void) | undefined;
|
||||
|
|
|
|||
|
|
@ -86,6 +86,24 @@ describe('InlineToolAdapter', () => {
|
|||
|
||||
expect(tool.title).toBe(constructable.title);
|
||||
});
|
||||
|
||||
it('returns empty string when constructable is undefined', () => {
|
||||
const tool = new InlineToolAdapter({
|
||||
...createInlineToolOptions(),
|
||||
constructable: undefined as unknown as InlineToolAdapterOptions['constructable'],
|
||||
});
|
||||
|
||||
expect(tool.title).toBe('');
|
||||
});
|
||||
|
||||
it('returns empty string when constructable title is undefined', () => {
|
||||
const tool = new InlineToolAdapter({
|
||||
...createInlineToolOptions(),
|
||||
constructable: {} as InlineToolAdapterOptions['constructable'],
|
||||
});
|
||||
|
||||
expect(tool.title).toBe('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('.isInternal', () => {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ import type { Popover } from '../../../src/components/utils/popover';
|
|||
import { PopoverEvent } from '@/types/utils/popover/popover-event';
|
||||
import { EditorMobileLayoutToggled } from '../../../src/components/events';
|
||||
import Shortcuts from '../../../src/components/utils/shortcuts';
|
||||
import { BlockToolAPI } from '../../../src/components/block';
|
||||
|
||||
// Mock dependencies at module level
|
||||
const mockPopoverInstance = {
|
||||
|
|
@ -86,13 +85,7 @@ describe('Toolbox', () => {
|
|||
const blockAPI = {
|
||||
id: 'test-block-id',
|
||||
isEmpty: true,
|
||||
call: vi.fn((methodName: string) => {
|
||||
if (methodName === BlockToolAPI.APPEND_CALLBACK) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}),
|
||||
call: vi.fn(),
|
||||
} as unknown as BlockAPI;
|
||||
|
||||
// Mock BlockToolAdapter
|
||||
|
|
@ -760,4 +753,3 @@ describe('Toolbox', () => {
|
|||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -2,16 +2,13 @@ import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
|
|||
import type {
|
||||
ChainData } from '../../../src/components/utils';
|
||||
import {
|
||||
typeOf,
|
||||
isFunction,
|
||||
isObject,
|
||||
isString,
|
||||
isBoolean,
|
||||
isNumber,
|
||||
isUndefined,
|
||||
isClass,
|
||||
isEmpty,
|
||||
isPromise,
|
||||
isPrintableKey,
|
||||
keyCodes,
|
||||
mouseButtons,
|
||||
|
|
@ -30,7 +27,6 @@ import {
|
|||
capitalize,
|
||||
deepMerge,
|
||||
getUserOS,
|
||||
isTouchSupported,
|
||||
beautifyShortcut,
|
||||
getValidUrl,
|
||||
generateBlockId,
|
||||
|
|
@ -41,8 +37,7 @@ import {
|
|||
mobileScreenBreakpoint,
|
||||
isMobileScreen,
|
||||
isIosDevice,
|
||||
equals,
|
||||
copyTextToClipboard
|
||||
equals
|
||||
} from '../../../src/components/utils';
|
||||
|
||||
// Mock VERSION global variable
|
||||
|
|
@ -90,44 +85,6 @@ describe('utils', () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe('typeOf', () => {
|
||||
it('should return correct type for string', () => {
|
||||
expect(typeOf('test')).toBe('string');
|
||||
});
|
||||
|
||||
it('should return correct type for number', () => {
|
||||
expect(typeOf(123)).toBe('number');
|
||||
});
|
||||
|
||||
it('should return correct type for boolean', () => {
|
||||
expect(typeOf(true)).toBe('boolean');
|
||||
});
|
||||
|
||||
it('should return correct type for object', () => {
|
||||
expect(typeOf({})).toBe('object');
|
||||
});
|
||||
|
||||
it('should return correct type for array', () => {
|
||||
expect(typeOf([])).toBe('array');
|
||||
});
|
||||
|
||||
it('should return correct type for function', () => {
|
||||
expect(typeOf(() => {})).toBe('function');
|
||||
});
|
||||
|
||||
it('should return correct type for null', () => {
|
||||
expect(typeOf(null)).toBe('null');
|
||||
});
|
||||
|
||||
it('should return correct type for undefined', () => {
|
||||
expect(typeOf(undefined)).toBe('undefined');
|
||||
});
|
||||
|
||||
it('should return correct type for date', () => {
|
||||
expect(typeOf(new Date())).toBe('date');
|
||||
});
|
||||
});
|
||||
|
||||
describe('isFunction', () => {
|
||||
it('should return true for regular function', () => {
|
||||
const fn = function (): void {};
|
||||
|
|
@ -282,32 +239,6 @@ describe('utils', () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe('isClass', () => {
|
||||
it('should return true for class', () => {
|
||||
/**
|
||||
*
|
||||
*/
|
||||
class TestClass {}
|
||||
expect(isClass(TestClass)).toBe(true);
|
||||
});
|
||||
|
||||
it('should return false for regular function', () => {
|
||||
const fn = function (): void {};
|
||||
|
||||
expect(isClass(fn)).toBe(false);
|
||||
});
|
||||
|
||||
it('should return false for arrow function', () => {
|
||||
const fn = (): void => {};
|
||||
|
||||
expect(isClass(fn)).toBe(false);
|
||||
});
|
||||
|
||||
it('should return false for object', () => {
|
||||
expect(isClass({})).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('isEmpty', () => {
|
||||
it('should return true for empty object', () => {
|
||||
expect(isEmpty({})).toBe(true);
|
||||
|
|
@ -325,28 +256,11 @@ describe('utils', () => {
|
|||
expect(isEmpty(undefined)).toBe(true);
|
||||
});
|
||||
|
||||
it('should return false for object created with Object.create (no constructor)', () => {
|
||||
it('should return true for object created with Object.create (no constructor)', () => {
|
||||
const obj = Object.create(null);
|
||||
|
||||
expect(isEmpty(obj)).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('isPromise', () => {
|
||||
it('should return true for Promise', () => {
|
||||
const promise = Promise.resolve(123);
|
||||
|
||||
expect(isPromise(promise)).toBe(true);
|
||||
});
|
||||
|
||||
it('should return false for non-Promise', () => {
|
||||
expect(isPromise({})).toBe(false);
|
||||
});
|
||||
|
||||
it('should return false for thenable object', () => {
|
||||
const thenable = { then: () => {} };
|
||||
|
||||
expect(isPromise(thenable)).toBe(false);
|
||||
// lodash isEmpty returns true for objects with no enumerable properties
|
||||
expect(isEmpty(obj)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -733,8 +647,8 @@ describe('utils', () => {
|
|||
expect(capitalize('Hello')).toBe('Hello');
|
||||
});
|
||||
|
||||
it('should throw when called with empty string', () => {
|
||||
expect(() => capitalize('')).toThrow(TypeError);
|
||||
it('should return empty string when called with empty string', () => {
|
||||
expect(capitalize('')).toBe('');
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -803,13 +717,14 @@ describe('utils', () => {
|
|||
expect(result).toEqual({ value: null });
|
||||
});
|
||||
|
||||
it('should handle undefined values', () => {
|
||||
it('should skip undefined values', () => {
|
||||
const target = { value: 'old' };
|
||||
const source = { value: undefined };
|
||||
|
||||
const result = deepMerge(target, source);
|
||||
|
||||
expect(result).toEqual({ value: undefined });
|
||||
// lodash mergeWith skips undefined values (treats them as "not provided")
|
||||
expect(result).toEqual({ value: 'old' });
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -818,7 +733,7 @@ describe('utils', () => {
|
|||
const originalNavigator = navigator;
|
||||
|
||||
Object.defineProperty(window, 'navigator', {
|
||||
value: { appVersion: '' },
|
||||
value: { userAgent: '' },
|
||||
configurable: true,
|
||||
});
|
||||
|
||||
|
|
@ -839,7 +754,7 @@ describe('utils', () => {
|
|||
const originalNavigator = navigator;
|
||||
|
||||
Object.defineProperty(window, 'navigator', {
|
||||
value: { appVersion: 'Windows' },
|
||||
value: { userAgent: 'Windows' },
|
||||
configurable: true,
|
||||
});
|
||||
|
||||
|
|
@ -857,7 +772,7 @@ describe('utils', () => {
|
|||
const originalNavigator = navigator;
|
||||
|
||||
Object.defineProperty(window, 'navigator', {
|
||||
value: { appVersion: 'Mac' },
|
||||
value: { userAgent: 'Mac' },
|
||||
configurable: true,
|
||||
});
|
||||
|
||||
|
|
@ -872,12 +787,6 @@ describe('utils', () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe('isTouchSupported', () => {
|
||||
it('should be a boolean value', () => {
|
||||
expect(typeof isTouchSupported).toBe('boolean');
|
||||
});
|
||||
});
|
||||
|
||||
describe('beautifyShortcut', () => {
|
||||
it('should replace shift with ⇧', () => {
|
||||
expect(beautifyShortcut('Shift+B')).toContain('⇧');
|
||||
|
|
@ -887,7 +796,7 @@ describe('utils', () => {
|
|||
const originalNavigator = navigator;
|
||||
|
||||
Object.defineProperty(window, 'navigator', {
|
||||
value: { appVersion: 'Mac' },
|
||||
value: { userAgent: 'Mac' },
|
||||
configurable: true,
|
||||
});
|
||||
|
||||
|
|
@ -905,7 +814,7 @@ describe('utils', () => {
|
|||
const originalNavigator = navigator;
|
||||
|
||||
Object.defineProperty(window, 'navigator', {
|
||||
value: { appVersion: 'Windows' },
|
||||
value: { userAgent: 'Windows' },
|
||||
configurable: true,
|
||||
});
|
||||
|
||||
|
|
@ -1233,70 +1142,4 @@ describe('utils', () => {
|
|||
expect(equals(arr1, arr2)).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('copyTextToClipboard', () => {
|
||||
beforeEach(() => {
|
||||
// Mock clipboard API
|
||||
Object.defineProperty(navigator, 'clipboard', {
|
||||
value: {
|
||||
writeText: vi.fn().mockResolvedValue(undefined),
|
||||
},
|
||||
configurable: true,
|
||||
});
|
||||
|
||||
Object.defineProperty(window, 'isSecureContext', {
|
||||
value: true,
|
||||
configurable: true,
|
||||
});
|
||||
});
|
||||
|
||||
it('should use Clipboard API when available', async () => {
|
||||
const writeTextSpy = vi.spyOn(navigator.clipboard, 'writeText');
|
||||
|
||||
copyTextToClipboard('test text');
|
||||
|
||||
// Wait for promise to resolve
|
||||
await new Promise((resolve) => {
|
||||
setTimeout(resolve, 0);
|
||||
});
|
||||
|
||||
expect(writeTextSpy).toHaveBeenCalledWith('test text');
|
||||
});
|
||||
|
||||
it('should fallback to legacy method when Clipboard API fails', async () => {
|
||||
const writeTextSpy = vi.spyOn(navigator.clipboard, 'writeText').mockRejectedValue(new Error('Clipboard error'));
|
||||
|
||||
// Mock execCommand since it doesn't exist in jsdom
|
||||
const execCommandSpy = vi.fn().mockReturnValue(true);
|
||||
|
||||
Object.defineProperty(document, 'execCommand', {
|
||||
value: execCommandSpy,
|
||||
configurable: true,
|
||||
writable: true,
|
||||
});
|
||||
|
||||
// Mock getSelection and createRange for fallback method
|
||||
const mockRange = {
|
||||
selectNode: vi.fn(),
|
||||
};
|
||||
const mockSelection = {
|
||||
removeAllRanges: vi.fn(),
|
||||
addRange: vi.fn(),
|
||||
};
|
||||
|
||||
vi.spyOn(window, 'getSelection').mockReturnValue(mockSelection as unknown as Selection);
|
||||
vi.spyOn(document, 'createRange').mockReturnValue(mockRange as unknown as Range);
|
||||
|
||||
copyTextToClipboard('test text');
|
||||
|
||||
// Wait for promise to reject and fallback to execute
|
||||
await new Promise((resolve) => {
|
||||
setTimeout(resolve, 10);
|
||||
});
|
||||
|
||||
expect(execCommandSpy).toHaveBeenCalledWith('copy');
|
||||
|
||||
writeTextSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue