Andres Santana
70 lines
2.2 KiB
JavaScript
70 lines
2.2 KiB
JavaScript
import { FIXED_CONTEXT_SELECTOR, ELEMENT_TYPE_MAP } from "../constants/selectors.js";
|
|
|
|
/**
|
|
* Logical type of an element for the hover tooltip: `text`, `button`, `image`,
|
|
* or `block` otherwise. Edit targets (`data-edit-id` / `data-edit-assisted-id`)
|
|
* that are not button/image tags are `text`.
|
|
* @param {HTMLElement} element
|
|
* @returns {string}
|
|
*/
|
|
export function getElementType(element) {
|
|
const tag = element?.tagName?.toLowerCase();
|
|
const hasEditId = element?.hasAttribute?.('data-edit-id') || element?.hasAttribute?.('data-edit-assisted-id');
|
|
|
|
for (const [type, tags] of Object.entries(ELEMENT_TYPE_MAP)) {
|
|
if (tags.some(candidate => candidate.toLowerCase() === tag)) {
|
|
if (!hasEditId && type === 'text') return 'block';
|
|
return type;
|
|
}
|
|
}
|
|
|
|
if (hasEditId) return 'text';
|
|
|
|
return 'block';
|
|
}
|
|
|
|
|
|
/**
|
|
* The app's mount point, which roots every structural walk so the editor's own
|
|
* body-level surfaces (panels, markers, outlines) are never traversed.
|
|
* @returns {HTMLElement}
|
|
*/
|
|
export function getAppRoot() {
|
|
return document.getElementById('root') || document.body;
|
|
}
|
|
|
|
|
|
/**
|
|
* True when the element sits inside a fixed/sticky ancestor, meaning overlays
|
|
* must use viewport (fixed) positioning instead of document coordinates.
|
|
* @param {HTMLElement} element
|
|
* @returns {boolean}
|
|
*/
|
|
export function isInFixedContext(element) {
|
|
return !!element.closest(FIXED_CONTEXT_SELECTOR);
|
|
}
|
|
|
|
/**
|
|
* Host-page modal dialogs that are currently open and visible. Mounted-but-closed
|
|
* dialogs are skipped so a dismissed modal never keeps blocking the page.
|
|
* @returns {HTMLElement[]}
|
|
*/
|
|
export function getOpenModals() {
|
|
return Array.from(document.querySelectorAll('[role="dialog"]')).filter(
|
|
(modal) => modal.getAttribute('data-state') !== 'closed' && modal.checkVisibility?.() !== false,
|
|
);
|
|
}
|
|
|
|
const HOST_ISOLATED_EVENTS = ['pointerdown', 'pointerup', 'keydown', 'keyup'];
|
|
|
|
/**
|
|
* Prevents host-page libraries (Radix DismissableLayer, FocusScope, etc.) from
|
|
* seeing pointer and keyboard events that originate inside the editor's floating UI.
|
|
* @param {HTMLElement} element
|
|
*/
|
|
export function isolateEditorUiEvents(element) {
|
|
for (const eventName of HOST_ISOLATED_EVENTS) {
|
|
element.addEventListener(eventName, (event) => event.stopPropagation());
|
|
}
|
|
}
|