DOM Manipulation

/**
 * Takes an HTML element and adds the classNames passed within an array,
 * ignoring any non-string types. A space can be used to add multiple classes
 * e.g. addClassNamesToElement(element, ['element-inner active', true, null])
 * will add both 'element-inner' and 'active' as classes to that element.
 * @param element - The element in which the classes are added
 * @param classNames - An array defining the class names to add to the element
 */
function addClassNamesToElement(
  element: HTMLElement,
  ...classNames: Array<typeof undefined | boolean | null | string>
): void;

import { addClassNamesToElement } from "@lexical/utils";

const divElement = document.createElement('div');

// Add single class
addClassNamesToElement(divElement, 'editor-content');

// Add multiple classes
addClassNamesToElement(divElement, 'editor-content', 'active', 'focused');

// Add space-separated classes (automatically parsed)
addClassNamesToElement(divElement, 'editor-content active focused');

// Mixed with invalid types (non-strings are filtered out)
addClassNamesToElement(divElement, 'valid-class', true, null, undefined, 'another-class');
// Only 'valid-class' and 'another-class' will be added

// Conditional class addition
const isActive = true;
addClassNamesToElement(divElement, 'base-class', isActive && 'active-class');

/**
 * Takes an HTML element and removes the classNames passed within an array,
 * ignoring any non-string types. A space can be used to remove multiple classes
 * e.g. removeClassNamesFromElement(element, ['active small', true, null])
 * will remove both the 'active' and 'small' classes from that element.
 * @param element - The element in which the classes are removed
 * @param classNames - An array defining the class names to remove from the element
 */
function removeClassNamesFromElement(
  element: HTMLElement,
  ...classNames: Array<typeof undefined | boolean | null | string>
): void;

import { removeClassNamesFromElement } from "@lexical/utils";

const divElement = document.createElement('div');
divElement.className = 'editor-content active focused small';

// Remove single class
removeClassNamesFromElement(divElement, 'active');

// Remove multiple classes
removeClassNamesFromElement(divElement, 'active', 'focused');

// Remove space-separated classes (automatically parsed)
removeClassNamesFromElement(divElement, 'active focused');

// Mixed with invalid types (non-strings are filtered out)
removeClassNamesFromElement(divElement, 'active', true, null, undefined, 'focused');
// Only 'active' and 'focused' will be removed

// Conditional class removal
const shouldRemoveActive = true;
removeClassNamesFromElement(divElement, shouldRemoveActive && 'active');

/**
 * @param object - The instance of the type
 * @param objectClass - The class of the type
 * @returns Whether the object has the same Klass of the objectClass, ignoring the difference across window (e.g. different iframes)
 */
function objectKlassEquals<T>(
  object: unknown,
  objectClass: ObjectKlass<T>
): object is T;

type ObjectKlass<T> = new (...args: any[]) => T;

import { objectKlassEquals } from "@lexical/utils";

class MyCustomElement extends HTMLElement {}

// Check if element is instance of custom class across windows
const element = document.createElement('div');
const customElement = new MyCustomElement();

if (objectKlassEquals(element, HTMLDivElement)) {
  // Safe to use as HTMLDivElement
  element.innerHTML = 'Content';
}

if (objectKlassEquals(customElement, MyCustomElement)) {
  // Safe to use as MyCustomElement even across iframe boundaries
  customElement.customMethod();
}

// Works with any constructor function
if (objectKlassEquals(someObject, Array)) {
  // Safe to use array methods
  someObject.push(newItem);
}

/**
 * Calculates the zoom level of an element as a result of using
 * css zoom property. For browsers that implement standardized CSS
 * zoom (Firefox, Chrome >= 128), this will always return 1.
 * @param element - The element to calculate zoom level for
 * @returns The accumulated zoom level
 */
function calculateZoomLevel(element: Element | null): number;

import { calculateZoomLevel } from "@lexical/utils";

const editorElement = document.querySelector('.editor');

// Get current zoom level
const zoomLevel = calculateZoomLevel(editorElement);

// Adjust measurements based on zoom
const rect = editorElement.getBoundingClientRect();
const actualWidth = rect.width / zoomLevel;
const actualHeight = rect.height / zoomLevel;

// Use in position calculations
function getAdjustedPosition(element: Element, clientX: number, clientY: number) {
  const zoom = calculateZoomLevel(element);
  return {
    x: clientX / zoom,
    y: clientY / zoom
  };
}

/**
 * Converts number to CSS pixel string
 * @param value - Numeric value to convert
 * @returns CSS pixel string (e.g., "10px")
 */
function px(value: number): string;

import { px } from "@lexical/utils";

const element = document.createElement('div');

// Set CSS properties with pixel values
element.style.width = px(200);        // "200px"
element.style.height = px(100);       // "100px"
element.style.marginTop = px(-5);     // "-5px"
element.style.left = px(0);           // "0px"

// Use in dynamic styling
function setElementSize(el: HTMLElement, width: number, height: number) {
  el.style.width = px(width);
  el.style.height = px(height);
}

// Use with calculations
const baseSize = 16;
const scaleFactor = 1.5;
element.style.fontSize = px(baseSize * scaleFactor); // "24px"