umberto 7.0.2 → 8.0.0

package/themes/umberto/src/gloria/js/helpers/create-outside-click-watcher.js

@@ -0,0 +1,39 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * Watches for clicks outside of specified elements and triggers a callback when they occur.
+ *
+ * @param config - Configuration object.
+ * @param config.elements - Elements to monitor.
+ * @param config.callback - Function to call when click outside occurs.
+ * @returns Cleanup function to remove the listener.
+ */
+export function createOutsideClickWatcher( { elements, callback } ) {
+	// Convert single element to array for consistent handling.
+	if ( !Array.isArray( elements ) ) {
+		elements = [ elements ];
+	}
+
+	// Handler function for click event.
+	const handleClick = event => {
+		// Check if click was outside all monitored elements.
+		const isOutside = !elements.some( element =>
+			element === event.target || element.contains( event.target )
+		);
+
+		if ( isOutside ) {
+			callback( event );
+		}
+	};
+
+	// Attach the event listener.
+	document.addEventListener( 'click', handleClick );
+
+	// Return cleanup function.
+	return () => {
+		document.removeEventListener( 'click', handleClick );
+	};
+}

package/themes/umberto/src/gloria/js/helpers/cubic-bezier.js

@@ -0,0 +1,55 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * Creates a cubic bezier easing function with the given control points.
+ *
+ * @param x1 - First control point X coordinate (0-1)
+ * @param y1 - First control point Y coordinate (0-1)
+ * @param x2 - Second control point X coordinate (0-1)
+ * @param y2 - Second control point Y coordinate (0-1)
+ * @returns A function that takes a value t (0-1) and returns the interpolated value
+ */
+export function createCubicBezier( x1, y1, x2, y2 ) {
+	return function( t ) {
+		// Implementation of cubic bezier calculation
+		const cx = 3 * x1;
+		const bx = 3 * ( x2 - x1 ) - cx;
+		const ax = 1 - cx - bx;
+
+		const cy = 3 * y1;
+		const by = 3 * ( y2 - y1 ) - cy;
+		const ay = 1 - cy - by;
+
+		const sampleCurveX = t => ( ( ax * t + bx ) * t + cx ) * t;
+		const sampleCurveY = t => ( ( ay * t + by ) * t + cy ) * t;
+
+		let t2 = t;
+
+		// Newton-Raphson iteration to solve for t given x
+		for ( let i = 0; i < 8; i++ ) {
+			const x = sampleCurveX( t2 ) - t;
+			if ( Math.abs( x ) < 0.001 ) {
+				break;
+			}
+
+			const d = ( 3 * ax * t2 + 2 * bx ) * t2 + cx;
+			if ( Math.abs( d ) < 0.0001 ) {
+				break;
+			}
+
+			t2 = t2 - x / d;
+		}
+
+		return sampleCurveY( t2 );
+	};
+}
+
+/**
+ * Common easing functions derived from CSS `cubic-bezier()` timing functions.
+ */
+export const easings = {
+	cubicOut: createCubicBezier( 0.215, 0.61, 0.355, 1 )
+};

package/themes/umberto/src/gloria/js/helpers/date-time.js

@@ -0,0 +1,21 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+export const Hours = {
+	to: {
+		milliseconds: num => num * 3600000
+	}
+};
+
+export const Days = {
+	to: {
+		milliseconds: num => num * 86400000
+	}
+};
+export const Weeks = {
+	to: {
+		milliseconds: num => num * 604800000
+	}
+};

package/themes/umberto/src/gloria/js/helpers/decode-html-entities.js

@@ -0,0 +1,23 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * Decodes common HTML entities in a string.
+ *
+ * @param text - Text that may contain HTML entities
+ * @returns Text with HTML entities replaced with their corresponding characters
+ */
+export function decodeHtmlEntities( text ) {
+	return text
+		.replace( / /g, ' ' )
+		.replace( /&/g, '&' )
+		.replace( /&lt;/g, '<' )
+		.replace( /&gt;/g, '>' )
+		.replace( /&quot;/g, '"' )
+		.replace( /&apos;/g, '\'' )
+		.replace( /&mdash;/g, '—' )
+		.replace( /&ndash;/g, '–' )
+		.replace( /&hellip;/g, '…' );
+};

package/themes/umberto/src/gloria/js/helpers/escape-handler.js

@@ -0,0 +1,59 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+const ON_ESCAPE_CALLBACK_STACK = new Set();
+let globalEscapeHandler = null;
+
+/**
+ * Executes a callback when the Escape key is pressed.
+ *
+ * This function follows the UI layering pattern where pressing Escape
+ * only closes the topmost layer (like modals, dropdowns, or overlays).
+ * The most recently added callback is considered to be associated with
+ * the topmost UI layer and will be the only one executed.
+ *
+ * @param callback - The function to execute on Escape key press when it's the most recent addition.
+ * @returns A function that removes the event listener when called.
+ */
+export function onEscapeKeyPress( callback ) {
+	if ( typeof callback !== 'function' ) {
+		throw new Error( 'Callback must be a function' );
+	}
+
+	// Global escape key handler (defined once)
+	if ( !globalEscapeHandler ) {
+		globalEscapeHandler = event => {
+			if ( event.key === 'Escape' || event.keyCode === 27 ) {
+				// Get the latest callback from the stack (if any)
+				const latestCallback = Array.from( ON_ESCAPE_CALLBACK_STACK ).pop();
+
+				if ( latestCallback ) {
+					latestCallback();
+
+					// Remove the executed callback
+					ON_ESCAPE_CALLBACK_STACK.delete( latestCallback );
+				}
+			}
+		};
+
+		document.addEventListener( 'keydown', globalEscapeHandler );
+	}
+
+	// Add the callback to the stack
+	ON_ESCAPE_CALLBACK_STACK.add( callback );
+
+	function unmount() {
+		ON_ESCAPE_CALLBACK_STACK.delete( callback );
+
+		// If stack is empty, remove the global handler
+		if ( ON_ESCAPE_CALLBACK_STACK.size === 0 && globalEscapeHandler ) {
+			document.removeEventListener( 'keydown', globalEscapeHandler );
+			globalEscapeHandler = null;
+		}
+	}
+
+	// Return a function to remove the callback if needed
+	return unmount;
+}

package/themes/umberto/src/gloria/js/helpers/fetch-stylesheet.js

@@ -0,0 +1,25 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * Fetches a stylesheet from the given URL and returns its content.
+ *
+ * @param url The URL of the stylesheet to fetch.
+ * @returns A promise that resolves with the stylesheet content.
+ */
+export async function fetchStylesheet( url ) {
+	try {
+		const response = await fetch( url );
+
+		if ( !response.ok ) {
+			throw new Error( `Failed to fetch stylesheet: ${ response.status } ${ response.statusText }` );
+		}
+
+		return await response.text();
+	} catch ( error ) {
+		console.error( `Error fetching stylesheet from ${ url }:`, error );
+		throw error;
+	}
+}

package/themes/umberto/src/gloria/js/helpers/find-code-lang.js

@@ -0,0 +1,85 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+export const PROGRAMMING_LANGUAGES = [
+	'angular-html',
+	'angular-ts',
+	'astro',
+	'bash',
+	'blade',
+	'c',
+	'coffee',
+	'coffeescript',
+	'cpp',
+	'c++',
+	'css',
+	'diff',
+	'glsl',
+	'graphql',
+	'gql',
+	'haml',
+	'handlebars',
+	'hbs',
+	'html',
+	'html-derivative',
+	'http',
+	'imba',
+	'jade',
+	'java',
+	'javascript',
+	'jinja',
+	'jison',
+	'jl',
+	'js',
+	'json',
+	'json5',
+	'jsonc',
+	'jsonl',
+	'jsx',
+	'julia',
+	'less',
+	'lit',
+	'markdown',
+	'marko',
+	'md',
+	'mdc',
+	'mdx',
+	'php',
+	'plain',
+	'postcss',
+	'py',
+	'python',
+	'pug',
+	'r',
+	'regex',
+	'regexp',
+	'sass',
+	'scss',
+	'sh',
+	'shell',
+	'shellscript',
+	'sql',
+	'styl',
+	'stylus',
+	'svelte',
+	'text',
+	'ts',
+	'ts-tags',
+	'tsx',
+	'typescript',
+	'vue',
+	'vue-html',
+	'wasm',
+	'wgsl',
+	'wit',
+	'xml',
+	'yaml',
+	'yml',
+	'zsh'
+];
+
+export function findCodeLang( codeElement ) {
+	return Array.from( codeElement.classList ).find( className => PROGRAMMING_LANGUAGES.includes( className ) );
+}

package/themes/umberto/src/gloria/js/helpers/focus-first-interactive.js

@@ -0,0 +1,50 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import { isFocusable } from './is-focusable';
+import { timeout } from './timeout';
+
+/**
+ * Focuses the first interactive/focusable element within a container.
+ * If the container itself is focusable, it will be focused.
+ * Otherwise, the first focusable child element will be focused.
+ *
+ * @param container - The DOM element to search within
+ * @param [options] - Configuration options
+ * @param [options.includeContainer=true] - Whether to include the container element itself as a focus candidate
+ * @param [options.selector='a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])'] - Selector for focusable elements
+ * @returns The element that was focused, or null if no focusable element was found
+ */
+export async function focusFirstInteractive( container, options = {} ) {
+	const {
+		includeContainer = true,
+		selector = 'a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
+	} = options;
+
+	// Find the first focusable element in the container
+	const focusableElements = container.querySelectorAll( selector );
+
+	if ( focusableElements.length > 0 ) {
+		return focusAndWait( focusableElements[ 0 ] );
+	}
+
+	// Check if the container itself is focusable
+	if ( includeContainer && isFocusable( container ) ) {
+		return focusAndWait( container );
+	}
+
+	return null;
+}
+
+/**
+ * Let's wait short period of the time to make the browser apply focus.
+ */
+async function focusAndWait( element ) {
+	element.focus();
+
+	await timeout( 20 );
+
+	return element;
+}

package/themes/umberto/src/gloria/js/helpers/format-html.js

@@ -0,0 +1,181 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * Formats the HTML output for better readability.
+ */
+export function formatHtml( input ) {
+	// Decode HTML entities before formatting.
+	input = decodeHtmlEntities( input );
+
+	// A list of block-like elements around which the new lines should be inserted, and within which
+	// the indentation of their children should be increased.
+	// The list is partially based on https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements that contains
+	// a full list of HTML block-level elements.
+	// A void element is an element that cannot have any child - https://html.spec.whatwg.org/multipage/syntax.html#void-elements.
+	// Note that <pre> element is not listed on this list to avoid breaking whitespace formatting.
+	// Note that <br> element is not listed and handled separately so no additional white spaces are injected.
+	const elementsToFormat = [
+		{ name: 'address', isVoid: false },
+		{ name: 'article', isVoid: false },
+		{ name: 'aside', isVoid: false },
+		{ name: 'blockquote', isVoid: false },
+		{ name: 'details', isVoid: false },
+		{ name: 'dialog', isVoid: false },
+		{ name: 'dd', isVoid: false },
+		{ name: 'div', isVoid: false },
+		{ name: 'dl', isVoid: false },
+		{ name: 'dt', isVoid: false },
+		{ name: 'fieldset', isVoid: false },
+		{ name: 'figcaption', isVoid: false },
+		{ name: 'figure', isVoid: false },
+		{ name: 'footer', isVoid: false },
+		{ name: 'form', isVoid: false },
+		{ name: 'h1', isVoid: false },
+		{ name: 'h2', isVoid: false },
+		{ name: 'h3', isVoid: false },
+		{ name: 'h4', isVoid: false },
+		{ name: 'h5', isVoid: false },
+		{ name: 'h6', isVoid: false },
+		{ name: 'header', isVoid: false },
+		{ name: 'hgroup', isVoid: false },
+		{ name: 'hr', isVoid: true },
+		{ name: 'li', isVoid: false },
+		{ name: 'main', isVoid: false },
+		{ name: 'nav', isVoid: false },
+		{ name: 'ol', isVoid: false },
+		{ name: 'p', isVoid: false },
+		{ name: 'section', isVoid: false },
+		{ name: 'table', isVoid: false },
+		{ name: 'tbody', isVoid: false },
+		{ name: 'td', isVoid: false },
+		{ name: 'th', isVoid: false },
+		{ name: 'thead', isVoid: false },
+		{ name: 'tr', isVoid: false },
+		{ name: 'ul', isVoid: false }
+	];
+
+	const elementNamesToFormat = elementsToFormat.map( element => element.name ).join( '|' );
+
+	// It is not the fastest way to format the HTML markup but the performance should be good enough.
+	const lines = input
+		// Add new line before and after `<tag>` and `</tag>`.
+		// It may separate individual elements with two new lines, but this will be fixed below.
+		.replace( new RegExp( `</?(${ elementNamesToFormat })( .*?)?>`, 'g' ), '\n$&\n' )
+		// Keep `<br>`s at the end of line to avoid adding additional whitespaces before `<br>`.
+		.replace( /<br[^>]*>/g, '$&\n' )
+		// Divide input string into lines, which start with either an opening tag, a closing tag, or just a text.
+		.split( '\n' );
+
+	let indentCount = 0;
+	let isPreformattedLine = false;
+
+	return lines
+		.filter( line => line.length )
+		.map( line => {
+			isPreformattedLine = isPreformattedBlockLine( line, isPreformattedLine );
+
+			if ( isNonVoidOpeningTag( line, elementsToFormat ) ) {
+				return indentLine( line, indentCount++ );
+			}
+
+			if ( isClosingTag( line, elementsToFormat ) ) {
+				return indentLine( line, --indentCount );
+			}
+
+			if ( isPreformattedLine === 'middle' || isPreformattedLine === 'last' ) {
+				return line;
+			}
+
+			return indentLine( line, indentCount );
+		} )
+		.join( '\n' );
+}
+
+/**
+ * Decodes HTML entities to their character representations.
+ *
+ * @param html HTML string with entities.
+ * @returns HTML string with decoded entities.
+ */
+function decodeHtmlEntities( html ) {
+	const entities = {
+		'&quot;': '\'',
+		'&amp;': '&',
+		'&lt;': '<',
+		'&gt;': '>',
+		'&nbsp;': ' ',
+		'&apos;': '\'',
+		'&#39;': '\'',
+		'&#x2F;': '/',
+		'&#x27;': '\'',
+		'&#x60;': '`'
+	};
+
+	return html.replace( /&quot;|&amp;|&lt;|&gt;|&nbsp;|&apos;|&#39;|&#x2F;|&#x27;|&#x60;/g,
+		match => entities[ match ] );
+}
+
+/**
+ * Checks, if an argument is an opening tag of a non-void element to be formatted.
+ *
+ * @param line String to check.
+ * @param elementsToFormat Elements to be formatted.
+ */
+function isNonVoidOpeningTag( line, elementsToFormat ) {
+	return elementsToFormat.some( element => {
+		if ( element.isVoid ) {
+			return false;
+		}
+
+		if ( !new RegExp( `<${ element.name }( .*?)?>` ).test( line ) ) {
+			return false;
+		}
+
+		return true;
+	} );
+}
+
+/**
+ * Checks, if an argument is a closing tag.
+ *
+ * @param line String to check.
+ * @param elementsToFormat Elements to be formatted.
+ */
+function isClosingTag( line, elementsToFormat ) {
+	return elementsToFormat.some( element => {
+		return new RegExp( `</${ element.name }>` ).test( line );
+	} );
+}
+
+/**
+ * Indents a line by a specified number of characters.
+ *
+ * @param line Line to indent.
+ * @param indentCount Number of characters to use for indentation.
+ * @param indentChar Indentation character(s). 4 spaces by default.
+ */
+function indentLine( line, indentCount, indentChar = '  ' ) {
+	// More about Math.max() here in https://github.com/ckeditor/ckeditor5/issues/10698.
+	return `${ indentChar.repeat( Math.max( 0, indentCount ) ) }${ line }`;
+}
+
+/**
+ * Checks whether a line belongs to a preformatted (`<pre>`) block.
+ *
+ * @param line Line to check.
+ * @param isPreviousLinePreFormatted Information on whether the previous line was preformatted (and how).
+ */
+function isPreformattedBlockLine( line, isPreviousLinePreFormatted ) {
+	if ( new RegExp( '<pre( .*?)?>' ).test( line ) ) {
+		return 'first';
+	} else if ( new RegExp( '</pre>' ).test( line ) ) {
+		return 'last';
+	} else if ( isPreviousLinePreFormatted === 'first' || isPreviousLinePreFormatted === 'middle' ) {
+		return 'middle';
+	} else {
+		return false;
+	}
+}

package/themes/umberto/src/gloria/js/helpers/get-all-scrollable-parents.js

@@ -0,0 +1,34 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * Checks if an element is scrollable.
+ */
+export function getAllScrollableParents( element, includeWindow = false ) {
+	const scrollableParents = [];
+
+	while ( element && element !== document.body ) {
+		if ( isElementScrollable( element ) ) {
+			scrollableParents.push( element );
+		}
+
+		element = element.parentNode;
+	}
+
+	if ( includeWindow ) {
+		scrollableParents.push( window );
+	}
+
+	return scrollableParents;
+}
+
+/**
+ * Checks if an element is scrollable.
+ */
+export function isElementScrollable( element ) {
+	const overflowY = window.getComputedStyle( element ).overflowY;
+
+	return overflowY === 'auto' || overflowY === 'scroll';
+}

package/themes/umberto/src/gloria/js/helpers/get-parents-until.js

@@ -0,0 +1,26 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * Get all ancestors of an element until the first match of a given selector.
+ *
+ * @param el - The DOM element.
+ * @param selector - A CSS selector to stop at. If the element matches this selector, it will not be included in the result.
+ * @returns {HTMLElement[]} An array of ancestor elements, until the first match of the selector.
+ */
+export const getParentsUntil = ( el, selector ) => {
+	const parents = [];
+	let _el = el.parentNode;
+
+	while ( _el && typeof _el.matches === 'function' ) {
+		parents.unshift( _el );
+		if ( _el.matches( selector ) ) {
+			return parents;
+		} else {
+			_el = _el.parentNode;
+		}
+	}
+	return [];
+};

package/themes/umberto/src/gloria/js/helpers/highlight-code.js

@@ -0,0 +1,18 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import { codeToHtml } from 'shiki';
+
+export async function highlightCode( codeString, lang ) {
+	const highlightedHTML = await codeToHtml( codeString.trim(), {
+		lang,
+		theme: 'github-light'
+	} );
+
+	const highlightedHTMLWithTabsInsteadOfSpaces = highlightedHTML.replaceAll( / {4}/g, '	' );
+	const highlightedHTMLWithClasses = highlightedHTMLWithTabsInsteadOfSpaces.replaceAll( 'shiki', `shiki ${ lang }` );
+
+	return highlightedHTMLWithClasses;
+}

package/themes/umberto/src/gloria/js/helpers/html-builder.js

@@ -0,0 +1,69 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * Creates a proxy handler for HTML element creation with a fluent API.
+ */
+function createHtmlBuilder() {
+	const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+	const SVG_ELEMENTS = [ 'svg', 'use', 'title', 'path', 'rect', 'circle', 'g', 'polygon' ];
+
+	const handler = {
+		get( _, tag ) {
+			return ( attributes = {}, ...children ) => {
+				if ( children ) {
+					children = children.flat().filter( Boolean );
+				}
+
+				// If the first argument is a string or DOM element, treat it as a child
+				if ( typeof attributes === 'string' || attributes instanceof Node ) {
+					children.unshift( attributes );
+					attributes = {};
+				}
+
+				// Create the element - use SVG namespace for SVG elements
+				const isSvgElement = SVG_ELEMENTS.includes( tag );
+				const element = isSvgElement ?
+					document.createElementNS( SVG_NAMESPACE, tag ) :
+					document.createElement( tag );
+
+				// Set attributes
+				for ( const [ key, value ] of Object.entries( attributes ) ) {
+					if ( value === true ) {
+						element.setAttribute( key, '' );
+					} else if ( value !== false && value !== null && value !== undefined ) {
+						element.setAttribute( key, value );
+					}
+				}
+
+				// Add children
+				for ( const child of children ) {
+					if ( child !== null && child !== undefined ) {
+						if ( typeof child === 'string' ) {
+							element.appendChild( document.createTextNode( child ) );
+						} else if ( child instanceof Node ) {
+							element.appendChild( child );
+						}
+					}
+				}
+
+				return element;
+			};
+		}
+	};
+
+	return new Proxy( {}, handler );
+}
+
+/**
+ * A proxy for creating HTML elements with a fluent API.
+ *
+ * @example
+ * // Create a div with class 'container' and id 'main'
+ * const div = html.div({ class: 'container', id: 'main' },
+ *   html.span('Hello World')
+ * );
+ */
+export const html = createHtmlBuilder();